Flutter 水平和垂直对齐小部件

Question

我正在做一个 Flutter 项目。我正在尝试创建一个如下图所示的小部件，但我无法做到。

所以我要做的是在左上角创建一个带有Text 的小部件（这个小部件的大小不是恒定的，取决于其中的文本）。 我正在尝试将 2 个其他小部件与 Text 对齐：

• Widget 1 水平对齐并与 Text 小部件居中，在其右侧，中间没有空格
• Widget 2 的右边缘与Text 小部件的右边缘垂直对齐，并位于其下方（两个小部件之间没有空间）。

我尝试使用 Column 和 Row 小部件或 GridView 来实现此功能，但我无法做到。

此自定义小部件的整体尺寸也必须缩小。

有人知道怎么做这样的事情吗？

谢谢。

Answer 1

这行得通

Container(
      width: double.infinity,
      height: 300,
      color: Colors.grey[200],
      child: Column(
        children: <Widget>[
          Row(
            children: [
              Flexible(
                flex: 2,
                child: Container(
                  height: 200,
                  color: Colors.blue,
                ),
              ),
              Flexible(
                flex: 1,
                child: Container(
                  height: 100,
                  color: Colors.green,
                ),
              ),
            ],
          ),
          Row(
            children: <Widget>[
              Flexible(
                flex: 2,
                child: Align(
                  alignment: Alignment.centerRight,
                  child: Container(
                    width: 150,
                    height: 100,
                    color: Colors.orange,
                  ),
                ),
              ),
              Flexible(
                flex: 1,
                child: Container(),
              ),
            ],
          ),
        ],
      ),
    ),