脚手架背景的颜色是什么？答案

【问题标题】：What's the color of Scaffold background?脚手架背景的颜色是什么？
【发布时间】：2021-12-31 19:41:09
【问题描述】：

最少的可重现代码：

@override
Widget build(BuildContext context) {
  return Padding(
    padding: const EdgeInsets.all(40),
    child: Scaffold(),
  );
}

我在Scaffold 后面看到黑色背景，显然这不是Theme.of(context).scaffoldBackgroundColor，因为浅色和深色主题都显示相同的白色。那么，它是什么颜色的呢？

【问题讨论】：

Scaffold 默认为白色背景色
根据scaffoldBackgroundColor默认颜色为Color(0xfffafafa)
@Diwyansh 它显示黑色而不是白色，其次Scaffold 后面的区域不是Scaffold。
@YeasinSheikh 但这不是scaffoldBackgroundColor，因为它是黑色的#000000
@iDecode 我不是在说Scaffold后面我只是说Scaffold的背景颜色是白色的，而Scaffold后面的颜色是暗的。

标签： flutter dart flutter-layout

【解决方案1】：

在 ThemeData 中没有定义该颜色的属性。您可以查看：https://api.flutter.dev/flutter/material/ThemeData-class.html

如你所说，scaffoldBackgroundColor 属性只是作为整个 Scaffold 基础的 Material 小部件的颜色。

但如果您想要在 Scaffold 后面添加颜色或渐变，您可以使用容器。

纯色

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(scaffoldBackgroundColor: Colors.blueGrey),
      home: Container(
        color: Colors.blue,
        child: const Padding(
          padding: EdgeInsets.all(40),
          child: Scaffold(),
        ),
      ),
    );
  }
}

线性渐变

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(scaffoldBackgroundColor: Colors.white70),
      home: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            colors: [Colors.blue, Colors.blue.shade600, Colors.blue.shade900],
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
          ),
        ),
        child: const Padding(
          padding: EdgeInsets.all(40),
          child: Scaffold(),
        ),
      ),
    );
  }
}

【讨论】：

谢谢，但这不是问题。

【解决方案2】：

当您在屏幕上使用 Padding 或任何其他小部件作为父级时，您将获得来自主题或来自 main.dart 文件的 MaterialApp 初始小部件的背景颜色。

如果您仅在这个单一屏幕上需要任何特定颜色。那么，

使用脚手架作为父级并应用背景颜色。使用 padding 作为其直接子代。
将 Theme 小部件包装到 Padding 小部件

【讨论】：

"那么你就有了主题的背景颜色" -- 那是什么颜色，这是个问题。

【解决方案3】：

我发现脚手架的默认背景颜色来自backgroundColor 来自ThemeData.scaffoldBackgroundColor

如果我们不定义scaffoldBackgroundColor，它来自canvasColor

scaffoldBackgroundColor ??= canvasColor;

并且画布颜色定义在source codelike

canvasColor ??= isDark ? Colors.grey[850]! : Colors.grey[50]!;

因此scaffoldBackgroundColor的默认颜色为Colors.grey[50]

黑色来了是因为Padding。

【讨论】：

我已经知道Scaffold的默认背景颜色肯定不是黑色，你说黑色来自Padding，你确定因为如果我把Padding包裹在@ 987654334@ 并为其赋予白色，然后填充将开始显示白色而不是黑色。所以，问题是（根据你写的），Padding 中的黑色是从哪里来的？
Padding 用来约束它的子元素，剩余的空间什么都不填，我们可以看到祖先的颜色。虽然scaffold 本身就是孩子，但我们可以看到黑色背景。通过包装ColoredBox 填充，空格将被填充。使用home: Center( child: Container(height: 100, width: 100, color: Colors.green)))，黑色的存在也变得清晰起来
祖先的颜色（黑色）来自哪里，这是个问题。
我的理论是：什么都没有，这就是为什么它是黑色的[默认颜色]