Flutter 中的网格视图 GridView 类型_gridview.builder

Flutter 提供了广泛的小部件来创建不同类型的 UI。今天我们将看到如何构建一个GridView.gridview flutter 为我们提供了一个 widget 调用GridView，用于创建可滚动的 widget 网格。

Flutter 中的 GridView 类型

Flutter 根据网格项的布局方式提供了三种类型的 GridView：

• GridView.count：这种类型的 GridView 创建一个可滚动的网格，每行或每列的项目数是固定的。您可以指定横轴项目的数量（垂直滚动的行中的项目或水平滚动的列中的项目）并自定义它们的纵横比。
• GridView.builder：这种类型的 GridView 可以有效地创建一个包含大量项目的可滚动网格。它使用构建器函数在用户滚动时按需创建和填充网格项，这使其适合显示大量数据。
• GridView.extent：这种类型的 GridView 创建一个可滚动的网格，其中的项目在主轴上具有固定范围（宽度或高度）。您可以指定项目的范围并自定义它们的纵横比。

GridView 基础知识

该GridView小部件将小部件列表作为其子项并将它们显示在网格中。该GridView小部件有几个属性可用于自定义网格的外观和行为。其中一些属性是：

• scrollDirection- 该属性用于设置滚动的方向。它可以设置Axis.vertical为垂直网格和Axis.horizontal水平网格。
• gridDelegate- 该属性用于设置网格的布局。它以一个-SliverGridDelegate对象作为它的值。该SliverGridDelegate对象指定网格中的列数和行数、网格单元格的大小以及单元格之间的间距。
• children- 此属性用于设置将在网格中显示的小部件列表。
  在 Flutter 应用中实现 GridView

在 Flutter 中，我们有 4 种实现方式，GridView分别是, ，我们将看到如何使用其中的每一种来构建网格中的项目
GridView.count
GridView.builder
GridView.custom
GrdiView.extent

网格视图计数：

使用.count 我们可以创建一个可滚动的二维小部件数组，在横轴上具有固定数量的图块。即，我们需要立即生成小部件列表。下面是使用构造函数生成网格的代码.count。

.count如果我们要在网格上显示的项目数量有限或较少，则可以使用生成网格的构造函数，强烈建议使用.builder构造函数为大量项目构建网格

crossAxisCount定义我们希望在网格中拥有的列数。

GridView.count(
  crossAxisCount: 2,
  children: List.generate(10, (index) {
    return Container(
      color: Colors.blue,
      margin: const EdgeInsets.all(10),
      child: Center(
        child: Text(
          'Item $index',
          style: const TextStyle(
            color: Colors.white,
            fontSize: 20,
          ),
        ),
      ),
    );
  },
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

网格视图构建器：

此构造函数适用于具有大量（或无限）子项的网格视图，因为只为那些实际可见的子项调用构建器。

提供非空值itemCount可以提高 GridView 估计最大滚动范围的能力。即，从 Internet 构建列表让我们假设我们有 20 个项目并且我们没有提供然后itemCount当我们向下滚动时.builder也会尝试构建第 21 个项目，这将导致错误。所以建议提供itemCount

itemBuilder是构造函数的必需参数，.builder仅在索引大于或等于零且小于itemCount

gridDelegate属性来有效地配置网格布局。根据您的要求选择合适的gridDelegate，例如SliverGridDelegateWithFixedCrossAxisCount或SliverGridDelegateWithMaxCrossAxisExtent，并自定义其属性以实现所需的网格配置。

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 3, // number of items in each row
    mainAxisSpacing: 8.0, // spacing between rows
    crossAxisSpacing: 8.0, // spacing between columns
  ),
  padding: EdgeInsets.all(8.0), // padding around the grid
  itemCount: items.length, // total number of items
  itemBuilder: (context, index) {
    return Container(
      color: Colors.blue, // color of grid items
      child: Center(
        child: Text(
          items[index],
          style: TextStyle(fontSize: 18.0, color: Colors.white),
        ),
      ),
    );
  },
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

网格视图范围：

GridView.extent 是 Flutter 中的一种 GridView，它创建一个具有灵活项目大小的可滚动网格。它使用可用空间来确定项目的大小，允许您创建网格，其中项目可以根据其内容或纵横比具有不同的大小。当您想要创建适应不同屏幕尺寸或显示不同尺寸项目的响应式网格时，GridView.extent 特别有用。

GridView.extent(
  maxCrossAxisExtent: 200.0, // maximum item width
  mainAxisSpacing: 8.0, // spacing between rows
  crossAxisSpacing: 8.0, // spacing between columns
  padding: EdgeInsets.all(8.0), // padding around the grid
  children: items.map((item) {
    return Container(
      color: Colors.blue, // color of grid items
      child: Center(
        child: Text(
          item,
          style: TextStyle(fontSize: 18.0, color: Colors.white),
        ),
      ),
    );
  }).toList(),
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

GridView.extent能够创建具有灵活项目大小的响应式网格。通过指定该maxCrossAxisExtent属性，您可以控制网格中项目的最大宽度，项目将根据可用空间调整其大小。这允许您创建适应不同屏幕尺寸的网格或显示具有不同尺寸的项目，例如具有不同宽高比的图像或具有不同内容长度的文本。

结论：

Gridview是一个适应性强的小部件，它提供不同的类型，例如GridView.builder和GridView.extent，以在您的应用程序中创建网格布局。每个都有其特定的用例。GridView.builder 适用于您可以按需构建项目的大型数据集或动态内容，同时GridView.extent对于创建具有适应不同屏幕尺寸的灵活项目大小的网格或显示具有不同内容大小或纵横比的项目很有用。

使用GridView.builder，您可以高效地构建包含大量项目的网格，因为它仅创建和呈现当前在屏幕上可见的项目，从而提高性能并减少内存使用。它还允许您自定义网格布局和项目创建过程，让您完全控制网格的外观和功能。

另一方面，GridView.extent它非常适合创建具有可根据可用空间进行调整的灵活项目大小的响应式网格。通过指定该maxCrossAxisExtent属性，您可以控制项目的最大宽度，项目将相应地调整其大小。这使得它GridView.extent适合显示具有不同宽高比或内容大小的项目，使其在视觉上具有吸引力并响应不同的屏幕大小或内容长度。