SliverAppBar标题水平居中及FlexibleSpaceBar滚动遮挡问题咨询

1. 让SliverAppBar标题水平居中（不使用FlexibleSpaceBar的title） #

由于SliverAppBar的actions会占用右侧空间，默认title无法完全居中。只需让title占满可用宽度后内部居中即可：

SliverAppBar(
  pinned: true,
  expandedHeight: 255,
  actions: const [CoinCount()],
  // 修改title为占满宽度的容器，内部实现居中
  title: SizedBox(
    width: double.infinity,
    child: Center(
      child: Text(_getVsText()),
    ),
  ),
  titleSpacing: 0,
  elevation: 0,
  flexibleSpace: FlexibleSpaceBar(
    background: Column(children: [
      const SizedBox(height: 40),
      // 你的其他内容
    ]),
  ),
)

原理：SizedBox(width: double.infinity)让title区域填满AppBar的可用宽度，再通过Center组件让文本居中，不受actions的空间挤压影响。

2. 阻止FlexibleSpaceBar滚动时覆盖AppBar内容 #

当pinned: true时，FlexibleSpaceBar的内容会随滚动向上滑动，最终被固定的AppBar覆盖。可以通过给FlexibleSpaceBar的背景内容添加顶部内边距，避开AppBar的高度区域：

import 'package:flutter/material.dart';

// ...

SliverAppBar(
  pinned: true,
  expandedHeight: 255,
  actions: const [CoinCount()],
  title: SizedBox(
    width: double.infinity,
    child: Center(child: Text(_getVsText())),
  ),
  titleSpacing: 0,
  elevation: 0,
  flexibleSpace: FlexibleSpaceBar(
    // 可选：设置collapseMode为pin，让内容滚动时固定顶部（而非视差效果）
    collapseMode: CollapseMode.pin,
    background: Padding(
      // 内边距等于AppBar默认高度（kToolbarHeight=56）
      padding: EdgeInsets.only(top: kToolbarHeight),
      child: Column(children: [
        // 可根据需求调整或移除原有的SizedBox(height:40)
        // 你的其他内容
      ]),
    ),
  ),
)

原理：通过padding: EdgeInsets.only(top: kToolbarHeight)把FlexibleSpaceBar的内容向下偏移，使其始终处于AppBar下方，滚动时不会进入AppBar的固定区域，避免被覆盖。

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