Flutter 列表

列表是每个 Web 或移动应用程序中最流行的元素。它们由多行项目组成，包括文本、按钮、切换、图标、缩略图等等。我们可以使用它来显示各种信息，例如菜单、选项卡，或者打破纯文本文件的单调性。

在本节中，我们将学习如何在 Flutter 中使用列表。 Flutter 允许您以不同的方式使用列表，如下所示

• 基本列表
• 长列表
• 网格列表
• 水平列表

让我们逐一查看上述所有列表。

基本列表

Flutter 包含一个 ListView 组件用于处理列表，这是在移动应用程序中显示数据的基本概念。 ListView 是显示仅包含几个项目的列表的完美标准。 ListView 还包括 ListTitle 组件，它为数据列表提供了更多视觉结构属性。

以下示例显示了 Flutter 应用程序中的一个基本列表。

输出

现在，在 Android Studio 中运行该应用程序。 您可以在模拟器或连接的设备中看到以下屏幕。

使用长列表

有时您想在应用程序的单个屏幕中显示一个非常长的列表，在这种情况下，上述显示列表的方法并不完美。 要使用包含大量项目的列表，我们需要使用 ListView.builder() 构造函数。 ListView 和 ListView.builder 之间的主要区别在于，ListView 一次创建所有项目，而 ListView.builder() 构造函数在项目滚动到屏幕上时创建它们。

让我们看下面的例子。 打开 main.dart 文件并替换以下代码。

在上面的代码中，itemCount 给出您想在列表中显示的项目的数量。 itemBuilder 告诉您要在哪里返回您想要显示的项目。

输出

现在，在 Android Studio 中运行该应用程序。 您将获得以下屏幕，您可以在其中通过滚动到屏幕上看到所有产品列表。

创建网格列表

有时我们想以网格布局显示项目，而不是正常的列表，一个接一个地出现。 GridView 组件允许您在 Flutter 中创建网格列表。 创建网格的最简单方法是使用 GridView.count() 构造函数，它指定网格中的行数和列数。

让我们看看以下 GridView 在 Flutter 中如何创建网格列表的示例。 打开 main.dart 文件并插入以下代码。

输出

现在，在 Android Studio 中运行该应用程序。 您可以在 Android 模拟器中看到以下屏幕。

创建水平列表

ListView 组件也支持水平列表。 有时我们想创建一个可以水平滚动而不是垂直滚动的列表。 在这种情况下，ListView 提供了覆盖垂直方向的水平 scrollDirection。 以下示例更清楚地解释了这一点。 打开 main.dart 文件并替换以下代码。

输出

现在，在 Android Studio 中运行该应用程序。 它将给出以下屏幕，您可以在其中水平滚动以查看所有列表。