Flutter中SliverAppBar与FlexibleSpaceBar重叠及滚动隐藏问题求助

不要用固定高度的SizedBox，改用动态计算顶部偏移量，同时让FlexibleSpaceBar的内容自动填充剩余空间：

• 动态获取状态栏高度+AppBar工具栏高度作为顶部偏移：用MediaQuery.of(context).padding.top获取状态栏高度，加上Flutter内置的标准工具栏高度kToolbarHeight，适配所有设备
• 用Expanded包裹PlayerBanner，让它填充expandedHeight减去顶部偏移后的剩余空间，彻底避免底部空隙

修改后的代码示例：

return SliverAppBar(
  pinned: true,
  expandedHeight: 260,
  actions: const [CoinCount()],
  title: Text(_getVsText()),
  centerTitle: true,
  backgroundColor: CustomColors.appBarColor,
  flexibleSpace: LayoutBuilder(
    builder: (context, constraints) {
      // 动态计算顶部偏移高度：状态栏高度 + 标准工具栏高度
      final topOffset = MediaQuery.of(context).padding.top + kToolbarHeight;
      return FlexibleSpaceBar(
        background: Column(
          children: [
            SizedBox(height: topOffset),
            Expanded( // 填充剩余空间，消除底部空隙
              child: PlayerBanner(
                // 你的PlayerBanner实现代码
              ),
            ),
          ],
        ),
      );
    },
  ),
);

SliverAppBar本身的pinned属性配合expandedHeight，默认支持滚动时逐渐收起FlexibleSpaceBar。如果需要滚动到指定距离后完全隐藏，可以通过ScrollController监听滚动偏移实现：

1. 初始化ScrollController并监听滚动事件
2. 根据滚动偏移量判断是否超过expandedHeight，通过状态变量控制FlexibleSpaceBar的显示
3. 组件销毁时记得dispose控制器

代码示例：

class _YourWidgetState extends State<YourWidget> {
  final ScrollController _scrollController = ScrollController();
  bool _showFlexibleSpace = true;

  @override
  void initState() {
    super.initState();
    _scrollController.addListener(_onScroll);
  }

  void _onScroll() {
    // 滚动偏移超过expandedHeight时隐藏FlexibleSpaceBar
    setState(() {
      _showFlexibleSpace = _scrollController.offset <= 260;
    });
  }

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      controller: _scrollController,
      slivers: [
        SliverAppBar(
          pinned: true,
          // 根据状态切换展开高度
          expandedHeight: _showFlexibleSpace ? 260 : kToolbarHeight,
          actions: const [CoinCount()],
          title: Text(_getVsText()),
          centerTitle: true,
          backgroundColor: CustomColors.appBarColor,
          flexibleSpace: _showFlexibleSpace
              ? LayoutBuilder(
                  builder: (context, constraints) {
                    final topOffset = MediaQuery.of(context).padding.top + kToolbarHeight;
                    return FlexibleSpaceBar(
                      background: Column(
                        children: [
                          SizedBox(height: topOffset),
                          Expanded(child: PlayerBanner()),
                        ],
                      ),
                    );
                  },
                )
              : null,
        ),
        // 其他Sliver组件
      ],
    );
  }
}

如果只需要滚动时平滑收起（不完全隐藏，保留固定title），直接保留pinned: true即可，这是SliverAppBar的默认行为。

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