如何实现嵌套Sliver？一个包含Sliver列表的Sliver

Question

SliverList 是包含盒式widget的滑动控件。是否有一个包含滑动控件的滑动布局控件？

我想嵌套使用flutter_sticky_headers来创建一个时间轴，但是 SliverStickyHeader 只能接受一个滑动控件作为参数（请参阅monthSlivers()中的注释）。

class HomeView extends StatelessWidget {
  final HomeViewModel viewModel;

  HomeView(this.viewModel);

  List<Widget> entryTiles(List<EntryTileViewModel> entryVMs) {
    return entryVMs.map((entryVM) => EntryTile(viewModel: entryVM)).toList();
  }

  List<Widget> daySlivers(List<DaySection> daySections) {
    return daySections.map((daySection) {
      var entries = entryTiles(daySection.entryVMs);
      return SliverStickyHeader(
        overlapsContent: true,
        header: DayHeader(
          viewModel: DayHeaderViewModel(date: daySection.date),
        ),
        sliver: SliverList(
          delegate: SliverChildBuilderDelegate(
                (context, i) => entries[i],
            childCount: entries.length,
          ),
        ),
      );
    }).toList();
  }

  List<Widget> monthSlivers() {
    return viewModel.monthSections.map((monthSection) {
      var days = daySlivers(monthSection.daySections);
      return SliverStickyHeader(
        header: MonthHeader(
          viewModel: MonthHeaderViewModel(date: monthSection.date),
        ),
        sliver:,// THIS IS WHERE I WANT TO PUT DAYSLIVERS().
      );
    }).toList();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: CustomScrollView(
        slivers: monthSlivers(),
      ),
    );
  }
}

- Zach Foster

Answer 1

您可以使用sliver_tools包。它有一个名为MultiSliver的小部件，通过这个小部件可以实现您想要的结果。正如文档所述：

MultiSliver小部件允许将多个sliver分组在一起，以便它们可以作为单个小部件返回。例如，当您想要用一些填充或继承小部件包装几个sliver时。

以下是一个示例：

class WidgetThatReturnsASliver extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiSliver(
      children: <Widget>[
        SliverPersistentHeader(...),
        SliverList(...),
      ],
    );
  }
}

或者您可以在 CustomScrollView 中使用它：

CustomScrollView(
  slivers:[
    MultiSliver(
      SliverList(...),
      SliverGrid(...),
      ...
    )
  ]
)

- Hossein Hadi

Answer 2

我目前正在我的项目中使用这个技术。

class SliverSection extends StatelessWidget {
  final List<Widget> slivers;

  const SliverSection({Key key, this.slivers}) : super(key: key);

  @override
  Widget build(BuildContext context) {
   return  SliverToBoxAdapter(
     child: ShrinkWrappingViewport(
       offset: ViewportOffset.zero(),
       slivers: slivers,
     ),
   );
  }
}

我还没有尝试过它是否会影响性能。

- jamesblasco

Answer 3

您可以使用具有滑动组件的CustomScrollView()，作为接收slivers列表的命名参数，或者使用NestedScrollView()。

- Manish P

---

我在CustomScrollView中有一个可增长的列表（无限滚动）。我将列表包裹在SliverFillRemaining中，其中hasScrollBody为true，NeverScrollableScrollPhysics。这使得我无法滚动到列表的末尾，如果改为ScrollPhysics，则会导致有两个滚动视口，并允许滚动到列表的末尾。所以我尝试了另一种方式，我将列表包裹在SliverList中，并给它添加了expanded或者没有expanded。但是都没有起作用。我期望能够在不使用多个滚动视口的情况下滚动到列表的末尾。 - undefined

Answer 4

如果您的slivers已经包含在CustomScrollView中，并且您实际上想要针对某些情况返回多个slivers，则解决方案是将它们包装在列表中并使用扩展运算符。

...[Sliver1（）， Sliver2（），]

- radrt