Flutter布局：如何垂直扩展小部件

Question

我正在努力了解如何布局我的小部件，以便它们占据整个黄色空间。更具体地说，我希望将“ hero”和“ boss”小部件展开以占据屏幕上的可用空间（不包括键盘）

我当前的代码实现了以下结果

我想在下面得到以下结果

这是我的代码。我使用resizeToAvoidBottomInset: true来确保在弹出键盘时调整窗口小部件的大小

Widget build(BuildContext context) {
    return Container(
        child: Scaffold(
            resizeToAvoidBottomInset: true,
            backgroundColor: kColorPrimary,
            appBar: AppBar(
              backgroundColor: kColorPrimaryLight,
              title: Text('Time to Spell'),
            ),
            body: ModalProgressHUD(
                inAsyncCall: showSpinner,
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: SafeArea(
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: <Widget>[
                        Expanded(
                          child: Container(
                            height: 100,
                            color: Colors.amberAccent,
                            child: Column(
                              children: <Widget>[
                                    Row(
                                      children: <Widget>[
                                        Expanded(
                                          flex: 2,
                                          child: Container(
                                            color: Colors.blue,
                                            child: Text(
                                              result,
                                              textAlign: TextAlign.center,
                                              style: kTitleTextStyle,
                                            ),
                                          ),
                                        ),
                                        Expanded(
                                          flex: 1,
                                          child: Container(
                                            color: Colors.blue,
                                            child: Text(
                                              'Timer: 2:00',
                                              textAlign: TextAlign.center,
                                            ),
                                          ),
                                        ),
                                  ],
                                ),

                                Row(
                                  children: <Widget>[
                                    Expanded(
                                      child: Container(
                                        height: 279,
                                        color: Colors.purple,
                                        child: Padding(
                                          padding: const EdgeInsets.all(8.0),
                                          child: Container(
                                            color: Colors.white,
                                            child: Text(
                                              'Hero',
                                              textAlign: TextAlign.center,
                                            ),
                                          ),
                                        ),
                                      ),
                                    ),
                                    Expanded(
                                      child: Container(
                                        height: 279,
                                        color: Colors.greenAccent,
                                        child: Padding(
                                          padding: const EdgeInsets.all(8.0),
                                          child: Container(
                                            color: Colors.white,
                                            child: Text(
                                              'Boss',
                                              textAlign: TextAlign.center,
                                            ),
                                          ),
                                        ),
                                      ),
                                    ),
                                  ],
                                ),
                              ],
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                ))));
  }

Answer 1

尝试一下。我也添加了评论。如果有不清楚的地方，请随时发表评论。

    @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Container(
        color: Colors.amberAccent,
        child: Column(
          children: <Widget>[
            Row(
              children: <Widget>[
                Expanded(
                  flex: 2,
                  child: Container(
                    color: Colors.blue,
                    child: Text(
                      "Click start",
                      textAlign: TextAlign.center,
                    ),
                  ),
                ),
                Expanded(
                  flex: 1,
                  child: Container(
                    color: Colors.blue,
                    child: Text(
                      'Timer: 2:00',
                      textAlign: TextAlign.center,
                    ),
                  ),
                ),
              ],
            ),
            Expanded(
              child: Row(
                children: <Widget>[
                  //child 1 of row takes half of the space
                  Expanded(
                    child: Column(
                      children: <Widget>[
                        //expanding the container to the bottom
                        Expanded(
                          child: Container(
                            //maximizing the width of the container
                            width: double.infinity,
                            color: Colors.purple,
                            child: Padding(
                              padding: const EdgeInsets.all(8.0),
                              child: Container(
                                color: Colors.white,
                                child: Text(
                                  'Hero',
                                  textAlign: TextAlign.center,
                                ),
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                  //child 2 of row takes half of the space
                  Expanded(
                    child: Column(
                      children: <Widget>[
                        //expanding the container to the bottom
                        Expanded(
                          child: Container(
                            //maximizing the width of the container
                            width: double.infinity,
                            color: Colors.greenAccent,
                            child: Padding(
                              padding: const EdgeInsets.all(8.0),
                              child: Container(
                                color: Colors.white,
                                child: Text(
                                  'Boss',
                                  textAlign: TextAlign.center,
                                ),
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }