flutter - Flutter 水平和垂直对齐小部件

Question

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

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

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

我尝试使用ColumnandRow小部件或使用 a来实现这一点，GridView但我无法做到。

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

有人知道该怎么做吗？

谢谢你。

标签： flutterdartviewpositionalignment

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