为什么 Flutter 的 CupertinoNavigationBar 与 CupertinoPageScaffold 中的孩子重叠？答案

【问题标题】：Why Flutter's CupertinoNavigationBar overlaps children in CupertinoPageScaffold?为什么 Flutter 的 CupertinoNavigationBar 与 CupertinoPageScaffold 中的孩子重叠？
【发布时间】：2020-04-10 06:58:13
【问题描述】：

我有以下小部件树：

@override
  Widget build(BuildContext context) {
    final double topMargin = Platform.isAndroid ? 0 : 105; // TODO: (why margin on iOS?)
    final double interMargin = Platform.isAndroid ? 0 : 10;
    final body = Column(children: <Widget> [
      Padding(
        padding: EdgeInsets.only(left: 10, right: 10, top: topMargin),
        child: Platform.isAndroid // url
        ? TextField(
            decoration: new InputDecoration(hintText: 'Host'),
            maxLines: 1,
            autofocus: true,
            textInputAction: TextInputAction.next,
            controller: _hostController)
        : CupertinoTextField(
            maxLines: 1,
            autofocus: true,
            textInputAction: TextInputAction.next,
            controller: _hostController)),
      Padding(
        padding: EdgeInsets.only(left: 10, top: interMargin, right: 10),
        child: Platform.isAndroid // port
          ? TextField(
              decoration: new InputDecoration(hintText: 'Port'),
              keyboardType: TextInputType.number,
              maxLines: 1,
              controller: _portController)
          : CupertinoTextField(
              keyboardType: TextInputType.number,
              maxLines: 1,
              controller: _portController)),
      Platform.isAndroid
        ? RaisedButton(child: Text('OK'), onPressed: () => _onInputFinished())
        : CupertinoButton(child: Text('OK'), onPressed: () => _onInputFinished())
    ]);
    return Platform.isAndroid
      ? Scaffold(
          appBar: AppBar(title: Text('Server connection')),
          body: body)
      : CupertinoPageScaffold(
          navigationBar: CupertinoNavigationBar(middle: Text('Server connection')),
          child: body);
  }

只有在我为 body 小部件添加上边距时才看起来没问题：

final double topMargin = Platform.isAndroid ? 0 : 105; // TODO: (why margin on iOS?)
...

如果我不添加它CupertinoNavigationBar 重叠孩子：

我错过了什么？

这是整个项目和the screen。

【问题讨论】：

标签： ios flutter flutter-cupertino

【解决方案1】：

您只需为您孩子的小部件实现“安全区域”小部件（而不是上边距），以避免被库比蒂诺导航栏重叠。

CupertinoPageScaffold(
   navigationBar: CupertinoNavigationBar(),
   child: SafeArea(
            child: [Your widgets] // your children widgets 
        ),
)

【讨论】：

根据doc：“一个小部件通过足够的填充插入其子元素以避免操作系统的入侵”。在我的情况下，预计该区域被另一个小部件占用（CuperinoNavigationBar，这是故意的）。所以使用SafeArea 看起来像是一种解决方法。对此有什么想法吗？在这个用例的官方文档/来源中，SafeArea 的任何用法？

【解决方案2】：

您必须为CupertinoApp 设置barBackgroundColor。或者为CupertinoNavigationBar设置一个backgroundColor也可以解决这个问题。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      title: 'Flutter App',
      theme: CupertinoThemeData(
        barBackgroundColor: CupertinoColors.white,
      ),
      home: MyHomePage(title: 'Flutter App'),
    );
  }
}

或

CupertinoPageScaffold(
  navigationBar: CupertinoNavigationBar(
    middle: Text('MyStackPageState'),
    backgroundColor: CupertinoColors.white,
  ),
  child: Container(),
}

【讨论】：