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

Question

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

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

我的代码如下：

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),
        ),
      ],
    );

如何改进我的代码？

Answer 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))),
                  ]),
            ),
          ])
        ])

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

What error am I making trying to get my desired UI in Flutter/Dart?

user-interface

alignment

dart

flutter