Flutter中如何为SliverAppBar设置背景图片并实现自定义设计？

从效果对比来看，核心差异是折叠时的背景渐变过渡和标题的平滑显示逻辑。以下是实现预期设计的具体代码和关键说明：

SliverAppBar(
  expandedHeight: 200, // 展开时的高度
  collapsedHeight: kToolbarHeight, // 折叠后的高度，和系统工具栏一致
  pinned: true, // 固定顶部，折叠后不消失
  backgroundColor: Colors.transparent, // 透明背景，避免遮挡下层图片
  elevation: 0, // 去掉默认阴影，根据需求调整
  // 折叠时显示的固定标题
  title: Opacity(
    opacity: MediaQuery.of(context).viewPadding.top + kToolbarHeight >= constraints.maxHeight ? 1 : 0,
    child: const Text("折叠态标题"),
  ),
  flexibleSpace: LayoutBuilder(
    builder: (context, constraints) {
      // 计算滚动偏移比例：0=完全展开，1=完全折叠
      final scrollRatio = (constraints.maxHeight - kToolbarHeight) / (200 - kToolbarHeight);
      return Stack(
        fit: StackFit.expand,
        children: [
          // 背景图片
          Image.network(
            "你的背景图片地址",
            fit: BoxFit.cover,
          ),
          // 折叠时显示的顶部渐变遮罩
          Opacity(
            opacity: 1 - scrollRatio,
            child: Container(
              decoration: const BoxDecoration(
                gradient: LinearGradient(
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,
                  colors: [Colors.black45, Colors.transparent],
                ),
              ),
            ),
          ),
          // 展开态的标题/内容
          FlexibleSpaceBar(
            title: Opacity(
              opacity: scrollRatio,
              child: const Text("展开态标题"),
            ),
            centerTitle: true,
            collapseMode: CollapseMode.pin,
          ),
        ],
      );
    },
  ),
)

关键逻辑说明 #

1. 滚动比例计算：通过LayoutBuilder获取当前AppBar的高度，计算出滚动偏移比例，以此控制渐变遮罩、标题的透明度变化，实现平滑过渡。
2. 层叠布局：用Stack把背景图、渐变遮罩、标题层叠在一起，保证折叠时渐变逐渐覆盖顶部，标题同步切换。
3. 固定与展开态标题分离：分别在SliverAppBar.title和FlexibleSpaceBar.title设置折叠/展开时的标题，通过Opacity控制显示时机。

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