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

颤振水平和垂直对齐小部件

1 个答案: