flutter - 如何相互约束不同行的项目？

Question

以下是我想要实现的屏幕截图

以下是我的flutter代码

Row(
              children: <Widget>[
                const MyProfileText(
                  text: "Name",
                ),

                const MyProfileText(
                  text: ":",
                ),
                const SizedBox(
                  width: 4,
                ),
                Flexible(
                  child: Container(
                    height: 30,
                    padding: const EdgeInsets.only(
                      right: 10,
                    ),
                    child: TextField(
                      cursorColor: black1,
                      style: buildTextStyle(),
                      decoration: buildTextDecoration(),
                    ),
                  ),
                )
              ],
            ),

我在column widget. 我的输出如下

如您所见，由于标签名称的长度不同，因此在所有三种情况下文本字段的宽度都不相同。我知道我可以SizedBox在标签和文本字段之间使用不同的宽度，但这感觉不对。是否可以限制或具有相等的宽度TextField，我们在 Native Android 中使用Constraint Layout

标签： flutterdartandroid-constraintlayout

Answer 1

您也可以将左侧元素放在 aRow内Flexible，这样根Row将有两个Flexible具有相同宽度的项目。

这是一个简单的例子：

Row(
  children: <Widget>[
    Flexible(
      child: Row(
        children: <Widget>[
          Text("Name"),
          Text(":"),
          SizedBox(width: 4),
        ],
      ),
    ),
    Flexible(
      child: Container(
        height: 30,
        padding: const EdgeInsets.only(
          right: 10,
        ),
        child: TextField(),
      ),
    )
  ],
)

然后，如果你想Text("Name")占据所有可用空间，用 包裹它Expanded，像这样：

Expanded(child: Text("Name"))