如何实现嵌套条子？包含 sliver 列表的 sliver答案

【问题标题】：How to achieve nested slivers? A sliver containing a list of slivers如何实现嵌套条子？包含 sliver 列表的 sliver
【发布时间】：2020-07-21 13:13:39
【问题描述】：

SliverList 是一个包含盒子部件的条子。是否存在包含 sliver 小部件的 sliver？

我正在尝试嵌套 flutter_sticky_headers 来创建时间线，但 SliverStickyHeader 只接受单个 sliver 作为参数（请参阅 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(),
      ),
    );
  }
}

【问题讨论】：

标签： flutter dart flutter-sliver

【解决方案1】：

我现在在我的项目中使用它


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,
     ),
   );
  }
}

我没试过它会影响性能

【讨论】：

【解决方案2】：

您可以将 CustomScrollView() 与 slivers 一起用作接收 slivers 列表的命名参数或 NestedScrollView()

【讨论】：

【解决方案3】：

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

MultiSliver 小部件允许对多个条进行分组在一起，以便它们可以作为单个小部件返回。为了例如，当一个人想用一些填充物或一个继承的小部件。

这是一个例子：

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

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

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

【讨论】：