Flutter GridView

17 Mar 2025 | 5 分钟阅读

网格视图是一个图形控制元素，用于以表格形式显示项目。在本节中，我们将学习如何在 Flutter 应用程序中渲染网格视图中的项目。

GridView 是 Flutter 中的一个小部件，它以 2-D 数组（二维行和列）的形式显示项目。顾名思义，当我们想在网格中显示项目时，将使用它。我们可以通过点击从网格列表中选择所需的项目。此小部件可以包含文本、图像、图标等，以根据用户要求在网格布局中显示。它也被称为小部件的可滚动二维数组。由于它是可滚动的，因此我们只能指定它滚动的方向。

网格视图可以通过多种方式实现，如下所示

count()
builder()
custom()
extent()

让我们详细讨论以上所有内容。

GridView.count()

这是 Flutter 中最常用的网格布局，因为在这里我们已经知道网格的大小。它允许开发人员指定固定数量的行和列。GriedView.count() 包含以下属性

crossAxisCount: 它用于指定网格视图中的列数。

crossAxisSpacing: 它用于指定横轴上列出的每个子小部件之间的像素数。

mainAxisSpacing: 它用于指定主轴上列出的每个子小部件之间的像素数。

padding(EdgeInsetsGeometry): 它用于指定围绕整个小部件列表的空间。

scrollDirection: 它用于指定 GridView 上的项目滚动的方向。默认情况下，它在垂直方向滚动。

reverse: 如果为 true，它将沿主轴以相反的方向反转列表。

physics: 它用于确定用户在滚动时到达小部件的末尾或开始时列表的行为方式。

shrinkWrap: 如果为 false，则可滚动列表在滚动方向上占用更多空间进行滚动。这不好，因为它浪费内存并降低应用程序性能。因此，我们将使用 shrinkWrap 将我们的子小部件包装起来，将其设置为 true 以避免滚动时发生内存泄漏。

示例

让我们通过一个例子来理解它，看看如何在Flutter中创建 GridView 以创建网格列表。首先，在您使用的 IDE 中创建一个新项目。打开项目，导航到 lib 文件夹，然后将以下代码替换为 main.dart 文件。

import 'package:flutter/material.dart';

void main() {runApp(MyApp());}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(appBar: AppBar(
          title: Text("Flutter GridView Demo"),
        ),
            body: GridView.count(
                crossAxisCount: 3,
                crossAxisSpacing: 4.0,
                mainAxisSpacing: 8.0,
                children: List.generate(choices.length, (index) {
                  return Center(
                    child: SelectCard(choice: choices[index]),
                  );
                }
                )
            )
        )
    );
  }
}

class Choice {
  const Choice({this.title, this.icon});
  final String title;
  final IconData icon;
}

const List<Choice> choices = const <Choice>[
  const Choice(title: 'Home', icon: Icons.home),
  const Choice(title: 'Contact', icon: Icons.contacts),
  const Choice(title: 'Map', icon: Icons.map),
  const Choice(title: 'Phone', icon: Icons.phone),
  const Choice(title: 'Camera', icon: Icons.camera_alt),
  const Choice(title: 'Setting', icon: Icons.settings),
  const Choice(title: 'Album', icon: Icons.photo_album),
  const Choice(title: 'WiFi', icon: Icons.wifi),
];

class SelectCard extends StatelessWidget {
  const SelectCard({Key key, this.choice}) : super(key: key);
  final Choice choice;

  @override
  Widget build(BuildContext context) {
    final TextStyle textStyle = Theme.of(context).textTheme.display1;
    return Card(
        color: Colors.orange,
        child: Center(child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Expanded(child: Icon(choice.icon, size:50.0, color: textStyle.color)),
              Text(choice.title, style: textStyle),
            ]
        ),
        )
    );
  }
}

在上面的代码中，我们为想要在网格中显示的项目创建了一个类，然后添加一些数据。接下来，我们构建了将在 GridView 中显示的小部件。

输出

当我们在 Android Studio 中运行该应用程序时，我们可以在模拟器中看到以下屏幕。

GridView.builder()

当我们想要动态或按需显示数据时，使用此属性。换句话说，如果用户想要创建一个具有大量（无限）子项的网格，那么他们可以使用 GridView.builder() 构造函数以及 SliverGridDelegateWithFixedCrossAxisCount 或 SliverGridDelegateWithMaxCrossAxisExtent。

此小部件的常见属性是

itemCount: 它用于定义要显示的数据量。

gridDelegate: 它决定了网格或其分隔符。它的参数不能为空。

itemBuilder: 它用于创建将在网格视图上显示的项目。它仅在索引 >= zero && 索引 < itemCount 时调用。

示例

让我们通过一个例子来理解它。打开项目，导航到 lib 文件夹，然后将以下代码替换为 main.dart 文件。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

  List<String> images = [
    "https://images.tpointtech.com/tutorial/flutter/images/flutter-logo.png",
    "https://images.tpointtech.com/tutorial/flutter/images/flutter-logo.png",
    "https://images.tpointtech.com/tutorial/flutter/images/flutter-logo.png",
    "https://images.tpointtech.com/tutorial/flutter/images/flutter-logo.png"
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Flutter GridView Demo"),
          backgroundColor: Colors.red,
        ),
        body: Container(
            padding: EdgeInsets.all(12.0),
            child: GridView.builder(
              itemCount: images.length,
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 2,
                  crossAxisSpacing: 4.0,
                  mainAxisSpacing: 4.0
              ),
              itemBuilder: (BuildContext context, int index){
                return Image.network(images[index]);
              },
            )),
      ),
    );
  }
}

输出

当我们在 Android Studio 中运行该应用程序时，我们可以在模拟器中看到以下屏幕。

GridView.extent()

当我们想要创建具有自定义 extent 值的网格时，使用此属性。这意味着每个 tile 都有一个最大的横轴 extent。

示例

让我们通过一个例子来理解它。打开项目，导航到 lib 文件夹，然后将以下代码替换为 main.dart 文件。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyGridScreen(),
    );
  }
}

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

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

class _MyGridScreenState extends State<MyGridScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter GridView Demo"),
        backgroundColor: Colors.green,
      ),
      body: Center(
          child: GridView.extent(
            primary: false,
            padding: const EdgeInsets.all(16),
            crossAxisSpacing: 10,
            mainAxisSpacing: 10,
            maxCrossAxisExtent: 200.0,
            children: <Widget>[
              Container(
                padding: const EdgeInsets.all(8),
                child: const Text('First', style: TextStyle(fontSize: 20)),
                color: Colors.yellow,
              ),
              Container(
                padding: const EdgeInsets.all(8),
                child: const Text('Second', style: TextStyle(fontSize: 20)),
                color: Colors.blue,
              ),
              Container(
                padding: const EdgeInsets.all(8),
                child: const Text('Third', style: TextStyle(fontSize: 20)),
                color: Colors.blue,
              ),
              Container(
                padding: const EdgeInsets.all(8),
                child: const Text('Four', style: TextStyle(fontSize: 20)),
                color: Colors.yellow,
              ),
              Container(
                padding: const EdgeInsets.all(8),
                child: const Text('Fifth', style: TextStyle(fontSize: 20)),
                color: Colors.yellow,
              ),
              Container(
                padding: const EdgeInsets.all(8),
                child: const Text('Six', style: TextStyle(fontSize: 20)),
                color: Colors.blue,
              ),
            ],
          )),
    );
  }
}

输出

当我们在 Android Studio 中运行该应用程序时，我们可以在模拟器中看到以下屏幕。

下一主题Flutter Toast Notification

Flutter GridView

GridView.count()

示例

GridView.builder()

示例

GridView.extent()

示例

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Flutter 教程

Dart 编程

Flutter 基础

Flutter 小部件

Flutter 路由

高级概念

差异

面试题

Flutter GridView

GridView.count()

示例

GridView.builder()

示例

GridView.extent()

示例

相关帖子

Flutter 进度条

Flutter 文本

Flutter 表格

Flutter 按钮

Flutter 抽屉

Flutter 表单

Flutter 复选框

Flutter 卡片

Flutter 主题

Flutter 动画

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器