Flutter：同一行中的多个表单字段，如 'Fill in the Blanks' 样式

Question

有什么有效的方法可以实现吗？

Textfields in a row

Answer 1

使用 Row 应该就足够了。如果您需要更多地控制子部件的宽度，请考虑使用 Expanded 和它的 flex 属性。

Row(
  children: <Widget>[
    Expanded(
      child: Row(
        children: <Widget>[
          Expanded(
            flex: 3,
            child: TextField(
              decoration: InputDecoration(
                  hintText: 'Time'),
            ),
          ),
          Expanded(
            flex: 4,
            child: Text("(in mins)/"),
          ),
        ],
      ),
    ),
    Expanded(
      child: Row(
        children: <Widget>[
          Expanded(
            flex: 3,
            child: TextField(
              decoration: InputDecoration(
                  hintText: 'Whistle'),
            ),
          ),
          Expanded(
            flex: 4,
            child: Text("(whistles)"),
          ),
        ],
      ),
    ),
  ],
),

在上面的代码中，第一行包含两个没有 flex 的 Expanded，这意味着两个 widget 将具有相同的宽度。

内行包含两个扩展：一个弹性系数为 3，一个弹性系数为 4，第一个小部件（TextField）的长度将是总行宽的 3/7，而文本的宽度将是4/7.

Flutter：同一行中的多个表单字段，如 'Fill in the Blanks' 样式

Flutter: Muliple Form fields in a same row like 'Fill in the Blanks' style

flutter

flutter-layout