Flutter（79）：Scroll组件之GridView

Flutter教学目录持续更新中

Github源代码持续更新中

1.GridView介绍

一个可滚动的二维空间数组

2.GridView属性

• scrollDirection = Axis.vertical：滑动方向
• reverse = false：是否反响
• controller：ScrollController 滑动控制器
• primary：当内容不足以滚动时，是否支持滚动
• physics：控制用户滚动视图的交互
• shrinkWrap = false：滑动方向上是否允许最大允许高度
• padding：内边距
• gridDelegate：SliverGridDelegate
• cacheExtent：缓存
• children = const []：
• dragStartBehavior = DragStartBehavior.start：响应拖动的时机
• clipBehavior = Clip.hardEdge：超出内容的裁剪方式
• keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual：滑动组件键盘隐藏模式
• restorationId：滑动位置记忆标志

GridView的各项属性跟ListView几乎一样，这里就不再赘述，不了解的可以看一下：Flutter（33）：Material组件之ListTile、RefreshIndicator、ListView、Divider
关于SliverGridDelegate，SliverChildDelegate在之前Flutter（73）：Sliver组件之SliverGrid中也讲解过了，也不再赘述了。

  _mySliverGridDelegateWithFixedCrossAxisCount() {
    return SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: 2,
      mainAxisSpacing: 10,
      crossAxisSpacing: 5,
      childAspectRatio: 1.5,
    );
  }

  _myGridView() {
    return GridView(
      gridDelegate: _mySliverGridDelegateWithFixedCrossAxisCount(),
      children: [
        Container(
          height: 80,
          color: Colors.blue,
        ),
        Container(
          height: 80,
          color: Colors.yellow,
        ),
        Container(
          height: 80,
          color: Colors.red,
        ),
        Container(
          height: 80,
          color: Colors.green,
        ),
      ],
    );
  }

image.png

3.GridView.builder属性

• gridDelegate：SliverGridDelegate：SliverGridDelegateWithFixedCrossAxisCount/SliverGridDelegateWithMaxCrossAxisExtent
• itemBuilder：IndexedWidgetBuilder
• itemCount：item个数

  _myGridViewBuilder() {
    return GridView.builder(
      gridDelegate: _mySliverGridDelegateWithFixedCrossAxisCount(),
      itemBuilder: (BuildContext context, int index) {
        return Container(
          height: 80,
          color: Colors.primaries[index % 11],
        );
      },
      itemCount: 5,
    );
  }

image.png

4.GridView.count属性

• crossAxisCount：次轴方向item数
• children = const []：

  _myGridViewCount() {
    return GridView.count(
      crossAxisCount: 3,
      children: [
        Container(
          height: 80,
          color: Colors.blue,
        ),
        Container(
          height: 80,
          color: Colors.yellow,
        ),
        Container(
          height: 80,
          color: Colors.red,
        ),
        Container(
          height: 80,
          color: Colors.green,
        ),
      ],
    );
  }

image.png

5.GridView.extent属性

• maxCrossAxisExtent: 次轴方向上item最大长度
• children:

  _myGridViewExtent() {
    return GridView.extent(
      maxCrossAxisExtent: 300,
      children: [
        Container(
          height: 80,
          color: Colors.blue,
        ),
        Container(
          height: 80,
          color: Colors.yellow,
        ),
        Container(
          height: 80,
          color: Colors.red,
        ),
        Container(
          height: 80,
          color: Colors.green,
        ),
      ],
    );
  }

image.png

6.GridView.custom属性

• gridDelegate：SliverGridDelegate：SliverGridDelegateWithFixedCrossAxisCount/SliverGridDelegateWithMaxCrossAxisExtent
• childrenDelegate：SliverChildDelegate：SliverChildListDelegate/SliverChildBuilderDelegate

  _myGridViewCustom() {
    return GridView.custom(
      gridDelegate: _mySliverGridDelegateWithFixedCrossAxisCount(),
      childrenDelegate:
          SliverChildBuilderDelegate((BuildContext context, int index) {
        return Container(
          height: 80,
          color: Colors.primaries[index % 11],
        );
      }, childCount: 5),
    );
  }

image.png

下一节：Scroll组件之SingleChildScrollView

Flutter（80）：Scroll组件之SingleChildScrollView

Flutter教学目录持续更新中

Github源代码持续更新中