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(// ...);},),],);},
)

在嵌套 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,);},),),],);},
)

在嵌套 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(// ...);},);},
)

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