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

最新推荐文章于 2024-04-16 10:08:45 发布

2401_84121798

最新推荐文章于 2024-04-16 10:08:45 发布

阅读量905

点赞数 19

分类专栏：程序员文章标签： flutter

本文链接：https://blog.csdn.net/2401_84121798/article/details/137390317

版权

程序员专栏收录该内容

197 篇文章 1 订阅

订阅专栏

2.1 构造函数

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 children = const [],

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 代码

//State

ScrollController _gridViewController;

//State

@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 效果图

[外链图片转存中…(img-zC5I9hs0-1712270296728)]

3.3 ScrollController打印结果

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