flutter - CupertinoPageScaffold 的子部件位于 CupertinoNavigationBar 后面

我正在尝试将内容放在 CupertinoNavigationBar 下方。

但是内容小部件被 CupertinoNavigationBar 部分覆盖。

我不明白为什么子 Column 没有垂直偏移，因此 CupertinoNavigationBar 没有覆盖顶部。

下面是一个截图，我的代码

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class PersonalInfoEditor extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: buildNavigationBar(context),
      child: Column(
        children: <Widget>[
          Text('Personal Info'),
          Text('t1'),
        ],
      ),
    );
  }

  CupertinoNavigationBar buildNavigationBar(BuildContext context) {
    return CupertinoNavigationBar(
        trailing: CupertinoButton(
          child: Text('Save', style: TextStyle(color: CupertinoColors.activeBlue)),
          onPressed: () => Navigator.pop(context),
        ));
  }
}

最佳答案

将您的 child 包裹在 SafeArea 中:

        return CupertinoPageScaffold(
              navigationBar: buildNavigationBar(context),
              child: SafeArea(
                child: Column(
                  children: <Widget>[
                    Text('Personal Info'),
                    Text('t1'),
                  ],
                ),
              ),
            );

并且不要忘记使用 CupertinoApp 而不是 MaterialApp更多信息:https://api.flutter.dev/flutter/cupertino/CupertinoPageScaffold-class.html

关于flutter - CupertinoPageScaffold 的子部件位于 CupertinoNavigationBar 后面，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52472220/