Flutter速来系列23-1、ListView和GridView,躲不掉避不开的列表

J船长
1,494 阅读11分钟

一、引言

在Flutter中，ListView和GridView是常用的用于展示列表和网格布局的组件。本文将介绍ListView和GridView的概述和应用场景，以及它们的基本用法。

二、ListView和GridView的基本用法

1. ListView和GridView的定义

ListView是一个滚动列表组件，可以在垂直方向上展示一系列的子组件。GridView则是一个可滚动的网格布局组件，可以在二维空间中展示子组件。

2. 在Flutter中创建和使用ListView

在Flutter中，创建ListView非常简单。以下是一个示例代码：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ListView和GridView示例',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ListView和GridView示例'),
      ),
      body: ListView( // 创建一个ListView
        children: <Widget>[
          ListTile(
            title: Text('列表项1'), // 列表项1
          ),
          ListTile(
            title: Text('列表项2'), // 列表项2
          ),
          ListTile(
            title: Text('列表项3'), // 列表项3
          ),
        ],
      ),
    );
  }
}

image.png

以上代码创建了一个包含三个列表项的ListView。每个列表项由一个ListTile组成，其中的title属性定义了列表项的文本内容。

3. 在Flutter中创建和使用GridView

创建GridView同样很简单。以下是一个示例代码：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ListView和GridView示例',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ListView和GridView示例'),
      ),
      body: GridView.count( // 创建一个GridView
        crossAxisCount: 2, // 每行显示的列数
        children: <Widget>[
          Container(
            color: Colors.red,
          ),
          Container(
            color: Colors.blue,
          ),
          Container(
            color: Colors.green,
          ),
          Container(
            color: Colors.yellow,
          ),
        ],
      ),
    );
  }
}

image.png

以上代码创建了一个包含四个网格项的GridView。通过设置crossAxisCount属性，可以指定每行显示的列数。在这个示例中，每行显示两列。

三、ListView详解

1. 如何创建ListView并加载数据

ListView是一个常用的用于显示列表数据的Flutter组件。下面是一个简单的例子，展示如何创建一个ListView并加载数据：

import 'package:flutter/material.dart';

class MyListView extends StatelessWidget {
  final List<String> items = [
    'Item 1',
    'Item 2',
    'Item 3',
    'Item 4',
    'Item 5',
  ];

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: items.length,
      itemBuilder: (context, index) {
        return ListTile(
          title: Text(items[index]),
        );
      },
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('ListView Example'),
      ),
      body: MyListView(),
    ),
  ));
}

在这个例子中，我们创建了一个名为MyListView的无状态（stateless）小部件。items是一个包含要显示的数据的字符串列表。在build方法中，我们使用ListView.builder构建了一个ListView。itemCount属性指定了要显示的项的数量，itemBuilder属性定义了每个项的构建方法。在这个例子中，我们使用ListTile来显示每个项的标题。

2. ListView的滚动方向和控制

ListView有两种滚动方向可供选择：垂直（默认）和水平。你可以使用scrollDirection属性来控制滚动方向。下面是一个例子：

ListView.builder(
  scrollDirection: Axis.horizontal,
  // ...
)

在这个例子中，我们将scrollDirection属性设置为Axis.horizontal，以创建一个水平滚动的ListView。

如果你想控制ListView的滚动行为，你可以使用controller属性并配合ScrollController来实现。下面是一个示例：

dartCopy code
ScrollController _scrollController = ScrollController();

ListView.builder(
  controller: _scrollController,
  // ...
)

你可以在ScrollController上调用不同的方法来控制滚动，比如jumpTo、animateTo等。

3. ListView.builder和ListView.separated的用法

ListView.builder是一种按需构建的ListView，它只会构建当前可见区域的项，并且会在滚动过程中重复使用已构建的项。这种方式适用于大型列表，因为它可以显著提高性能。

ListView.separated是ListView.builder的一个变种，它在每个项之间插入了一个分隔符。你可以使用separatorBuilder属性来定义分隔符的样式和构建方法。下面是一个例子：

ListView.separated(
  itemCount: items.length,
  separatorBuilder: (context, index) => Divider(),
  itemBuilder: (context, index) {
    return ListTile(
      title: Text(items[index]),
    );
  },
)

在这个例子中，我们使用Divider作为分隔符，它会在每个项之间插入一条水平分割线。

4. ListView的性能优化

当使用ListView显示大量数据时，为了提高性能，你可以考虑以下几种优化方式：

  • 使用ListView.builder或ListView.separated来按需构建列表项，避免一次性构建所有的项。
  • 使用ListView.separated并提供合适的分隔符构建方法，避免不必要的分隔符构建。
  • 如果列表项有固定高度，请使用itemExtent属性来指定项的高度，以避免动态计算高度带来的性能开销。
  • 如果列表项是不可滚动的，可以将physics属性设置为NeverScrollableScrollPhysics来禁用滚动。
  • 使用ScrollController来控制滚动，并使用addPostFrameCallback在构建完成后延迟加载数据。

5. 自定义ListView的样式和布局

你可以使用ListView.builder的itemBuilder属性来自定义列表项的样式和布局。下面是一个例子，展示如何自定义列表项：

ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    return Container(
      color: index % 2 == 0 ? Colors.grey[200] : Colors.white,
      padding: EdgeInsets.all(16),
      child: Text(items[index]),
    );
  },
)

在这个例子中，我们将列表项包装在一个带有背景颜色和内边距的容器中。

6. ListView的常见问题和解决方法

在使用ListView时，你可能会遇到一些常见的问题。以下是其中一些问题和相应的解决方法：

  • ListView无法滚动：确保包含ListView的容器（如Scaffold）具有足够的空间来进行滚动，或者尝试将ListView的父级包装在一个可滚动的容器（如SingleChildScrollView）中。
  • ListView不显示或空白：检查是否正确设置了itemCount属性，并且itemBuilder方法返回了有效的项。
  • ListView滚动不流畅：可能是由于列表项过多或构建过程中的性能问题导致的。尝试使用按需构建的ListView.builder或ListView.separated，并使用性能优化技术来提高滚动性能。

四、GridView详解

1. 如何创建GridView并加载数据

GridView是一个用于显示网格布局的Flutter组件。下面是一个简单的例子，展示如何创建一个GridView并加载数据：

import 'package:flutter/material.dart';

class MyGridView extends StatelessWidget {
  final List<String> items = [
    'Item 1',
    'Item 2',
    'Item 3',
    'Item 4',
    'Item 5',
  ];

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
      ),
      itemCount: items.length,
      itemBuilder: (context, index) {
        return Card(
          child: Center(
            child: Text(items[index]),
          ),
        );
      },
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('GridView Example'),
      ),
      body: MyGridView(),
    ),
  ));
}

在这个例子中，我们创建了一个名为MyGridView的无状态（stateless）小部件。items是一个包含要显示的数据的字符串列表。在build方法中，我们使用GridView.builder构建了一个GridView。gridDelegate属性定义了网格布局的方式，itemCount属性指定了要显示的项的数量，itemBuilder属性定义了每个项的构建方法。在这个例子中，我们使用Card来显示每个项的内容。

2. GridView的滚动方向和控制

GridView默认是垂直滚动的，但你也可以通过设置scrollDirection属性为Axis.horizontal来创建水平滚动的GridView。下面是一个例子：

GridView.builder(
  scrollDirection: Axis.horizontal,
  // ...
)

你可以使用controller属性和ScrollController来控制GridView的滚动，方法与ListView相似。

3. GridView.builder和GridView.count的用法

GridView提供了两种构建方式：GridView.builder和GridView.count。

GridView.builder是一种按需构建的GridView，它只会构建当前可见区域的项，并且会在滚动过程中重复使用已构建的项，这种方式适用于大型网格布局。

GridView.count则是一种固定数量的构建方式，你可以指定每行（列）显示的项的数量，然后GridView会根据这个数量自动调整布局。

下面是一个使用GridView.count的例子：

GridView.count(
  crossAxisCount: 2,
  children: List.generate(items.length, (index) {
    return Card(
      child: Center(
        child: Text(items[index]),
      ),
    );
  }),
)

在这个例子中，我们通过设置crossAxisCount属性为2，来指定每行显示2个项。children属性包含了GridView的子项列表，我们使用List.generate生成了包含正确数量的项。

4. GridView的性能优化

当使用GridView显示大量数据时，你可以考虑以下性能优化方式：

  • 使用GridView.builder或GridView.count来按需构建网格项，避免一次性构建所有的项。
  • 如果网格项有固定尺寸，请使用childAspectRatio属性来指定网格项的宽高比例，以避免动态计算尺寸带来的性能开销。
  • 使用ScrollController来控制滚动，并使用addPostFrameCallback在构建完成后延迟加载数据。

5. 自定义GridView的样式和布局

你可以使用GridView.builder或GridView.count的itemBuilder属性来自定义网格项的样式和布局。下面是一个例子，展示如何自定义网格项：

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
  ),
  itemCount: items.length,
  itemBuilder: (context, index) {
    return Container(
      color: index % 2 == 0 ? Colors.grey[200] : Colors.white,
      padding: EdgeInsets.all(16),
      child: Text(items[index]),
    );
  },
)

在这个例子中，我们将网格项包装在一个带有背景颜色和内边距的容器中。

6. GridView的常见问题和解决方法

在使用GridView时，你可能会遇到一些常见的问题。以下是其中一些问题和相应的解决方法：

  • GridView无法滚动：与ListView类似，确保包含GridView的容器具有足够的空间来进行滚动，或者尝试将GridView的父级包装在一个可滚动的容器中。
  • GridView不显示或空白：检查是否正确设置了itemCount属性，并且itemBuilder方法返回了有效的项。
  • GridView滚动不流畅：可能是由于网格项过多或构建过程中的性能问题导致的。尝试使用按需构建的GridView.builder或GridView.count，并使用性能优化技术来提高滚动性能。

7、SliverGrid 和 GridView 使用场景的区别。

主要看他们在外层，是否为滚动布局。

最重要的区别是外层布局是否支持滚动。

如果需要一个滚动的网格布局，应该使用 SliverGrid。

如果只需要一个静态的网格布局，可以使用 GridView。

SliverGrid

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: CustomScrollView(
          slivers: <Widget>[
            SliverAppBar(
              title: Text('使用 SliverGrid 示例'),
              floating: false, // 是否随滚动悬浮
              pinned: true,   // 是否固定在顶部
            ),
            SliverGrid(
              delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
                  return Container(
                    color: Colors.blue,
                    height: 100,
                    width: 100,
                    child: Center(
                      child: Text('$index'),
                    ),
                  );
                },
                childCount: 20,
              ),
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

GridView

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('使用 GridView 示例'),
        ),
        body: GridView.builder(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
          ),
          itemBuilder: (BuildContext context, int index) {
            return Container(
              color: Colors.green,
              height: 100,
              width: 100,
              child: Center(
                child: Text('$index'),
              ),
            );
          },
          itemCount: 20,
        ),
      ),
    );
  }
}

明白核心的之后，也可以详细述说。

使用 SliverGrid 的场景：

  1. 复杂的布局需求：如果你需要在一个页面上有多个滚动区域，并且这些区域可能包含不同类型的内容（例如，一个滚动的列表和一个滚动的网格），那么使用 SliverGrid 是有意义的，因为它可以与 CustomScrollView 一起使用，帮助你构建复杂的滚动视图。
  2. 多个 Sliver 组合：SliverGrid 可以与其他 Sliver 组合使用，例如 SliverAppBar，以创建自定义的滚动效果，例如带有可固定的标题栏的页面。
  3. 动态网格布局：如果你需要动态控制网格布局的行数、列数或子项的大小，SliverGrid 允许你在运行时更改这些参数，使其非常灵活。

使用 GridView 的场景：

  1. 静态布局需求：如果你只需要一个简单的静态网格布局，并且不需要滚动功能，那么 GridView 是更简单的选择。
  2. 单一类型内容：当页面只包含一个类型的内容，且不需要与其他滚动区域交互时，使用 GridView 更直接，更容易理解和实现。
  3. 固定大小容器：如果你希望网格布局在屏幕上占据固定的空间，而不需要滚动，GridView 更适合这种情况。

五、懒加载

在 Flutter 中，ListView 和 GridView 都可以实现懒加载。懒加载是一种常见的优化技术，它的基本思想是在数据需要时再加载它，而不是一开始就加载所有的数据。这种技术在处理大量数据时特别有用，比如加载网络上的图片或者处理大量的数据集。

在 ListView 和 GridView 中，你可以使用 ListView.builder 或 GridView.builder 来实现懒加载。

以下是在 ListView 中实现懒加载的简单例子：

ListView.builder(
    itemCount: items.length,
    itemBuilder: (context, index) {
        if (index >= items.length) {
            // 如果你试图加载的项超过了你现有的 items 列表长度，
            // 你可以从你的服务端加载更多数据。
            loadMoreItems();
        }

        return ListTile(
            title: Text('Item ${items[index]}'),
        );
    },
);

在 GridView 中实现懒加载的简单例子：

GridView.builder(
    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2, // 设置每行显示2个网格
    ),
    itemCount: items.length,
    itemBuilder: (context, index) {
        if (index >= items.length) {
            // 如果你试图加载的项超过了你现有的 items 列表长度，
            // 你可以从你的服务端加载更多数据。
            loadMoreItems();
        }

        return GridTile(
            child: Image.network('Item ${items[index]}'),
        );
    },
);

在上面的两个例子中，我们检查当前的 index 是否超过了我们现有的 items 列表长度，如果超过了，我们就调用 loadMoreItems() 函数从服务端加载更多的数据。这就是懒加载的基本思想。

需要注意的是，这里的 loadMoreItems() 函数需要你自己实现，通常这会涉及到网络请求，加载数据等操作。

另外，你还需要处理好数据加载的状态，例如加载中，加载失败，加载完成等状态，以提供良好的用户体验。

比较忙，挖个坑，剩下的等有空再来

六、实现复杂的交互

列表和网格项的拖放实现 列表和网格项的滑动删除实现 实现动态调整列表和网格项大小和布局的方法

七、定制滚动行为

自定义滚动物理（如滚动速度，反弹效果等） 使用ScrollController控制滚动位置 列表和网格的滚动监听和滚动通知

八、动画和转场

如何给列表和网格项添加动画 如何使用Hero动画进行页面转场 使用AnimatedList和AnimatedGrid实现动态列表和网格

九、集成测试和单元测试

如何进行ListView和GridView的集成测试 如何进行ListView和GridView的单元测试 使用Mock数据进行测试的方法

avatar
文章
阅读
粉丝