Flutter学习笔记 --多子元素组件

多子元素组件有很多，其中常用的有Scaffold、AppBar、Row、Column、ListView、GridView、CustomScrollView、Flex、Wrap、Flow等。

1.Scaffold

Scaffold是基于Material Design可视化布局的结构，也是Flutter提供的标准化布局容器。其结构体如下：

Scaffold(
      appBar: //顶部导航栏
      body: //界面内容
      floatingActionButton: //右下角按钮
      bottomNavigationBar://底部菜单
      drawer://侧滑菜单
    )
1
2
3
4
5
6
7

2.AppBar

AppBar是顶部导航栏，有leading、actions、title属性。其结构体如下：

AppBar(
      leading: //左边区域，一般作为返回按钮、侧滑菜单按钮和图标等
      title: //中间区域，如果appbar展示不下，会优先挤压title,一般用于界面标题
      actions: //右边区域，一般用作搜索按钮
    )
1
2
3
4
5

3.Row和Column

Row和Column属性线性布局，Row是行多子元素组件，Column是列多子元素组件。它们有如下属性：

		Row(
            // mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.end,
            mainAxisSize: MainAxisSize.max,
            textDirection: TextDirection.ltr,
            children: <Widget>[
              Container(
                width: 100,
                height: 100,
                color: Colors.yellow,
                alignment: Alignment.center,
                child: ListView(
                  itemExtent: 30,
                  scrollDirection: Axis.vertical,
                  children: const [
                    Text('text1'),
                    Text('text2'),
                    Text('text3'),
                    Text('text4'),
                    Text('text5'),
                  ],
                ),
              ),
              Container(
                width: 100,
                height: 80,
                color: Colors.blue,
                alignment: Alignment.center,
                child: ListView.builder(
                    itemExtent: 30,
                    itemCount: 20,
                    itemBuilder: (context, position) {
                      if (position == 2) {
                        return const Text('我是二货');
                      }
                      return Text('我有$position 个冰棍');
                    }),
              ),
              Container(
                width: 100,
                height: 100,
                color: Colors.green,
                alignment: Alignment.center,
                child: ListView.separated(
                    itemBuilder: (context, position) {
                      if (position == 2) {
                        return const Text('我是二货');
                      }
                      return Text('我有$position 个冰棍');
                    },
                    separatorBuilder: (context, position) {
                      return const Divider(height: 1.0, color: Colors.grey);
                    },
                    itemCount: 20),
              ),
              Container(
                width: 100,
                height: 100,
                color: Colors.white,
                alignment: Alignment.center,
                child: ListView.custom(
                  scrollDirection: Axis.vertical,
                  childrenDelegate: SliverChildBuilderDelegate(
                      (BuildContext context, int position) {
                    return Container(
                      height: 20.0,
                      alignment: Alignment.center,
                      color: position % 2 == 1 ? Colors.green : Colors.yellow,
                      child: Text('$position'),
                    );
                  }, childCount: 50),
                ),
              )
            ])
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

4.ListView

Flutter中的ListView与Android中ListView类似，都是线性列表组件。ListView常用的创建方式有3种，如下：
（1）ListView

ListView(
	itemExtent:20,//子组件的高度
	children:<widget>[
		Text('item0'),
		Text('item1'),
		Text('item2'),
		Text('item3'),
		....
	]
)
1
2
3
4
5
6
7
8
9
10

(2)ListView.builder

ListView.builder(
	itemExtent:20,
	itemCount:5,
	itemBuilder:(context,position){
		return Text('第$position个条目’);
	}
)
1
2
3
4
5
6
7

(3)ListView.separated

ListView.separated(
 itemBuilder: (context, position) {
    if (position == 2) {
         return const Text('我是二货');
    }
    return Text('我有$position 个冰棍');
  },
 separatorBuilder: (context, position) {
        return const Divider(height: 1.0, color: Colors.grey);
   },
 itemCount: 20)
1
2
3
4
5
6
7
8
9
10
11

5.CustomMultiChildLayout

CustomMultiChildLayout是一个多节点、自定义布局组件，通过提供的delegate可以实现控制节点的位置以及尺寸。代码如下：

class _MyLayoutDelegate extends MultiChildLayoutDelegate {
  static const String layoutTitle='layout_bar';
  static const String body = 'body';

  @override
  void performLayout(Size size) {
    Size layoutSize = layoutChild(layoutTitle,
        BoxConstraints(maxHeight: size.height, maxWidth: size.width));
    positionChild(layoutTitle, const Offset(0, 0));
    layoutChild(body, BoxConstraints.tight(Size(size.width, size.height)));
    positionChild(body, Offset(layoutSize.width, layoutSize.height));
  }

  @override
  bool shouldRelayout(covariant MultiChildLayoutDelegate oldDelegate) {
    return false;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

	Scaffold(
        appBar: AppBar(
          title: const Text("ListWheelScrollView Example"),
          leading: const Text('leading'),
          actions: [
            IconButton(
                onPressed: () => {
                      print('add'),
                    },
                icon: const Icon(Icons.add)),
            IconButton(
                onPressed: () => {
                      print('delete'),
                    },
                icon: const Icon(Icons.delete)),
          ],
        ),
        body: CustomMultiChildLayout(
          delegate: _MyLayoutDelegate(),
          children: [LayoutId(id: _MyLayoutDelegate.layoutTitle, child: Text('这是title')),
          LayoutId(id: _MyLayoutDelegate.body, child: Text('是body'))],
        ),
    )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

6.IndexedStack

IndexedStack继承Stack，通过index属性可以直接切换它的子组件。开发中，我们可以用IndexedStack切换界面，但是IndexedStack切换是没有任何动画的。

IndexedStack(
	 index: 1,
	alignment: Alignment.center,
	children: const [
		Text('第一个Text'),
		Text('第二个Text'),
		Text('第三个Text'),
 	],
 )
1
2
3
4
5
6
7
8
9

7.Wrap

Wrap是自适应布局组件，Wrap组件可以替代Row组件，当一行显示不全时，会自动进行换行处理。

	Wrap(
          spacing: 10,
          runSpacing: 5,
          children: const [
            Text('苹果',style: TextStyle(fontSize: 50,color: Colors.blue),),
            Text('西瓜',style: TextStyle(fontSize: 50,color: Colors.green),),
            Text('香蕉',style: TextStyle(fontSize: 50,color: Colors.red),),
            Text('荔枝',style: TextStyle(fontSize: 50,color: Colors.yellow),),
            Text('葡萄',style: TextStyle(fontSize: 50,color: Colors.orange),),
            Text('哈密瓜',style: TextStyle(fontSize: 50,color: Colors.purpleAccent),),
          ],
     )
1
2
3
4
5
6
7
8
9
10
11
12