如何使 SliverAppBar 和 SliverList 高度动态化答案

【问题标题】：How to make SliverAppBar and SliverList height dynamic如何使 SliverAppBar 和 SliverList 高度动态化
【发布时间】：2021-10-28 07:23:54
【问题描述】：

我正在尝试创建一个由两部分组成的屏幕，顶部的日历和底部的列表。当列表滚动时（假设它有几个项目），它应该在日历上重叠。下面是它应该是什么样子的示例（在适当的情况下，实际上看起来像下面的代码）：

完美布局示例

为了实现这种布局，我使用了 CustomScrollView 和 SliverAppBar 和 SliverList：

CustomScrollView(
  physics: ClampingScrollPhysics(),
  slivers: <Widget>[
    SliverAppBar(
      expandedHeight: _scaler.getHeight(65),
      flexibleSpace: FlexibleSpaceBar(
        collapseMode: CollapseMode.none,
        background: Calendar(),
    ),
    SliverList(
      delegate: SliverChildListDelegate(
        <Widget>[
          Event(
            currentSelectedDay: _selectedDay!,
          ),
        ],
      ),
    ),
  ],
)

这里的问题是，当 SliverList 中的项目不足以覆盖剩余空间时，这就是它在大屏幕中的样子：

上一张图片在大屏幕上的显示效果

如您所见，SliverList 占用的空间很小，因为它不足以容纳SliverAppBar 之后的剩余空间。 理想情况下，它应该是这样的：

上一张图片的实际样子

那么知道我怎样才能真正做到这一点吗？

【问题讨论】：

标签： flutter flutter-layout

【解决方案1】：

也许问题出在_scaler.getHeight(65)。
你可以试试expandedHeight: MediaQuery.of(context).size.height / 2,

更新：
可能你可以尝试根据屏幕高度和项目高度将一些不可见的列表项到SliverChildBuilderDelegate作为临时解决方案。

【讨论】：

不，我想要的是完全摆脱expandedHeight。您的解决方案只会更改 appbar 的高度，不会修复列表。
我明白了。可能你可以尝试根据屏幕高度和项目高度将一些不可见的列表项SliverChildBuilderDelegate作为临时解决方案。