我有以下小部件树:
@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
与孩子重叠:
我错过了什么?
这是整个项目和屏幕。
您只需要为您的孩子的小部件实现“SafeArea”小部件(而不是上边距),以避免被库比蒂诺导航栏重叠。
CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(),
child: SafeArea(
child: [Your widgets] // your children widgets
),
)
您必须将
barBackgroundColor
设置为 CupertinoApp
。或者为 backgroundColor
设置 CupertinoNavigationBar
也可以解决这个问题。
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(),
}
使用 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,
);
},
),
)