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

时间:2020-06-23 13:22:53

标签: flutter dart view position alignment

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

enter image description here

所以我想做的是创建一个左上角带有Text的小部件(此小部件的大小不是恒定的,并且取决于其中的文本)。 我正在尝试将其他2个小部件与Text对齐:

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

我尝试使用ColumnRow小部件或GridView实现此功能,但我无法做到这一点。

此自定义窗口小部件的整体大小也必须缩小。

有人知道该怎么做吗?

谢谢。

1 个答案:

答案 0 :(得分:0)

这有效

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