我试图在 Flutter/Dart 中获得我想要的 UI 时犯了什么错误？答案

【问题标题】：What error am I making trying to get my desired UI in Flutter/Dart?我试图在 Flutter/Dart 中获得我想要的 UI 时犯了什么错误？
【发布时间】：2020-12-20 18:50:57
【问题描述】：

我尝试使用以下代码实现图像突出显示部分所示的效果，但这会产生违反直觉和错误的结果。

为了避免混淆，我说的是较小容器的中间与橙色大容器底部对齐的效果

我的代码如下：

Size size = MediaQuery.of(context).size;
    double height = size.height;
    double width = size.width;

    return Column(
      children: [
        Expanded(
          flex: 3,
          child: Container(color: Colors.white),
        ),
        Positioned(
          top: height * (3 / 5) - height * 0.15 / 2,
          child: Container(
            color: Colors.green,
            height: height * 0.15,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Container(
                  height: height * 0.15,
                  width: width * 0.45,
                  color: Colors.red,
                ),
                Container(
                  height: height * 0.15,
                  width: width * 0.45,
                  color: Colors.blue,
                )
              ],
            ),
          ),
        ),
        Expanded(
          flex: 5,
          child: Container(color: Colors.black),
        ),
      ],
    );

如何改进我的代码？

【问题讨论】：

使用 Stack 获取此视图。

标签： flutter user-interface dart alignment

【解决方案1】：

您将需要使用 Stack 小部件来实现此结果。

 Stack(children: [
          Container(
              height: 230,
              decoration: BoxDecoration(
                color: Colors.orange,
              )),
          Column(children: [
            Expanded(
              child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    Container(
                        height: 100,
                        width: 100,
                        decoration: BoxDecoration(
                            color: Colors.red,
                            borderRadius: BorderRadius.circular(22))),
                    Container(
                        height: 100,
                        width: 100,
                        decoration: BoxDecoration(
                            color: Colors.red,
                            borderRadius: BorderRadius.circular(22))),
                    Container(
                        height: 100,
                        width: 100,
                        decoration: BoxDecoration(
                            color: Colors.red,
                            borderRadius: BorderRadius.circular(22))),
                  ]),
            ),
          ])
        ])

【讨论】：