Flutter组件基础——GridView

GridView是网格布局，类似于iOS中的UICollectionView，可设置每行多少个、单个对象的宽高比、对象水平方向的间距、垂直方向的间距等等。

GridView的常用属性

  • GridView
    • scrollDirection: 滑动方向
      • Axis.horizontal: 水平方向滑动
      • Axis.vertical: 垂直方向滑动，默认为这个。
    • padding: GridView相对于父视图的边距
    • crossAxisCount: 每行多少个
    • mainAxisSpacing: 与滑动方向垂直的方向的间距，eg: 当横向滑动时，这个代表垂直方向对象之间的间距；
    • crossAxisSpacing: 与滑动方向平行的方向的间距，eg: 当横向滑动时，这个代表水平方向对象之间的间距；
    • childAspectRatio：单个元素的宽高比(或者高宽比)，当scrollDirection为vertical时，代表宽高比；当scrollDirection为horizontal时，代表高宽比。

简单使用

代码如下：

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'GridView widget',
        home: Scaffold(
          body: GridView.count(
            scrollDirection: Axis.vertical,
            childAspectRatio: 2,
            padding: const EdgeInsets.all(40.0),
            crossAxisSpacing: 10.0,
            mainAxisSpacing: 20.0,
            crossAxisCount: 2,
            children: <Widget>[
              Container(
                padding: const EdgeInsets.all(8),
                child: const Text("He'd have you all unravel at the"),
                color: Colors.teal[100],
              ),
              Container(
                padding: const EdgeInsets.all(8),
                child: const Text('Heed not the rabble'),
                color: Colors.teal[200],
              ),
              Container(
                padding: const EdgeInsets.all(8),
                child: const Text('Sourd of screams but the'),
                color: Colors.teal[300],
              ),
              Container(
                padding: const EdgeInsets.all(8),
                child: const Text('Who scream'),
                color: Colors.teal[400],
              ),
              Container(
                padding: const EdgeInsets.all(8),
                child: const Text('Revolution is coming...'),
                color: Colors.teal[500],
              ),
              Container(
                padding: const EdgeInsets.all(8),
                child: const Text('Revolution, they...'),
                color: Colors.teal[600],
              ),
            ],
          ),
        ));
  }
}

效果如下：

动态列表

代码如下：

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


class MyGridView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GridView.builder(
        padding: EdgeInsets.all(40.0),
        scrollDirection: Axis.horizontal,
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
            mainAxisSpacing: 20.0,
            crossAxisSpacing: 10.0,
            childAspectRatio: 2.0),
        itemCount: 6,
        itemBuilder: (BuildContext context, int index) {
          return Card(
            color: Colors.amber,
            child: Center(
              child: Text('$index'),
            ),
          );
        });
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: new AppBar(
          title: new Text('GridView builder'),
        ),
        body: MyGridView(),
      ),
    );
  }
}

效果如下：

参考

GridView Dev Doc
Flutter免费视频第二季-常用组件