Flutter GridView

GridView是Flutter中常用的一种布局方式，它可以轻松地将数据列表展示在屏幕上，并提供了许多自定义的选项。

基本用法

GridView最基本的用法就是直接指定数据源数组，如下所示：

GridView.count(
  crossAxisCount: 3,
  children: List.generate(100, (index) {
    return Center(
      child: Text(
        '$index',
        style: TextStyle(fontSize: 32),
      ),
    );
  }),
);

上面的代码将会创建一个3列的网格视图，并填充100个文本控件到网格视图中。

自定义样式

我们可以使用GridView.builder来自定义子项的样式，如下所示：

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
    mainAxisSpacing: 10,
    crossAxisSpacing: 10,
    childAspectRatio: 1,
  ),
  itemBuilder: (BuildContext context, int index) {
    return Container(
      color: Colors.blue,
      child: Center(
        child: Text(
          '$index',
          style: TextStyle(fontSize: 32, color: Colors.white),
        ),
      ),
    );
  },
);

上面的代码将会创建一个带有蓝色背景和白色文本的2列网格视图，并在每个单元格中显示其索引。

gridDelegate属性允许我们定制网格视图的布局，包括每行或每列中的子项数量、子项之间的间距和子项的宽高比例等。

滚动和交互

如果您的网格视图太大，不适合全部展示在屏幕上，您可以将它嵌套在一个SingleChildScrollView或ListView控件中，以实现滚动功能。

如果您需要为网格视图中的子项提供交互能力，您可以使用GestureDetector或InkWell等控件来为每个子项添加点击事件等。

总结

GridView是Flutter中常用的一种布局方式，它可以轻松地将数据列表展示在屏幕上，并提供了丰富的自定义选项。在使用过程中，您可以根据实际需要，灵活地定制网格的布局、样式和交互等特性，以实现各种不同场景下的页面展示。