Flutter中如何实现SliverAppBar与SliverList的高度动态适配

解决方案 #

你需要将原有的SliverList替换为SliverFillRemaining组件，它会自动适配CustomScrollView的剩余可视空间，完美适配内容多少两种场景。

调整后完整代码

CustomScrollView(
  physics: ClampingScrollPhysics(),
  slivers: <Widget>[
    SliverAppBar(
      expandedHeight: _scaler.getHeight(65),
      flexibleSpace: FlexibleSpaceBar(
        collapseMode: CollapseMode.none,
        background: Calendar(),
      ),
    ),
    SliverFillRemaining(
      hasScrollBody: false,
      fillOverscroll: false,
      child: Event(
        currentSelectedDay: _selectedDay!,
      ),
    ),
  ],
)

额外配置（若Event组件内部嵌套了可滚动列表如ListView）

需要给内部的ListView添加两个属性，避免滚动冲突：

ListView(
  shrinkWrap: true,
  physics: NeverScrollableScrollPhysics(),
  // 其余原有配置保持不变
)

实现逻辑说明 #

• SliverFillRemaining会自动计算页面除顶部SliverAppBar外的剩余高度，作为自身最小高度，内容不足时自动撑满屏幕底部，无留白
• hasScrollBody: false配置将滚动控制权完全交给外层CustomScrollView，保留原有列表滚动覆盖日历的交互效果
• 内部列表设置shrinkWrap: true让列表高度适配内容总高度，禁用内部滚动避免手势冲突，内容过多时会自动跟随外层滚动

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