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

时间:2019-12-17 18:11:27

标签: ios flutter flutter-cupertino

我有以下小部件树:

@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?)
...

iOS screenshot

如果我不添加,CupertinoNavigationBar会与孩子重叠:

overlapping

我想念什么?

这是整个项目,the screen

2 个答案:

答案 0 :(得分:0)

您只需要为孩子的小部件实现“ SafeArea”小部件(而不是顶部边距),以免被Cupertino导航栏覆盖。

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

答案 1 :(得分:0)

您必须为image, label = next(train_generator) # return a single iteration batch print(image.shape) #single batch list, if batch not specified (default is 32) print(image[0].shape) # single image shape print(image[0]) # single image output 设置let a = [1, 2, 3] let b = [] function assignB() { b = a } function reassignA() { console.log(b) // [1, 2, 3] let randomNumber = Math.floor(Math.random() * a.length) if (a[randomNumber] == 1) { a[randomNumber] = 2 console.log(b) // [2, 2, 3] } else { reassignA() } console.log(b) // [2, 2, 3] } function test() { assignB() reassignA() } test() 。或者为barBackgroundColor设置CupertinoApp也可以解决此问题。

backgroundColor

CupertinoNavigationBar