Flutter中SingleChildScrollView仅在iOS上遮挡顶部组件阴影问题

问题现象 #

仅iOS平台出现此问题，Android无异常：滚动下方列表视图时，列表内容会覆盖上方黄色容器的阴影，导致视觉表现异常。

可复现代码 #

class ExampleView extends Stateful Widget {
  const ExampleView({super.key});

  @override
  State<ExampleView> createState() => _ExampleView();
}

class _ExampleView extends State<ExampleView> {
  var itemsList = [1, 2, 3, 4, 5, 6];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: true,
      body: Column(
        children: [
          Container(
            height: 100,
            width: double.infinity,
            margin: EdgeInsets.only(bottom: 10),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.only(
                bottomLeft: Radius.circular(40),
                bottomRight: Radius.circular(40),
              ),
              color: Colors.yellow,
              boxShadow: [
                BoxShadow(
                  color: Colors.black.withOpacity(1),
                  blurRadius: 3,
                  offset: const Offset(0,5),
                ),
              ],
            ),
          ),
          SingleChildScrollView(
            child: Container(
              height: 300,
              child: ListView.builder(
                itemCount: itemsList.length,
                itemBuilder: (context, index) {
                  int maxN = 1 + itemsList.length;
                  double opacity = (maxN - index) / maxN;
                  return Container(
                    height: 100,
                    width: double.infinity,
                    color: Colors.blue.withOpacity(opacity),
                    child: Text('Item $index'),
                  );
                },
              ),
            ),
          ),
        ],
      ),
    );
  }
}

解决方案 #

最直接的修复方式是给滚动视图的父容器添加不透明背景色（与Scaffold背景色一致即可）：

SingleChildScrollView(
  child: Container(
    height: 300,
    color: Colors.white, // 添加该行，设置不透明背景
    child: ListView.builder(
      // 原有代码保持不变
    ),
  ),
)

问题原因 #

iOS平台上，Flutter滚动组件（如ListView、SingleChildScrollView）默认背景为透明，而Android平台会自动填充背景色。滚动时，透明的列表内容会覆盖上方组件的阴影（阴影绘制在组件下方区域），从而出现视觉异常。设置不透明背景后，会遮挡下方的阴影区域，避免被滚动内容覆盖。

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