Flutter：如何将CustomScrollView下拉回弹区域背景色设为SliverAppBar颜色

要将下拉刷新时的回弹区域背景色设置为与SliverAppBar一致的颜色，核心是让回弹区域显示的父容器背景色匹配SliverAppBar的颜色，以下是两种可行方案：

方案1：给CustomScrollView包裹背景容器 #

将CustomScrollView嵌套在设置了目标背景色的Container中，下拉回弹时露出的区域会自动显示该容器的颜色，同时不影响页面下方的渐变布局：

class TestPage extends StatelessWidget {
  const TestPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final appBarColor = Colors.blue[800];
    return Scaffold(
      body: Container(
        color: appBarColor,
        child: CustomScrollView(
          physics: const BouncingScrollPhysics(),
          slivers: [
            const CupertinoSliverRefreshControl(),
            SliverAppBar(
              backgroundColor: appBarColor,
              pinned: true,
              elevation: 0.0,
              centerTitle: true,
              title: const Text("My titlte"),
            ),
            SliverToBoxAdapter(
              child: Container(
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                    colors: [
                      appBarColor!,
                      Colors.white,
                    ],
                    begin: Alignment.topCenter,
                    end: Alignment.bottomCenter,
                  ),
                ),
                child: Padding(
                  padding: const EdgeInsets.all(32.0),
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: [
                      Row(
                        children: [
                          Expanded(
                            child: Container(
                              color: Colors.red,
                              height: 200,
                              child: const Center(
                                child: Text("Widget 1"),
                              ),
                            ),
                          ),
                          Expanded(
                            child: Container(
                              color: Colors.green,
                              height: 200,
                              child: const Center(
                                child: Text("Widget 2"),
                              ),
                            ),
                          ),
                        ],
                      ),
                    ],
                  ),
                ),
              ),
            ),
            const SliverPadding(padding: EdgeInsets.symmetric(vertical: 8)),
            const SliverToBoxAdapter(
              child: Placeholder(),
            ),
            const SliverFillRemaining(),
          ],
        ),
      ),
    );
  }
}

方案2：直接设置Scaffold的背景色 #

如果页面顶部区域不需要其他差异化背景，可直接将Scaffold的backgroundColor设为SliverAppBar的颜色，操作更简洁：

return Scaffold(
  backgroundColor: Colors.blue[800],
  body: CustomScrollView(
    // 其余代码保持不变
  ),
);

原理说明 #

CupertinoSliverRefreshControl本身是透明组件，下拉回弹时露出的区域实际是父级容器的背景色。通过统一父容器（或Scaffold）与SliverAppBar的颜色，即可实现视觉上的一致性。方案1更适合页面下方有渐变、不同背景色的场景，方案2适合整体顶部背景统一的场景。

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