Flutter学习指南：UI布局和控件，三面蚂蚁核心金融部

这里看起来可能有些绕，BarWidget 依赖了 _BarWidgetState，而 _BarWidgetState 又继承了 State< BarWidget>。如果读者不太理解，其实也没有什么关系，这只是一个样板代码，照着写就行了。

从 BarWidget 的实现来看，好像跟前面使用 StatelessWidget 没有什么区别，都是在 build 方法里面返回一个 Widget，只是 stateful widget 把这个方法挪到了 State 里面。实际上，两者的区别非常大。stateless widget 整个生命周期里都不会改变，所以 build 方法只会执行一次。而 stateful widget 只要状态改变，就会调用 build 方法重新创建 UI。

为了触发 UI 的重建，我们可以调用 setState 方法。下面的代码读者留意一下即可，在后面我们学习了相关的控件后再回过头来看。

class BarWidget extends StatefulWidget {
@override
State createState() {
return _BarWidgetState();
}
}

class _BarWidgetState extends State {
var i = 0;

@override
Widget build(BuildContext context) {
return Row(
children: [
Text(‘i = $i’),
RaisedButton(
onPressed: () {
setState(() {
++i;
});
},
child: Text(‘click’),
)
],
);
}
}

下面我们开始学习一些具体的控件。

文本

为了展示文本，我们使用 Text：

class TestWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Text(“Put your text here”);
}
}

这就是最简单的文本了，它使用的是默认的样式。很多情况下，我们都需要对文本的样式进行修改，这个时候，可以使用 TextStyle：

class TestWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Text(
“Put your text here”,
style: TextStyle(
color: Colors.blue,
fontSize: 16.0,
fontWeight: FontWeight.bold
),
);
}
}

图片

使用 Image，可以让我们向用户展示一张图片。图片的来源可以是网络、文件、资源和内存，它们对应的构造函数分别是：

Image.asset(name);
Image.file(file);
Image.memory(bytes);
Image.network(src);

比方说，为了展示一张来自网络的图片，我们可以这样：

class TestWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Image.network(
“http://www.example.com/xxx.png”,
width: 200.0,
height: 150.0,
);
}
}

按钮

Flutter 提供了两个基本的按钮控件：FlatButton 和 RaisedButton，它们的使用方法是类似的：

class TestWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
var flatBtn = FlatButton(
onPressed: () => print(‘FlatButton pressed’),
child: Text(‘BUTTON’),
);
var raisedButton = RaisedButton(
onPressed: () => print(‘RaisedButton pressed’),
child: Text(‘BUTTON’),
);
return raisedButton;
}
}

通过设