ios 为什么Flutter的CupertinoNavigationBar与CupertinoPageScaffold中的子项重叠？

ttvkxqim 于 12个月前发布在 iOS

关注(0)|答案(3)|浏览(116)

我有以下widget tree：

@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);
  }

字符串
只有在我将顶部边距添加到主体部件时，它看起来才可以：

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

型

的数据
如果我不添加它，CupertinoNavigationBar会与子节点重叠：

的
我错过了什么？
下面是整个项目和the screen。

ios

来源：https://stackoverflow.com/questions/59379899/why-flutters-cupertinonavigationbar-overlaps-children-in-cupertinopagescaffold

3条答案

按热度按时间

hwamh0ep1#

你只需要在你孩子的小部件上实现“安全区域”小部件（而不是顶部边距），以避免被库比蒂诺导航栏覆盖。

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

字符串

赞(0）回复(0）举报 12个月前

2vuwiymt2#

你必须为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(),
}

型

赞(0）回复(0）举报 12个月前

2nc8po8w3#

使用SafeArea将删除CupertinoNavigationBar的半透明效果，使用媒体查询的填充：

CupertinoPageScaffold(
      navigationBar: const CupertinoNavigationBar(
        middle: Text('My App'),
      ),
      child: Builder(
        builder: (context) {
          return Padding(
            padding: EdgeInsets.only(
              top: MediaQuery.of(context).padding.top,
            ),
            child: child,
          );
        },
      ),
    )

字符串

赞(0）回复(0）举报 12个月前

我来回答

ios 为什么Flutter的CupertinoNavigationBar与CupertinoPageScaffold中的子项重叠？

3条答案

相关问题

热门标签

最新问答