上篇讲过单个的布局控件,往往开始中很多都是多布局的视图。多布局简单说就是多个子布局的组合成一个复杂的界面视图。
在flutter中Flex组件展示了多布局的属性:
Flex组件和Row、Column属性主要的区别就是多一个direction。
当direction的值为Axis.horizontal的时候,则是Row。
当direction的值为Axis.vertical的时候,则是Column。
1,Row
Row组件相当于一个横向布局,把所有的子控件横向排列。
不好解释属性。贴一段代码:
mainAxisAlignment:表示子Widgets在Row所占用的水平空间内对齐方式
crossAxisAlignment: 表示子Widgets在纵轴方向的对齐方式
mainAxisSize: 水平方向占用的空间默认最大
class MyRowBody extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
//表示子Widgets在Row所占用的水平空间内对齐方式
crossAxisAlignment: CrossAxisAlignment.end,
//表示子Widgets在纵轴方向的对齐方式
mainAxisSize: MainAxisSize.max,
//水平方向占用的空间默认最大
children: <Widget>[
Text(
"第一个是文本",
textAlign: TextAlign.center,
style: TextStyle(color: Colors.red, fontSize: 14),
),
Align(
child: Icon(
Icons.radar,
size: 40,
color: Colors.yellow,
),
alignment: Alignment.bottomCenter,
widthFactor: 2, //可以看看更改这个两个值的大小
heightFactor: 2,
),
Container(color: Colors.blue, width: 80, height: 80),
Container(color: Colors.red, width: 100, height: 100),
],
);
}
}
2,Column
同理跟横向差不多
class MyColumnBody extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
//表示子Widgets在Row所占用的水平空间内对齐方式
crossAxisAlignment: CrossAxisAlignment.end,
//表示子Widgets在纵轴方向的对齐方式
mainAxisSize: MainAxisSize.min,
//水平方向占用的空间默认最大
children: <Widget>[
Text(
"第一个是文本",
textAlign: TextAlign.center,
style: TextStyle(color: Colors.red, fontSize: 14),
),
Align(
child: Icon(
Icons.radar,
size: 40,
color: Colors.yellow,
),
alignment: Alignment.bottomCenter,
widthFactor: 2, //可以看看更改这个两个值的大小
heightFactor: 2,
),
Container(color: Colors.blue, width: 80, height: 80),
Container(color: Colors.red, width: 100, height: 100),
],
);
}
}
3,Stack
这个跟app的绝对布局相似,可以定位到子控件的具体位置
Positioned组件只能在Stack中使用
class MyStackBody extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
Container(
color: Colors.blue,
width: 300,
height: 300,
),
Positioned(
left: 20,
top: 20,
child: Icon(Icons.radar, size: 50, color: Colors.white)
),
Positioned(
bottom: 20,
right: 20,
child: Text("底部", style: TextStyle(fontSize: 20, color: Colors.white)),
)
],
);
}
}