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

发布于03月16日

我有一个小部件演示了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!"),
          ],
        ),
      ),
    );
  }
}

Without blue color:

With blue color:

推荐答案

高度不会随backgroundColor而改变，CupertinoPageScaffold's documentation是这样说的:

当内容为半透明时，可以在导航栏下滑动.在里面

这就是为什么你的文本是隐藏的，当它的 colored颜色是半透明的时候，它只是在条下面.通过使用Colors.blue，您将获得不透明的 colored颜色 .

你可以try 使用backgroundColor: Colors.transparent，结果将与没有 colored颜色相同.

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

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!"),
            ],
          ),
        ),
      ),
    );
  }
}

Try the full example on DartPad