Flutter 小技巧之 ListView 和 PageView 的各种花式嵌套_flutter listview嵌套

Flutter 小技巧之 ListView 和 PageView 的各种花式嵌套

在 Flutter 中，ListView 和 PageView 是两个常用的控件，它们可以用于滑动展示大量内容的场景，且支持各种嵌套方式，本文将介绍其中的一些花式嵌套方式。

ListView 嵌套 ListView

在某些场景下，我们需要在 ListView 中展示另一个 ListView，比如在一个订单列表中，每个订单又包含了多个商品。此时我们可以在每个订单条目中再嵌入一个 ListView 来展示商品列表。

ListView.builder(
  itemCount: orders.length,
  itemBuilder: (context, index) {
    return Column(
      children: [
        // 订单条目
        ListTile(
          // ...
        ),
        // 商品列表
        ListView.builder(
          shrinkWrap: true,
          physics: NeverScrollableScrollPhysics(),
          itemCount: orders[index].items.length,
          itemBuilder: (context, i) {
            return ListTile(
              // ...
            );
          },
        ),
      ],
    );
  },
)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

在嵌套 ListView 时，需要注意内层 ListView 的 shrinkWrap 属性必须为 true，physics 属性必须为 NeverScrollableScrollPhysics。

ListView 嵌套 PageView

在某些场景下，我们需要在 ListView 中展示一个 PageView，比如在一个带有轮播图的新闻列表中，每个新闻条目下方都有一个图片轮播。

ListView.builder(
  itemCount: newsList.length,
  itemBuilder: (context, index) {
    return Column(
      children: [
        // 新闻条目
        ListTile(
          // ...
        ),
        // 图片轮播
        SizedBox(
          height: 200,
          child: PageView.builder(
            itemCount: newsList[index].images.length,
            itemBuilder: (context, i) {
              return Image.network(
                newsList[index].images[i],
                fit: BoxFit.cover,
              );
            },
          ),
        ),
      ],
    );
  },
)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

在嵌套 ListView 和 PageView 时，需要注意内层的 PageView 需要指定高度，并且不要使用 NeverScrollableScrollPhysics，否则可能会导致图片无法滑动。

PageView 嵌套 ListView

在某些场景下，我们需要在 PageView 中展示多个 ListView，比如在一个带有分类切换的商品列表中，每个分类下都有一个商品列表。

PageView.builder(
  controller: _pageController,
  itemCount: categories.length,
  itemBuilder: (context, index) {
    return ListView.builder(
      itemCount: products[index].length,
      itemBuilder: (context, i) {
        return ListTile(
          // ...
        );
      },
    );
  },
)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

在嵌套 PageView 和 ListView 时，需要注意内层 ListView 需要指定高度，并且不要使用 NeverScrollableScrollPhysics，否则可能会导致页面无法滑动。

总结

ListView 和 PageView 是两个非常强大的控件，它们的嵌套方式也非常灵活，可以满足各种场景下的需求。但是在嵌套时需要注意一些细节，以免出现问题。希望本文能对大家有所帮助。