Flutter SliverAppBar显示不符合设计，求助滚动效果定制实现方案

你的需求可以通过Flutter原生Sliver组件直接实现，无需引入第三方库。
你提到的设计图如下：

核心实现逻辑 #

• 随滚动隐藏的Constantes模块放在FlexibleSpaceBar的background属性中，该区域会随AppBar折叠自动隐藏
• 需始终展示的姓名、装饰图案放在SliverAppBar的title属性中，pinned: true配置下会一直固定在顶部
• 右侧头像放在actions属性中，系统会自动适配折叠状态下的展示，不会消失

修改后完整代码 #

SliverAppBar(
  backgroundColor: Colors.grey[200],
  expandedHeight: 300,
  centerTitle: true,
  shape: const ContinuousRectangleBorder(
    borderRadius: BorderRadius.only(
      bottomLeft: Radius.circular(100),
      bottomRight: Radius.circular(100)
    )
  ),
  // 始终展示的头像放在actions，折叠后也会保留
  actions: <Widget>[
    Padding(
      padding: const EdgeInsets.only(right: 16),
      child: CircleAvatar(
        radius: 20,
        backgroundImage: AssetImage(
          'assets/img/categories/player.png',
        ),
      ),
    ),
  ],
  // 始终展示的姓名+装饰图案放在title，折叠后保留
  title: Row(
    mainAxisSize: MainAxisSize.min,
    children: [
      // 这里替换为你的装饰图案组件
      Icon(Icons.star, size: 20, color: Colors.black),
      const SizedBox(width: 8),
      const Text(
        "Mrs Surname Name",
        style: TextStyle(
          fontFamily: 'Kannada Sangam MN',
          fontWeight: FontWeight.w500,
          fontSize: 20,
        )
      ),
      const SizedBox(width: 8),
      // 右侧装饰图案
      Icon(Icons.star, size: 20, color: Colors.black),
    ],
  ),
  flexibleSpace: FlexibleSpaceBar(
    // 随滚动隐藏的Constantes模块放在background里
    background: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        const SizedBox(height: 80), // 避让顶部的title区域
        // 这里放你的Constantes模块完整内容
        Container(
          padding: const EdgeInsets.all(16),
          child: const Text(
            "Constantes",
            style: TextStyle(fontSize: 16, color: Colors.black54),
          ),
        ),
      ],
    ),
    centerTitle: true,
  ),
  pinned: true,
  floating: false,
  elevation: 0,
)

补充说明 #

如果需要更精细的滚动动画控制（比如姓名大小随滚动渐变、装饰图案透明度变化），可以通过ScrollController监听滚动偏移量，动态调整对应组件的样式属性即可。

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