bottomNavigationBar只能在热重载时做我想要的

时间:2018-06-26 14:03:39

标签: flutter flutter-layout

我想为我的应用设置一个静态的底部栏。 此栏应显示中间设备的小时数,而右边显示另一设备读取的温度。

here is an example of what I want

我的问题只是定位/大小。

当我启动它(使用android studio,在真实或虚拟设备上)时,它不起作用:预览不是我所需要的,我选择的尺寸似乎已经改变。

preview when I start on a device

但是当我热重新加载它时,它就变成了我想要的样子:

while hot-reloading 问题在于最终的应用不是热加载的应用。.

我可能已经确定问题所在, 我使用MediaQuery.of(context).size和一个生成器来获取上下文,以适合所有考虑大小的设备。此解决方案一定是肮脏的,但我什么也找不到。

这是我的代码,希望情况清楚...

return new MediaQuery(
    data: MediaQueryData.fromWindow(ui.window),
    child: Builder(
        builder: (context) {
          return  new Builder(
              builder: (
                  context) {
                return
                new MaterialApp(
                    home: new DefaultTabController(
                      length: 6,
                      child: Scaffold(
                        bottomNavigationBar:



                          new Container(
                            color: Colors.white,
                            width: MediaQuery.of(context).size.width,
                            height: MediaQuery.of(context).size.height*0.1,
                            alignment: Alignment.centerRight,
                            child: new Container(
                                      color: Colors.blue,
                                      width: MediaQuery.of(context).size.width* 2/3,
                                      alignment: Alignment.centerRight,
                                      child: new Row(
                                                children: <Widget>[
                                                  new Expanded(child: new Container(
                                                    color : Colors.yellow,
                                                    child: new Text('22 : 22' ),
                                                    alignment: Alignment.center,
                                                  )),
                                                  new Expanded(child:new Container(
                                                    color: Colors.pink,
                                                    child: new Text(' 37.8 °C'),
                                                    margin: new EdgeInsets.all(MediaQuery.of(context).size.width*0.02),
                                                    alignment: Alignment.centerRight,
                                                  ))
                                                ],
                                              ),
                                    ),


                          ),

感谢您的帮助。

2 个答案:

答案 0 :(得分:0)

您可以使用Stack并将其中一个窗口小部件绝对放置在另一个窗口之上:

new Stack(
    children: <Widget> [
        new Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget> [
                new Text(time),
            ],
        ),
        new Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: <Widget> [
                new Text(temperature)
            ],
        ),
    ],
),

其中timetemperature是在状态(Stateful Widgets)中设置的变量。然后将其包括在bottomNavigationBar中。

答案 1 :(得分:0)

我最终将我以前的代码添加到StatelessWidget中,并在bottomNavigationBar的{​​{1}}字段中调用它:它可以完成工作。

然后我在创建的Scaffold中调用MediaQuery.of(context)

谢谢。