Flutter中如何设置含SliverAppBar与SliverList的CustomScrollView背景？

问题分析 #

你的核心问题是背景图仅局限在SliverAppBar的flexibleSpace范围内，滚动后SliverList区域没有背景支撑，加上CustomScrollView默认带有白色背景，导致透明设置无法生效。另外当前SliverList内的Container设置了红色背景，也会遮挡底层背景。

修改步骤 #

• 将背景图移到最外层，作为整个页面的背景，确保所有滚动区域都能覆盖到背景图
• 给CustomScrollView设置backgroundColor: Colors.transparent，消除其默认白色背景
• 将SliverList内Container的color改为Colors.transparent，去掉红色遮挡
• 优化SliverAppBar的滚动状态，确保始终保持透明无阴影

修改后的完整代码 #

@override
Widget build(BuildContext context) {
  return Container(
    // 整个页面的背景图
    decoration: const BoxDecoration(
      image: DecorationImage(
        image: AssetImage("assets/background_image.jpeg"),
        fit: BoxFit.cover,
      ),
    ),
    child: Scaffold(
      backgroundColor: Colors.transparent,
      body: CustomScrollView(
        physics: BouncingScrollPhysics(),
        backgroundColor: Colors.transparent, // 关键：消除CustomScrollView默认背景
        slivers: <Widget>[
          SliverAppBar(
            backgroundColor: Colors.transparent,
            expandedHeight: 275.0,
            floating: false,
            pinned: true,
            elevation: 0,
            scrolledUnderElevation: 0, // 滚动时保持无阴影透明
            flexibleSpace: FlexibleSpaceBar(
              stretchModes: [
                StretchMode.zoomBackground,
                StretchMode.blurBackground,
              ],
            ),
            stretch: true,
          ),
          SliverList(
            delegate: SliverChildListDelegate(
              [
                Container(
                  margin: EdgeInsets.only(top: 10.0),
                  width: 0,
                  padding: EdgeInsets.all(30.0),
                  decoration: BoxDecoration(
                    color: Colors.transparent, // 改为透明
                    borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(48),
                        topRight: Radius.circular(48)),
                  ),
                  child: Column(
                    children: [
                      _buildContainer1(),
                      _buildContainerWithImageAndButton(
                          "assets/barber1.png", "About Us", 241),
                      SizedBox(height: 50),
                      _buildContainerWithImageAndButton(
                          "assets/barber2.png", "Contact", 263),
                      _buildContainer4(),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    ),
  );
}

额外说明 #

如果_buildContainer1()等子组件内部也设置了不透明背景色，需要同步将这些子组件的背景改为透明或半透明，才能完全看到底层的背景图。

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