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，否则可能会导致页面无法滑动。
总结
ListView 和 PageView 是两个非常强大的控件，它们的嵌套方式也非常灵活，可以满足各种场景下的需求。但是在嵌套时需要注意一些细节，以免出现问题。希望本文能对大家有所帮助。
