Flutter中如何在CustomScrollView内动态展示组件树片段？

核心思路是让抽离的动态组件返回Sliver组件列表，而非完整的CustomScrollView，这样就能直接将这些Sliver插入到父级CustomScrollView的slivers数组中，彻底避免嵌套滚动视图的问题。

具体改造步骤： #

1. 重构子组件，暴露Sliver列表
   把原来返回CustomScrollView的子组件，改成直接返回一组Sliver组件的集合。可以用静态类属性的方式实现：

class FirstWidgetSlivers {
  static List<Widget> get slivers => [
        const SliverToBoxAdapter(child: Text("First Widget")),
        SliverList(
          delegate: SliverChildBuilderDelegate(
            (context, index) => ListTile(title: Text("Item $index")),
            childCount: 20,
          ),
        ),
      ];
}

// 同理改造SecondWidget、ThirdWidget

2. 父级组件整合所有Sliver
   在父级的CustomScrollView中，使用展开运算符...将子组件的Sliver列表直接插入全局的slivers数组：

List<List<Widget>> _widgetSlivers = [
  FirstWidgetSlivers.slivers,
  SecondWidgetSlivers.slivers,
  ThirdWidgetSlivers.slivers,
];

@override
Widget build(BuildContext context) {
  return CustomScrollView(
    slivers: [
      const SliverToBoxAdapter(child: SizedBox(height: 10)),
      const SliverToBoxAdapter(child: Container()),
      // 展开当前标签页对应的Sliver列表
      ..._widgetSlivers[index],
    ],
  );
}

保留Widget类形式的替代写法 #

如果希望子组件依然是标准Widget类型，可以让它返回一个包含所有内容的Sliver容器（比如SliverList）：

class FirstWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SliverList(
      delegate: SliverChildListDelegate([
        const Text("First Widget"),
        ...List.generate(20, (i) => ListTile(title: Text("Item $i"))),
      ]),
    );
  }
}

// 父级直接将子组件加入slivers数组
@override
Widget build(BuildContext context) {
  List<Widget> _widgets = [FirstWidget(), SecondWidget(), ThirdWidget()];
  
  return CustomScrollView(
    slivers: [
      const SliverToBoxAdapter(child: SizedBox(height: 10)),
      const SliverToBoxAdapter(child: Container()),
      _widgets[index],
    ],
  );
}

这种写法更贴近传统Widget结构，但如果子组件需要包含多种不同类型的Sliver（比如同时有SliverToBoxAdapter和SliverGrid），第一种返回Sliver列表的方式会更灵活。

内容的提问来源于stack exchange，提问作者abdelhak razi