# 一、GridView简介

GridView是一个可滚动的二维网格布局组件，用于展示多行多列的列表项。

# 二、GridView的创建方式

## 1. GridView.count - 固定列数


``` dart
import 'package:flutter/material.dart';

void main(List<String> args) {
  runApp(MainPage());
}

class MainPage extends StatefulWidget {
  MainPage({Key? key}) : super(key: key);

  @override
  _MainPageState createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  ScrollController _controller = ScrollController();
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("GridView"),
        ),
        body:GridView.count(        
          // scrollDirection: Axis.vertical,   // 滚动方向  垂直方向
          scrollDirection: Axis.horizontal,   // 滚动方向  水平方向
          padding: EdgeInsets.all(10),  // 内边距
          crossAxisCount: 5,  // 列数
          mainAxisSpacing: 10,  // 行间距
          crossAxisSpacing: 10,   // 列间距
          childAspectRatio: 1,  // 宽高比
          children: List.generate(100, (int index){
            return Container(
              color: Colors.red,
              child: Text("第${index+1}个",
                style: TextStyle(color: Colors.white,fontSize: 20),
              ),
            );
          }),
        )
      ),
    );
  }
}
```

## 2. GridView.extent - 最大宽度


```dart
import 'package:flutter/material.dart';

void main(List<String> args) {
  runApp(MainPage());
}

class MainPage extends StatefulWidget {
  MainPage({Key? key}) : super(key: key);

  @override
  _MainPageState createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  ScrollController _controller = ScrollController();
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("GridView"),
        ),
        body:GridView.extent(
          maxCrossAxisExtent: 100,  // 每个子项的最大宽度
          mainAxisSpacing: 20,  // 行间距
          crossAxisSpacing: 20,   // 列间距
          childAspectRatio: 1,  // 长宽比
          padding: EdgeInsets.all(10),  // 内边距
          children: List.generate(20, (int index){
            return Container(
              color: Colors.amber,
              child: Text("第${index+1}个",
                style: TextStyle(color: Colors.white,fontSize: 20),
              ),
            alignment: Alignment.center,
            );
          }),
        )
      ),
    );
  }
}
```

### 3. GridView.builder - 动态构建（性能最优）


```dart
import 'package:flutter/material.dart';

void main(List<String> args) {
  runApp(MainPage());
}

class MainPage extends StatefulWidget {
  MainPage({Key? key}) : super(key: key);

  @override
  _MainPageState createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  ScrollController _controller = ScrollController();
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("GridView"),
        ),
        body:GridView.builder(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 5,
            mainAxisSpacing: 10,
            crossAxisSpacing: 10,
            childAspectRatio: 1,
          ), 
          itemBuilder: (BuildContext content,int index){
            return Container(
              color: Colors.orange,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Icon(Icons.image,size: 30,),
                  Text("${index+1}",style: TextStyle(color:Colors.white,fontSize: 20),)
                ],
              ),
            );
          }
        )
      ),
    );
  }
}
```


# 三、核心属性详解

## 1. gridDelegate - 网格布局代理

### SliverGridDelegateWithFixedCrossAxisCount


```
SliverGridDelegateWithFixedCrossAxisCount(
  crossAxisCount: 3,        // 固定列数
  mainAxisSpacing: 10,      // 主轴间距（垂直间距）
  crossAxisSpacing: 10,     // 交叉轴间距（水平间距）
  childAspectRatio: 1.0,    // 子项宽高比（宽度/高度）
)
```

### SliverGridDelegateWithMaxCrossAxisExtent


```
SliverGridDelegateWithMaxCrossAxisExtent(
  maxCrossAxisExtent: 200,   // 子项最大宽度
  mainAxisSpacing: 10,    // 行间距
  crossAxisSpacing: 10,   // 列间距
  childAspectRatio: 1.0,  // 长宽比
)
```

## 2. **滚动相关属性**

```
GridView.builder(
  physics: BouncingScrollPhysics(),  // 滚动效果
  shrinkWrap: false,                  // 是否根据内容收缩
  reverse: false,                     // 是否反向滚动
  controller: ScrollController(),     // 滚动控制器
  primary: true,                      // 是否使用主滚动视图
  cacheExtent: 1000,                  // 缓存区域
  addAutomaticKeepAlives: true,       // 是否自动保持存活
  addRepaintBoundaries: true,         // 是否添加重绘边界
  addSemanticIndexes: true,           // 是否添加语义索引
  // ... 其他属性
)
```

# 四、实际应用示例

## 1. 图片网格展示


```
class ImageGrid extends StatelessWidget {
  final List<String> imageUrls;
  
  const ImageGrid({required this.imageUrls});
  
  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        mainAxisSpacing: 8,
        crossAxisSpacing: 8,
        childAspectRatio: 0.8,
      ),
      itemCount: imageUrls.length,
      itemBuilder: (context, index) {
        return ClipRRect(
          borderRadius: BorderRadius.circular(8),
          child: Image.network(
            imageUrls[index],
            fit: BoxFit.cover,
          ),
        );
      },
    );
  }
}
```

## 2. 卡片式网格


```
class CardGrid extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GridView.count(
      crossAxisCount: 2,
      mainAxisSpacing: 12,
      crossAxisSpacing: 12,
      padding: EdgeInsets.all(16),
      childAspectRatio: 0.7,
      children: List.generate(10, (index) {
        return Card(
          elevation: 4,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(12),
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Expanded(
                child: Container(
                  decoration: BoxDecoration(
                    color: Colors.grey[300],
                    borderRadius: BorderRadius.vertical(
                      top: Radius.circular(12),
                    ),
                  ),
                ),
              ),
              Padding(
                padding: EdgeInsets.all(8),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      'Title $index',
                      style: TextStyle(fontWeight: FontWeight.bold),
                    ),
                    SizedBox(height: 4),
                    Text(
                      'Description here',
                      style: TextStyle(fontSize: 12, color: Colors.grey),
                    ),
                  ],
                ),
              ),
            ],
          ),
        );
      }),
    );
  }
}
```

## 3. **瀑布流效果**

```
class WaterfallGrid extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
        maxCrossAxisExtent: 200,
        mainAxisSpacing: 10,
        crossAxisSpacing: 10,
        childAspectRatio: 0.8,
      ),
      itemCount: 20,
      itemBuilder: (context, index) {
        // 随机高度效果
        double height = 100 + (index % 5) * 30;
        return Container(
          height: height,
          decoration: BoxDecoration(
            color: Colors.primaries[index % Colors.primaries.length],
            borderRadius: BorderRadius.circular(8),
          ),
          child: Center(child: Text('Item $index')),
        );
      },
    );
  }
}
```

## 五、性能优化技巧

### 1. 使用builder模式


```
// ✅ 推荐：动态构建，只构建可见区域
GridView.builder(
  itemCount: largeList.length,
  itemBuilder: (context, index) => ItemWidget(item: largeList[index]),
)

// ❌ 不推荐：一次性构建所有子项
GridView.count(
  children: largeList.map((item) => ItemWidget(item: item)).toList(),
)
```

### 2. 设置合适的缓存区域


```
GridView.builder(
  cacheExtent: 500,  // 缓存区域大小，默认为视口大小
  // ...
)
```

### 3. 避免在build中创建对象



```dart
class OptimizedGridView extends StatelessWidget {
  // 提取delegate到外部避免重复创建
  final SliverGridDelegate _delegate = SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
    mainAxisSpacing: 10,
    crossAxisSpacing: 10,
  );
  
  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      gridDelegate: _delegate,
      itemBuilder: _itemBuilder,
      itemCount: 100,
    );
  }
  
  Widget _itemBuilder(BuildContext context, int index) {
    return Container(
      // 使用const减少重建
      color: Colors.blue,
      child: Text('Item $index'),
    );
  }
}
```

# 六、常见问题及解决方案

## 1. GridView嵌套滚动问题


```
// 解决嵌套滚动冲突
SingleChildScrollView(
  child: Column(
    children: [
      Text('Header'),
      Container(
        height: 300,
        child: GridView.builder(
          physics: NeverScrollableScrollPhysics(),  // 禁用内部滚动
          shrinkWrap: true,  // 包裹内容
          // ...
        ),
      ),
    ],
  ),
)
```

## 2. 动态改变列数


```
class ResponsiveGridView extends StatelessWidget {
  final int crossAxisCount;
  
  const ResponsiveGridView({required this.crossAxisCount});
  
  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: crossAxisCount,
        mainAxisSpacing: 8,
        crossAxisSpacing: 8,
      ),
      // ...
    );
  }
}

// 使用时
LayoutBuilder(
  builder: (context, constraints) {
    int columns = constraints.maxWidth > 600 ? 3 : 2;
    return ResponsiveGridView(crossAxisCount: columns);
  },
)
```

## 3. 空状态处理


```
class GridViewWithEmptyState extends StatelessWidget {
  final List<String> items;
  
  @override
  Widget build(BuildContext context) {
    if (items.isEmpty) {
      return Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(Icons.inbox, size: 64, color: Colors.grey),
            Text('No items found', style: TextStyle(fontSize: 16)),
          ],
        ),
      );
    }
    
    return GridView.builder(
      itemCount: items.length,
      // ...
    );
  }
}
```

# 七、总结

选择建议：

-   **GridView.count**：简单场景，固定列数
-   **GridView.extent**：响应式布局，自适应列宽
-   **GridView.builder**：大量数据，需要性能优化
-   **GridView.custom**：需要完全控制构建过程

注意事项：

-   大量数据时务必使用`builder`模式
-   注意处理空状态和加载状态
-   合理设置`childAspectRatio`保持布局美观
-   考虑不同屏幕尺寸的适配

Flutter那些事-GridView

关于flutter中GridView的相关语法及代码示例

编程语言

客户端

开发工具

Flutter GridView组件详解：掌握count/extent/builder三种创建方式，学习网格布局核心属性和性能优化技巧，实现图片展示、卡片布局和瀑布流效果，解决嵌套滚动和动态列数等常见问题。

代码解释

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

Flutter那些事-GridView-腾讯云开发者社区-腾讯云

Flutter那些事-GridView

Flutter那些事-GridView

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐