Flutter 系列（四）基础UI实践

您好，欢迎关注我，本篇文章是关于 Flutter 的系列文，从简单的 Flutter 介绍开始，一步步带你了解进入 Flutter 的世界。你最好有一定的移动开发经验，如果没有也不要担心，在我的专栏底部给我留言，我会尽我的能力给你解答。

上篇文章我们介绍了Flutter的整体架构，相信大家一定印象深刻，本篇文章介绍 Flutter UI的基础构建，从主题、提示、图片加载和动画四个方向介绍。

一.使用主题管理颜色和字体样式

使用主题可以在应用中采用统一的颜色和样式。定义主题有两种方式：内建主题或自定义Theme类。

1.内建主题

new MaterialApp(
title: title,
theme: new ThemeData(
brightness: Brightness.dark,
primaryColor: Colors.lightBlue[800],
accentColor: Colors.cyan[600],
),
);

2.自定义主题

new Theme(
// Create a unique theme with "new ThemeData"
data: new ThemeData(
accentColor: Colors.yellow,
),
);

3.使用主题

通过以上两种方式创建主题后，我们可以在Widget的build方法中通过Theme.of(context)函数使用主题。

new Container(
color: Theme.of(context).accentColor,
child: new Text(
'Text with a background color',
style: Theme.of(context).textTheme.title,
),
);

通过ThemeData文档可以查看到主题里面支持预定义的颜色

通过TextTheme可以查看系统预制的字体样式。例如示例中提到的theme.textTheme.title就是这个样子的：

SnackBar
在Android中有Toast弹出提示这个概念，但是在Flutter中没有Toast，取而代之的是SnackBar。

想要创建一个SnackBar，我们需要用到Scaffold容器，之前文章有讲过Scaffold是一个包含Material Design的容器。

Scaffold(
appBar: AppBar(
title: Text('SnackBar Demo'),
),
body: SnackBarPage(), // We'll fill this in below!
);

接下来创建一个按钮:

return Center(
child: RaisedButton(
onPressed: _showSnackBar,
child: Text('Show SnackBar'),
),
);

点击按钮的时候显示SnackBar:

void _showSnackBar() {
final snackBar = SnackBar(
content: Text('Yay! A SnackBar!'),
action: SnackBarAction(
label: 'Undo',
onPressed: () {
// Some code to undo the change!
},
),
);

Scaffold.of(context).showSnackBar(snackBar);
}

二.从网络加载图片

在Flutter中直接使用Image.network就可以加载图片了

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
var title = 'Web Images';

return Material
pp(
title: title,
home: Scaffold(
appBar: AppBar(
title: Text(title),
),
body: Image.network(
'https://github.com/flutter/website/blob/master/_includes/code/layout/lakes/images/lake.jpg?raw=true',
),
),
);
}
}

该方法还可以直接加载GIF图片

Image.network(
'https://github.com/flutter/plugins/raw/master/packages/video_player/doc/demo_ipod.gif?raw=true',
);

通过placeholder属性可以增加一个占位图：

FadeInImage.assetNetwork(
placeholder: 'assets/loading.gif',
image: 'https://github.com/flutter/website/blob/master/_includes/code/layout/lakes/images/lake.jpg?raw=true',
);

值得注意的是用Image.network加载的图片并没有缓存，如果想加载图片并缓存，需要使用：

CachedNetworkImage(
placeholder: CircularProgressIndicator(),
imageUrl: 'https://github.com/flutter/website/blob/master/_includes/code/layout/lakes/images/lake.jpg?raw=true',
);

如果对Flutter的图片缓存策略感兴趣，请继续关注本专栏，之后的文章中我会分享给大家

三.动画

本段只简单的介绍动画入门，之后有文章会详细介绍Flutter动画。
上篇文章说到过在Flutter中所有的东西都是Widget，包括动画也不例外，如果你想让某个Widget包含动画属性，那么你需要用AnimatedOpacity将其包裹起来，AnimatedOpacity也是一个Widget。

AnimatedOpacity(
// If the Widget should be visible, animate to 1.0 (fully visible). If
// the Widget should be hidden, animate to 0.0 (invisible).
opacity: _visible ? 1.0 : 0.0,
duration: Duration(milliseconds: 500),
// The green box needs to be the child of the AnimatedOpacity
child: Container(
width: 200.0,
height: 200.0,
color: Colors.green,
),
);

我们使用一个StatefulWidget来调用setState()方法刷新_visible的值，就能显示动画了,是不是很简单？

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
final appTitle = 'Opacity Demo';
return MaterialApp(
title: appTitle,
home: MyHomePage(title: appTitle),
);
}
}

// The StatefulWidget's job is to take in some data and create a State class.
// In this case, our Widget takes in a title, and creates a _MyHomePageState.
class MyHomePage extends StatefulWidget {
final String title;

MyHomePage({Key key, this.title}) : super(key: key);

@override
_MyHomePageState createState() => _MyHomePageState();
}

// The State class is responsible for two things: holding some data we can
// update and building the UI using that data.
class _MyHomePageState extends State<MyHomePage> {
// Whether the green box should be visible or invisible
bool _visible = true;

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: AnimatedOpacity(
// If the Widget should be visible, animate to 1.0 (fully visible). If
// the Widget should be hidden, anima
1eaea
te to 0.0 (invisible).
opacity: _visible ? 1.0 : 0.0,
duration: Duration(milliseconds: 500),
// The green box needs to be the child of the AnimatedOpacity
child: Container(
width: 200.0,
height: 200.0,
color: Colors.green,
),
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
// Make sure we call setState! This will tell Flutter to rebuild the
// UI with our changes!
setState(() {
_visible = !_visible;
});
},
tooltip: 'Toggle Opacity',
child: Icon(Icons.flip),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}

本篇文章从主题、提示、图片加载和动画四个方面简单的介绍了Flutter的UI创建过程，为了避免文章太长导致可读性较差，所以只简单的讲了这四个方面，还有更多内容会在之后的文章里介绍。相信本篇文章读完之后，你已经知道如何使用Flutter Widget了，下一篇专栏来点实战，我会教大家如何实现一个轮播指示器。

想学习更多Android方面的知识或者Flutter相关内容，详情可以查询主页