Flutter：UI布局和控件

转载自&＃xff1a;https://mp.weixin.qq.com/s/V0cL9bSTM65HTIJ4CU4Cow

基本控件

Widget

在 Flutter 里&＃xff0c;UI 控件就是所谓的 Widget。通过组合不同的 Widget&＃xff0c;来实现我们用户交互界面。

Widget 分为两种&＃xff0c;一种是无状态的&＃xff0c;叫 StatelessWidget&＃xff0c;它只能用来展示信息&＃xff0c;不能有动作&＃xff08;用户交互&＃xff09;&＃xff1b;另一种是有状态的&＃xff0c;叫 StatefulWidget&＃xff0c;这种 Widget 可以通过改变状态使得 UI 发生变化&＃xff0c;它可以包含用户交互。

StatelessWidget 的使用非常简单&＃xff0c;我们只需要继承 StatelessWidget&＃xff0c;然后实现 build 方法就可以了&＃xff1a;

class FooWidget extends StatelessWidget {&＃64;overrideWidget build(BuildContext context) {// ...}
}

关于 build 方法的实现&＃xff0c;在后面我们学习具体的控件时读者就会了解的&＃xff0c;这里暂时忽略掉。

StatefulWidget 用起来麻烦一些&＃xff0c;他还需要一个 State&＃xff1a;

class BarWidget extends StatefulWidget {&＃64;overrideState createState() {return _BarWidgetState();}
}class _BarWidgetState extends State {&＃64;overrideWidget build(BuildContext context) {// ...}
}

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

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

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

class BarWidget extends StatefulWidget {&＃64;overrideState createState() {return _BarWidgetState();}
}class _BarWidgetState extends State {var i &＃61; 0;&＃64;overrideWidget build(BuildContext context) {return Row(children: [Text(&＃39;i &＃61; $i&＃39;),RaisedButton(onPressed: () {setState(() {&＃43;&＃43;i;});},child: Text(&＃39;click&＃39;),)],);}
}

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

文本

为了展示文本&＃xff0c;我们使用 Text&＃xff1a;

class TestWidget extends StatelessWidget {&＃64;overrideWidget build(BuildContext context) {return Text("Put your text here");}
}

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

class TestWidget extends StatelessWidget {&＃64;overrideWidget build(BuildContext context) {return Text("Put your text here",style: TextStyle(color: Colors.blue,fontSize: 16.0,fontWeight: FontWeight.bold),);}
}

图片

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

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

比方说&＃xff0c;为了展示一张来自网络的图片&＃xff0c;我们可以这样&＃xff1a;

class TestWidget extends StatelessWidget {&＃64;overrideWidget build(BuildContext context) {return Image.network("http://www.example.com/xxx.png",width: 200.0,height: 150.0,);}
}

按钮

Flutter 提供了两个基本的按钮控件&＃xff1a;FlatButton 和 RaisedButton&＃xff0c;它们的使用方法是类似的&＃xff1a;

class TestWidget extends StatelessWidget {&＃64;overrideWidget build(BuildContext context) {var flatBtn &＃61; FlatButton(onPressed: () &＃61;> print(&＃39;FlatButton pressed&＃39;),child: Text(&＃39;BUTTON&＃39;),);var raisedButton &＃61; RaisedButton(onPressed: () &＃61;> print(&＃39;RaisedButton pressed&＃39;),child: Text(&＃39;BUTTON&＃39;),);return raisedButton;}
}

通过设置 onPressed 回调&＃xff0c;我们可以在按钮被点击的时候得到回调。child 参数用于设置按钮的内容。虽然我们给 child 传递的是 Text&＃xff0c;但这不是必需的&＃xff0c;它可以接受任意的 Widget&＃xff0c;比方说&＃xff0c;Image。

注意&＃xff0c;由于我们只是在按钮点击的时候打印一个字符串&＃xff0c;这里使用 StatelessWidget 是没有问题的。但如果有其他 UI 动作&＃xff08;比如弹出一个 dialog&＃xff0c;则必须使用 StatefulWidget&＃xff09;。

它们的区别只是样式不同而已的&＃xff1a;

FlatButton&＃xff1a;

RaiseButton&＃xff1a;

文本输入框

Flutter 的文本输入框叫 TextField。为了获取用户输入的文本&＃xff0c;我们需要给他设置一个 controller。通过这个 controller&＃xff0c;就可以拿到文本框里的内容&＃xff1a;

class MessageForm extends StatefulWidget {&＃64;overrideState createState() {return _MessageFormState();}
}class _MessageFormState extends State {var editController &＃61; TextEditingController();&＃64;overrideWidget build(BuildContext context) {// Row、Expand 都是用于布局的控件&＃xff0c;这里可以先忽略它们return Row(children: [Expanded(child: TextField(controller: editController,),),RaisedButton(child: Text("click"),onPressed: () &＃61;> print(&＃39;text inputted: ${editController.text}&＃39;),)],);}&＃64;overridevoid dispose() {super.dispose();// 手动调用 controller 的 dispose 方法以释放资源editController.dispose();}
}

显示弹框

在前面的 TextField 例子中&＃xff0c;我们只是把用户的输入通过 print 打印出来&＃xff0c;这未免也太无趣了。在这一小节&＃xff0c;我们要把它显示在 dialog 里。为了弹出一个 dialog&＃xff0c;我们需要调用 showDialog 方法并传递一个 builder&＃xff1a;

class _MessageFormState extends State {var editController &＃61; TextEditingController();&＃64;overrideWidget build(BuildContext context) {return Row(children: [Expanded(child: TextField(controller: editController,),),RaisedButton(child: Text("click"),onPressed: () {showDialog(// 第一个 context 是参数名&＃xff0c;第二个 context 是 State 的成员变量context: context,builder: (_) {return AlertDialog(// dialog 的内容content: Text(editController.text),// actions 设置 dialog 的按钮actions: [FlatButton(child: Text(&＃39;OK&＃39;),// 用户点击按钮后&＃xff0c;关闭弹框onPressed: () &＃61;> Navigator.pop(context),)],);});})],);}&＃64;overridevoid dispose() {super.dispose();editController.dispose();}
}

最简单的布局——Container、Padding 和 Center&＃xff1a;

我们经常说&＃xff0c;Flutter 里面所有的东西都是 Widget&＃xff0c;所以&＃xff0c;布局也是 Widget。

控件 Container 可以让我们设置一个控件的尺寸、背景、margin 等&＃xff1a;

class TestWidget extends StatelessWidget {&＃64;overrideWidget build(BuildContext context) {return Container(child: Text(&＃39;text&＃39;),padding: EdgeInsets.all(8.0),margin: EdgeInsets.all(4.0),width: 80.0,decoration: BoxDecoration(// 背景色color: Colors.grey,// 圆角borderRadius: BorderRadius.circular(5.0),),);}
}

如果我们只需要 padding&＃xff0c;可以使用控件 Padding&＃xff1a;

class TestWidget extends StatelessWidget {&＃64;overrideWidget build(BuildContext context) {return Padding(padding: EdgeInsets.all(8.0),child: Text(&＃39;text&＃39;),);}
}

Center 就跟它的名字一样&＃xff0c;把一个控件放在中间&＃xff1a;

class TestWidget extends StatelessWidget {&＃64;overrideWidget build(BuildContext context) {return Container(padding: EdgeInsets.all(8.0),margin: EdgeInsets.all(4.0),width: 200.0,height: 200.0,decoration: BoxDecoration(// 背景色color: Colors.grey,// 圆角borderRadius: BorderRadius.circular(5.0),),// 把文本放在 Container 的中间child: Center(child: Text(&＃39;text&＃39;),),);}
}

水平、竖直布局和 Expand

我们经常说&＃xff0c;Flutter 里面所有的东西都是 Widget&＃xff0c;所以&＃xff0c;布局也是 Widget。水平布局我们可以使用 Row&＃xff0c;竖直布局使用 Column。

class TestWidget extends StatelessWidget {&＃64;overrideWidget build(BuildContext context) {return Row(// 只有一个子元素的 widget&＃xff0c;一般使用 child 参数来设置&＃xff1b;Row 可以包含多个子控件&＃xff0c;// 对应的则是 children。children: [Text(&＃39;text1&＃39;),Text(&＃39;text2&＃39;),Text(&＃39;text3&＃39;),Text(&＃39;text4&＃39;),],);}
}

Column 的使用是一样的&＃xff1a;

class TestWidget extends StatelessWidget {&＃64;overrideWidget build(BuildContext context) {return Column(children: [Text(&＃39;text1&＃39;),Text(&＃39;text2&＃39;),Text(&＃39;text3&＃39;),Text(&＃39;text4&＃39;),],);}
}

关于 Expand 控件&＃xff0c;我们来看看 TextField 的那个例子&＃xff1a;

class MessageForm extends StatefulWidget {&＃64;overrideState createState() {return _MessageFormState();}
}class _MessageFormState extends State {var editController &＃61; TextEditingController();&＃64;overrideWidget build(BuildContext context) {return Row(children: [// 占满一行里除 RaisedButton 外的所有空间Expanded(child: TextField(controller: editController,),),RaisedButton(child: Text("click"),onPressed: () &＃61;> print(&＃39;text inputted: ${editController.text}&＃39;),)],);}&＃64;overridevoid dispose() {super.dispose();editController.dispose();}
}

这里通过使用 Expand&＃xff0c;TextField 才能够占满一行里除按钮外的所有空间。此外&＃xff0c;当一行/列里有多个 Expand 时&＃xff0c;我们还可以通过设置它的 flex 参数&＃xff0c;在多个 Expand 之间按比例划分可用空间。

class TestWidget extends StatelessWidget {&＃64;overrideWidget build(BuildContext context) {return Row(children: [Expanded(// 占一行的 2/3flex: 2,child: RaisedButton(child: Text(&＃39;btn1&＃39;),),),Expanded(// 占一行的 1/3flex: 1,child: RaisedButton(child: Text(&＃39;btn2&＃39;),),),],);}
}

Stack 布局

有些时候&＃xff0c;我们可能会希望一个控件叠在另一个控件的上面。于是&＃xff0c;Stack 应运而生&＃xff1a;

class TestWidget extends StatelessWidget {&＃64;overrideWidget build(BuildContext context) {return Stack(children: [Text(&＃39;foobar&＃39;),Text(&＃39;barfoo&＃39;),],);}
}

默认情况下&＃xff0c;子控件都按 Stack 的左上角对齐&＃xff0c;于是&＃xff0c;上面的两个文本完全一上一下堆叠在一起。我们还可以通过设置 alignment 参数来改变这个对齐的位置&＃xff1a;

class TestWidget extends StatelessWidget {&＃64;overrideWidget build(BuildContext context) {return Stack(// Aligment 的取值范围为 [-1, 1]&＃xff0c;Stack 中心为 (0, 0)&＃xff0c;// 这里设置为 (-0.5, -0.5) 后&＃xff0c;可以让文本对齐到 Container 的 1/4 处alignment: const Alignment(-0.5, -0.5),children: [Container(width: 200.0,height: 200.0,color: Colors.blue,),Text(&＃39;foobar&＃39;),],);}
}

通过组合 Row/Column 和 Stack&＃xff0c;已经能够完成绝大部分的布局了&＃xff0c;所以 Flutter 里没有相对布局之类的东西。更多的 Flutter 控件&＃xff0c;读者可以参考 https://flutter.io/widgets/。