Flutter开发之——可滑动组件—GridView

发表于 分类于 ， ， 阅读时长 ≈ 4 分钟

一 概述

GridView是一个可滑动的视图组件，本文介绍GridView的常见创建方法

  • 构造创建方式
  • 快速创建方式：build，custom，count，extent

二 GridView

2.1 构造函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
GridView({
    Key? key,
    Axis scrollDirection = Axis.vertical,
    bool reverse = false,
    ScrollController? controller,
    bool? primary,
    ScrollPhysics? physics,
    bool shrinkWrap = false,
    EdgeInsetsGeometry? padding,
    required this.gridDelegate,
    bool addAutomaticKeepAlives = true,
    bool addRepaintBoundaries = true,
    bool addSemanticIndexes = true,
    double? cacheExtent,
    List<Widget> children = const <Widget>[],
    int? semanticChildCount,
    DragStartBehavior dragStartBehavior = DragStartBehavior.start,
    Clip clipBehavior = Clip.hardEdge,
    ScrollViewKeyboardDismissBehavior keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual,
    String? restorationId,
  })

2.2 常见属性说明

属性 说明 取值
gridDelegate 控制子控件的排列 SliverGridDelegateWithFixedCrossAxisCount①
SliverGridDelegateWithMaxCrossAxisExtent
scrollDirection② 滚动方向 Axis枚举
reverse 是否反转滚动方向 bool
controller 滚动控制器 ScrollController
physics③ 滚动物理特性 ScrollPhysics

SliverGridDelegateWithFixedCrossAxisCount①

属性 说明
crossAxisCount 交叉轴方向上个数
mainAxisSpacing 主轴方向上2行之间的间隔
crossAxisSpacing 交叉轴方向上之间的间隔
childAspectRatio 子控件宽高比

scrollDirection②

属性 说明
horizontal 水平方向滚动
vertical 垂直方向滚动

physics③

属性 说明
AlwaysScrollableScrollPhysics 总是可以滑动
NeverScrollableScrollPhysics 禁止滚动
BouncingScrollPhysics 内容超过一屏 上拉有回弹效果
ClampingScrollPhysics 包裹内容 不会有回弹

三 构造方式创建GridView

3.1 代码

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
//State<MyHomePage> 
ScrollController _gridViewController;

 //State<MyHomePage> 
  @override
 void initState() {
   super.initState();
   _gridViewController = ScrollController()
     ..addListener(() {
       print('${_gridViewController.position}');
     });
 }
//Widget build(BuildContext context) 
GridView(
         controller:_gridViewController,
         gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3,crossAxisSpacing: 3, mainAxisSpacing: 3),
         children: List.generate(50, (position) {
           return Container(
             alignment: Alignment.center,
             height: 80,
             color: Colors.primaries[position % Colors.primaries.length],
             child: Text("$position"),
           );
         }),
       )

3.2 效果图

3.3 ScrollController打印结果

1
2
3
I/flutter (16530): ScrollPositionWithSingleContext#9a250(offset: 72.8, range: 0.0..1746.0, viewport: 444.0, ScrollableState, ClampingScrollPhysics -> RangeMaintainingScrollPhysics, DragScrollActivity#d503a(ScrollDragController#59958), ScrollDirection.reverse)
I/flutter (16530): ScrollPositionWithSingleContext#9a250(offset: 77.2, range: 0.0..1746.0, viewport: 444.0, ScrollableState, ClampingScrollPhysics -> RangeMaintainingScrollPhysics, DragScrollActivity#d503a(ScrollDragController#59958), ScrollDirection.reverse)
I/flutter (16530): ScrollPositionWithSingleContext#9a250(offset: 83.2, range: 0.0..1746.0, viewport: 444.0, ScrollableState, ClampingScrollPhysics -> RangeMaintainingScrollPhysics, DragScrollActivity#d503a(ScrollDragController#59958), ScrollDirection.reverse)

四 快速创建方式：build，custom，count，extent

4.1 GridView.build

构建必须属性

  • itemBuilder是构建子控件
  • itemCount指定数据个数

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
GridView.builder(
          itemCount: 10,
          controller:_gridViewController,
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3,crossAxisSpacing: 3, mainAxisSpacing: 3),
          itemBuilder: (context,index){
            return Container(
              alignment: Alignment.center,
              height: 80,
              color: Colors.primaries[index % Colors.primaries.length],
              child: Text("$index"),
            );
          },
        )

4.2 GridView.custom

构建必须属性

  • childrenDelegate：提供子组件构建的代理，有SliverChildBuilderDelegate和SliverChildListDelegate可用于快速构建

快速构建代码

SliverChildBuilderDelegate方式

1
2
3
4
5
6
7
8
9
10
11
12
GridView.custom(
          controller:_gridViewController,
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3,crossAxisSpacing: 3, mainAxisSpacing: 3),
          childrenDelegate: SliverChildBuilderDelegate((context,index){
            return Container(
              alignment: Alignment.center,
              height: 80,
              color: Colors.primaries[index % Colors.primaries.length],
              child: Text("$index"),
            );
          },childCount: 10) ,
        )

SliverChildListDelegate方式

1
2
3
4
5
6
7
8
9
10
11
GridView.custom(
          controller:_gridViewController,
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3,crossAxisSpacing: 3, mainAxisSpacing: 3),
          childrenDelegate: SliverChildListDelegate(List.generate(50, (position) {
            return Container(
              alignment: Alignment.center,
              height: 80,
              color: Colors.primaries[position % Colors.primaries.length],
              child: Text("$position"),
            );})),
        )

4.3 GridView.count

构建必须属性

crossAxisCount：交叉轴方向上个数

快速构建代码

1
2
3
4
5
6
7
8
9
10
11
GridView.count(
          controller:_gridViewController,
          crossAxisCount: 3,
          children:  List.generate(50, (position) {
          return Container(
            alignment: Alignment.center,
            height: 80,
            color: Colors.primaries[position % Colors.primaries.length],
            child: Text("$position"),
          );}),
        )

4.4 GridView.extent

构建必须属性

maxCrossAxisExtent：最大的横轴范围

构建代码

1
2
3
4
5
6
7
8
9
10
11
GridView.extent(
          controller:_gridViewController,
            maxCrossAxisExtent:100,
          children:  List.generate(50, (position) {
          return Container(
            alignment: Alignment.center,
            height: 80,
            color: Colors.primaries[position % Colors.primaries.length],
            child: Text("$position"),
          );}),
        )