Flutter iOS风格中Widget内容滑到了顶部导航栏后面与其重叠

Flutter 开发问题点一览

• Flutter iOS风格中Widget内容滑到了顶部导航栏后面与其重叠
• Flutter iOS风格文本输入框CupertinoTextField光标在Android中未与提示文本对齐

---

---

1. 问题描述

Flutter在iOS风格 CupertinoApp 中使用导航栏 CupertinoNavigationBar 时，出现了Widget内容滑到了顶部导航栏后面与其重叠的现象，如下图所示：

代码

  @override
  Widget build(BuildContext context) {
     
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(middle: Text("文本输入框")),
      child: Container(height: 120, color: Colors.red),
    );
  }

2. 原因、对策

原因

使用 CupertinoNavigationBar 时若 未设置或设置了带透明度的背景颜色 则可能会出现导航栏与其它widget重叠。

对策

• 方式一： 在 CupertinoNavigationBar 中设置非透明背景色

  @override
  Widget build(BuildContext context) {
     
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        backgroundColor: Colors.white,  //添加背景色
        middle: Text("文本输入框"),
      ),
      child: Container(height: 120, color: Colors.red),
    );
  }

• 方式二：在 CupertinoApp 主题中设置统一的导航栏背景色

class MyApp extends StatelessWidget {
     
  @override
  Widget build(BuildContext context) {
     
    return CupertinoApp(
      theme: CupertinoThemeData(barBackgroundColor: Colors.white), //主题设置
      title: 'Flutter Demo',
      home: MyHomePage(),
    );
  }
}

3. 源码分析

3.1 查看 CupertinoPageScaffold 源码

查看 CupertinoPageScaffold navigationBar 属性的介绍即可知道原因，如果是半透明的，主要内容可能会滑到navigationBar后面。那默认颜色是什么呢？

3.2 查看 CupertinoNavigationBar 源码

查看 CupertinoNavigationBar backgroundColor 属性的介绍即可知道默认颜色为 CupertinoTheme 的 barBackgroundColor 属性。

3.3 查看 CupertinoThemeData 源码

查看 CupertinoThemeData barBackgroundColor属性可发现未设定值时会返回默认的颜色。

继续查看_defaults 可以发现其值为 _kDefaultTheme

_kDefaultTheme 的 barBackgroundColor默认为半透明色。

3.4 结论

该现象为Flutter的一个特性。
CupertinoPageScaffold 的 navigationBar 背景如果是半透明的，主要内容可能会滑到navigationBar 后面，而CupertinoApp默认的 navigationBar 背景色就是为半透明色，所以默认情况下顶部导航栏会与其它Widget重叠。