Flutter如何实现网格布局

在Flutter中如何实现网格布局？我尝试用GridView但发现无法灵活控制列数和间距，希望了解如何自定义网格的行列数、间距以及子项尺寸。另外，当网格内容动态变化时，怎样实现高效的性能优化？

2 回复

Flutter中实现网格布局使用GridView组件。
常用方式：

  1. GridView.count：指定列数。
  2. GridView.builder：动态生成，性能更优。
    示例代码：
GridView.count(  
  crossAxisCount: 2,  
  children: List.generate(10, (index) => Card(child: Text('Item $index'))),  
)

可调整间距、滚动方向等属性。

更多关于Flutter如何实现网格布局的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，网格布局可以通过GridView组件实现。以下是几种常用的实现方式：

1. GridView.count（固定列数）

GridView.count(
  crossAxisCount: 3, // 每行3列
  crossAxisSpacing: 10, // 水平间距
  mainAxisSpacing: 10, // 垂直间距
  padding: EdgeInsets.all(10), // 内边距
  children: List.generate(20, (index) {
    return Container(
      color: Colors.blue[100],
      child: Center(child: Text('Item $index')),
    );
  }),
)

2. GridView.builder（动态生成，性能优化）

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2, // 每行2列
    crossAxisSpacing: 10,
    mainAxisSpacing: 10,
    childAspectRatio: 1.0, // 宽高比
  ),
  itemCount: 50, // 总项目数
  itemBuilder: (context, index) {
    return Container(
      color: Colors.green[100],
      child: Center(child: Text('Item $index')),
    );
  },
)

3. GridView.extent（基于最大宽度）

GridView.extent(
  maxCrossAxisExtent: 150, // 每个项目的最大宽度
  crossAxisSpacing: 10,
  mainAxisSpacing: 10,
  children: List.generate(20, (index) {
    return Container(
      color: Colors.red[100],
      child: Center(child: Text('Item $index')),
    );
  }),
)

4. 自定义网格布局

GridView.custom(
  gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
    maxCrossAxisExtent: 120,
    mainAxisSpacing: 10,
    crossAxisSpacing: 10,
  ),
  childrenDelegate: SliverChildListDelegate(
    List.generate(20, (index) => Container(
      color: Colors.amber[100],
      child: Center(child: Text('Item $index')),
    )),
  ),
)

主要参数说明：

  • crossAxisCount：每行的列数
  • crossAxisSpacing：水平间距
  • mainAxisSpacing：垂直间距
  • childAspectRatio：子项宽高比
  • maxCrossAxisExtent：子项最大宽度

选择哪种方式取决于具体需求：固定列数用count，大量数据用builder，响应式布局用extent。

回到顶部