Flutter-多布局控件_flutter 多布局

上篇讲过单个的布局控件，往往开始中很多都是多布局的视图。多布局简单说就是多个子布局的组合成一个复杂的界面视图。
在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),
      ],
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

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),
      ],
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

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)),
        )
      ],
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24