Flutter-列表

SingleChildScrollView

  • child
  • padding
  • scrollDirection ：滚动方向，水平（Axis.horizontal）或垂直（Axis.vertical）
  • reverse ：是否翻转，默认第一个组件作为滚动视图的起点
  • physics
    • ClampingScrollPhysics ：安卓的微光效果
    • BouncingScrollPhysics ：ios的弹性效果

代码区

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
class MyPage extends StatelessWidget {
  const MyPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return  Stack(
      children: [
        SingleChildScrollView(
          physics: const BouncingScrollPhysics(),
          child: Column(
            children: [
              Card(),//card中代码省略
              Card(),
              Card()
            ],
          ),
        )
      ],
    );
  }
}

效果图

ListView

三种构造方法，常用的子组件有 ListTile

  • ListView( )
  • ListView.builder( )
    • itemCount
    • itemExtent
    • itemBuilder
  • ListView.separated( )
    • separatorBuilder ：分割线构造器

代码区

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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
class MyPage extends StatelessWidget {
  const MyPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return  Column(
      children: [
        demo1(),
        demo2(),
        demo3()
      ],
    );
  }
}

class demo1 extends StatelessWidget {//默认的ListView构造
  // demo1({Key? key}) : super(key: key);
  final List<Widget> tiles=List.generate(10, (index) =>  ListTile(
    title: Text("tile$index"),
    subtitle: const Text("subtitle"),
    leading: const Icon(Icons.account_box,size: 40,),
    trailing: const Icon(Icons.arrow_left,size: 40,),
  ));

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.red,
      height: 200,
      child: ListView(
        scrollDirection: Axis.vertical,
        physics: const BouncingScrollPhysics(),
        children: tiles,
      ),
    );
  }
}

class demo2 extends StatelessWidget {//ListView的builder构造
  final List<Widget> tiles=List.generate(10, (index) =>  ListTile(
    title: Text("tile$index"),
    subtitle: const Text("subtitle"),
    leading: const Icon(Icons.account_box,size: 40,),
    trailing: const Icon(Icons.arrow_left,size: 40,),
  ));

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.orange,
      height: 200,
      child: ListView.builder(
        itemCount: 5,//指定需要多少个item，按需取得
        itemExtent: 50,//指定item的大小，或许是高度？固定的大小会处理的更有效。
        padding: const EdgeInsets.all(10),
        itemBuilder: (context,index){//返回单个
          return tiles[index];
        },
      ),
    );
  }
}

class demo3 extends StatelessWidget {//ListView的separated构造
  final List<Widget> tiles=List.generate(10, (index) =>  ListTile(
    title: Text("tile$index"),
    subtitle: const Text("subtitle"),
    leading: const Icon(Icons.account_box,size: 40,),
    trailing: const Icon(Icons.arrow_left,size: 40,),
  ));

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.green,
      height: 200,
      child: ListView.separated(
        itemCount: tiles.length,
        itemBuilder: (context,index){
          return tiles[index];
        },
        separatorBuilder: (context,index){//分割线构造器
          return const Divider(
            color:  Colors.red,
            height: 30,//分割线的高度，也就是两个item之间的距离
          );
        },
      ),
    );
  }
}

效果图

GridView

三种构造方法

  • GridView（默认）
    • children（子组件）
    • scrollDirection（滚动方向）
    • gridDelegate（网格代表？或许可以理解为网格的总设置）
      • SliverGridDelegateWithFixedCrossAxisCount（指定列数，子组件的宽度自适应）
      • SliverGridDelegateWithMaxCrossAxisExtent（指定子组件交叉轴方向的大小，列数自适应）
    • 各轴spacing（调整子组件之间的距离）
  • GridView.count（列数固定）
  • GridView.extend（子组件宽度固定）
  • GridView.builder（动态网格布局）

代码区

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
class MyPage extends StatelessWidget {
  const MyPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return  GridView(//网格列表
      padding: const EdgeInsets.all(10),//内边距
      scrollDirection: Axis.vertical,//垂直滚动
      physics: const BouncingScrollPhysics(),//弹性滚动
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(//固定交叉轴方向组件数量
        crossAxisCount: 2,//数量
        mainAxisSpacing: 10,//主轴方向间距
        crossAxisSpacing: 10,//交叉轴方向间距
        // mainAxisExtent: 30//子组件主轴方向的大小
        childAspectRatio: 0.5//子组件交叉轴方向和主轴方向的大小比例
      ),
      children: [
        Container(color: Colors.red,),
        Container(color: Colors.black,),
        Container(color: Colors.green,),
        Container(color: Colors.yellow,),
        Container(color: Colors.orange,),
        Container(color: Colors.grey,),
        Container(color: Colors.red,),
        Container(color: Colors.black,),
        Container(color: Colors.green,),
        Container(color: Colors.yellow,),
        Container(color: Colors.orange,),
        Container(color: Colors.grey,)
      ],
    );
  }
}

效果图