Flutter控件——常用控件：GridView

Posted 2022-12-12 wzj_what_why_how

GridView 网格列表组件

scroll_view.dart

class GridView extends BoxScrollView 
    GridView(
        Key? key,
        Axis scrollDirection = Axis.vertical,
        bool reverse = false,// 决定滚动方向是否与阅读方向一致，true 表示不一样，显示时是列表直接滚动到最底下，最后一个 item 显示第一个数据
        ScrollController? controller, //  主要作用是控制滚动位置和监听滚动事件

        // primary: 当内容不足以滚动时，是否支持滚动；对于ios系统还有一个效果：当用户点击状态栏时是否滑动到顶部。这个挺重要的，
        //尤其是使用列表构建页面时配合下拉刷新，要是数据量小于屏幕高度的话，这个就管用了。此时系统会自动给 listview 设置
        //一个默认的滚动控制器  PrimaryScrollController，好处是父组件可以控制子树中可滚动组件的滚动行为
        bool? primary,

        ScrollPhysics? physics,
        bool shrinkWrap = false, //  是否根据子组件的总长度来设置 ListView 的长度，默认值为 false，所以能滚动。滚动组件相互嵌套时，shrinkWrap 属性要设置 true 才行，和 NeverScrollableScrollPhysics 配合就能解决滚动冲突
        EdgeInsetsGeometry? padding, //内边距
        required this.gridDelegate,  //重点介绍
        bool addAutomaticKeepAlives = true,
        bool addRepaintBoundaries = true,
        bool addSemanticIndexes = true,
        double? cacheExtent,
        List<Widget> children = const <Widget>[], //子View
        int? semanticChildCount,
        DragStartBehavior dragStartBehavior = DragStartBehavior.start,
        Clip clipBehavior = Clip.hardEdge,
        ScrollViewKeyboardDismissBehavior keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual,
        String? restorationId,
      )

一共有5个构造函数：

- GridView，
- GridView.builder，
- GridView.count，
- GridView.extent
- GridView.custom

gridDelegate： SliverGridDelegate（抽象类） 参数

是GridView组件如何控制排列子元素的一个委托。

• 两个实现类：
  • SliverGridDelegateWithFixedCrossAxisCount：用于固定列数的场景；
  • SliverGridDelegateWithMaxCrossAxisExtent：用于子元素有最大宽度限制的场景。

SliverGridDelegateWithFixedCrossAxisCount

每一行的列数是固定的。

SliverGridDelegateWithFixedCrossAxisCount(
  @required this.crossAxisCount,//列数，即一行有几个子元素；
  this.mainAxisSpacing = 0.0, //主轴方向上的空隙间距；
  this.crossAxisSpacing = 0.0,//次轴方向上的空隙间距；
  this.childAspectRatio = 1.0,//子元素的宽高比例。
)

如果你的子元素宽高比例不为1，那么你一定要设置childAspectRatio属性。