我有一个表单屏幕,我要使用以下模式来控制每个部分的比例:
var _mediaQueryData = MediaQuery.of(context);
var scaffoldWithoutAppBarHeight = _mediaQueryData.size.height - _mediaQueryData.viewPadding.vertical - kToolbarHeight;
var heightUnit = scaffoldWithoutAppBarHeight / 12;
这使我可以在这样的容器中使用它:
return Scaffold(
appBar: AppBar(
iconTheme: theme.appBarTheme.iconTheme,
actionsIconTheme: theme.appBarTheme.actionsIconTheme,
centerTitle: true,
title: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
_parking.name,
style: theme.appBarTheme.textTheme.body2
.copyWith(color: Colors.white),
),
Text(
_parking.address,
style: theme.appBarTheme.textTheme.body1
.copyWith(color: Colors.white60),
),
],
),
),
),
body: SingleChildScrollView(
child: Container(
height: heightUnit * 11, // <--HERE
child: Column(
children: <Widget>[
Container(
height: (heightUnit * 11) * 0.25, // <-- AND HERE
width: double.infinity,
alignment: Alignment.centerLeft,
padding: EdgeInsets.symmetric(
horizontal: 30,
vertical: 15,
),
child: //CHILD HERE,
Container(
height: (heightUnit * 11) * 0.75, // <-- AND HERE
width: double.infinity,
child: //CHILD HERE,
),
],
),
),
),
bottomNavigationBar: CheckoutBottomAppBar(
icon: FontAwesomeIcons.check,
label: 'Some text',
action: () {},
),
);
CheckoutBottomAppBar
小部件只是以下BottomAppBar
的包装:
BottomAppBar(
color: theme.primaryColor,
child: Container(
height: heightUnit - 2, <-- HERE IS THE PROBLEM
child: FlatButton(
textTheme: ButtonTextTheme.accent,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(icon),
SizedBox(width: 10),
Text(label),
],
),
onPressed: action,
),
),
);
我使用SingleChildScrollView
来避免键盘冲突,但是当屏幕上没有显示键盘时,高度必须精确以避免滚动小。一切正常,如果弹起键盘,SingleChildScrollView
允许我垂直滚动,但是当没有键盘时,BottomAppBar
会额外增加2像素的高度,如图所示,我不得不变通,但是我不知道(因为它花了我一些时间意识到)这种行为的来源,为什么BottomAppBar
为其高度增加了2个额外的像素?