Flutter ColoredBox child 是 Scaffold 颜色失效

在 Flutter 中，Scaffold 小部件有自己的一组属性来管理其外观，包括背景颜色。当你将 Scaffold 作为 ColoredBox 的子小部件时，Scaffold 的 backgroundColor 属性将覆盖 ColoredBox 的颜色。

要解决这个问题，你可以直接设置 Scaffold 的 backgroundColor 属性，而不是使用 ColoredBox。如果你想在 Scaffold 之外设置背景颜色，可以使用 Container 或其他小部件来包裹 Scaffold，但需要注意 Scaffold 的背景颜色会覆盖外部的颜色设置。

示例代码

使用 Scaffold 的 backgroundColor

直接设置 Scaffold 的 backgroundColor 属性。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.blue, // 设置背景颜色
        appBar: AppBar(
          title: Text('Colored Scaffold'),
        ),
        body: Center(
          child: Text('Hello, World!'),
        ),
      ),
    );
  }
}

使用 Container 包裹 Scaffold

如果你需要在 Scaffold 之外设置背景颜色，可以用 Container 包裹 Scaffold，并将 Scaffold 的 backgroundColor 设置为透明。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Container(
        color: Colors.blue, // 设置背景颜色
        child: Scaffold(
          backgroundColor: Colors.transparent, // 设置为透明以显示 Container 的颜色
          appBar: AppBar(
            title: Text('Container Background'),
          ),
          body: Center(
            child: Text('Hello, World!'),
          ),
        ),
      ),
    );
  }
}

总结

Scaffold 小部件的 backgroundColor 属性会覆盖其父小部件的颜色设置。因此，如果需要更改 Scaffold 的背景颜色，直接设置 backgroundColor 属性是最简便的方法。如果必须使用外部包裹层来设置背景颜色，可以使用 Container 包裹 Scaffold 并将 Scaffold 的背景设置为透明。