为什么更改 Cupertino App 中导航栏的背景颜色会改变高度？

Question

我有一个小部件演示 Flutter 应用程序的渲染。正如下面所写的，文本在navigationBar. 但是，如果您注释掉backgroundColor，它就会变得不可见。这是为什么？

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      home: CupertinoPageScaffold(
        navigationBar: const CupertinoNavigationBar(
          middle: Text("Settings"),
          previousPageTitle: "Back",
          backgroundColor: Colors.blue,
        ),
        child: Column(
          children: const <Widget>[
            Text("Hello World!"),
          ],
        ),
      ),
    );
  }
}

没有蓝色：

蓝色：

Answer 1

高度不随 变化backgroundColor，这是CupertinoPageScaffold 的文档所说的：

当导航栏半透明时，内容可以在导航栏下方滑动。在这种情况下，子级的 BuildContext 的 MediaQuery 将有一个顶部填充，指示与导航栏重叠的阻碍区域。

这就是您的文本被隐藏的原因，当其颜色为半透明时，它只是位于栏下方。使用后，Colors.blue您将获得不透明的颜色。

您可以尝试使用，backgroundColor: Colors.transparent结果将与不添加颜色相同。

要修复此行为，您可以Column使用SafeArea小部件包装您的：

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

  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      home: CupertinoPageScaffold(
        navigationBar: const CupertinoNavigationBar(
          middle: Text("Settings"),
          previousPageTitle: "Back",
        ),
        child: SafeArea(
          child: Column(
            children: const <Widget>[
              Text("Hello World!"),
            ],
          ),
        ),
      ),
    );
  }
}

在 DartPad 上尝试完整示例