Flutter BottomAppBar的最终高度比一组高2像素

问题描述 投票:0回答:1

我有一个表单屏幕,我要使用以下模式来控制每个部分的比例:

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个额外的像素?

flutter dart
1个回答
© www.soinside.com 2019 - 2024. All rights reserved.