Flutter技术问询：能否为ScrollView设置上下不同背景色？

当然可以实现，下面给你两种贴合示例效果的常用实现方式：

方法一：固定上下背景，内容在中间滚动 #

这种方式适合需要顶部、底部背景始终固定显示的场景，底层放置分色背景，上层滚动内容避开上下背景区域：

class ScrollViewBgDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final topBgHeight = 100.0;
    final bottomBgHeight = 80.0;

    return Stack(
      children: [
        // 底层分色背景
        Column(
          children: [
            Container(height: topBgHeight, color: Colors.grey[200]),
            Expanded(child: Container(color: Colors.white)),
            Container(height: bottomBgHeight, color: Colors.grey[200]),
          ],
        ),
        // 上层滚动内容，通过padding避开上下背景
        Padding(
          padding: EdgeInsets.only(top: topBgHeight, bottom: bottomBgHeight),
          child: ListView.builder(
            itemCount: 30,
            itemBuilder: (context, index) => ListTile(title: Text('列表项 $index')),
          ),
        ),
      ],
    );
  }
}

方法二：滚动时自动适配上下背景 #

如果需要内容未填满屏幕时底部背景自动填充剩余空间，内容过长时底部背景被推至页面底部，可使用CustomScrollView实现：

class ScrollViewBgDemo2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: [
        // 顶部固定背景
        SliverToBoxAdapter(
          child: Container(
            height: 100,
            color: Colors.grey[200],
            alignment: Alignment.center,
            child: Text('顶部背景区域'),
          ),
        ),
        // 滚动内容列表
        SliverList(
          delegate: SliverChildBuilderDelegate(
            (context, index) => ListTile(title: Text('列表项 $index')),
            childCount: 15,
          ),
        ),
        // 底部填充背景，自动适配剩余空间
        SliverFillRemaining(
          hasScrollBody: false,
          child: Container(
            color: Colors.white,
            alignment: Alignment.center,
            child: Text('底部背景区域'),
          ),
        ),
      ],
    );
  }
}

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