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

在上面的代码中，第一行包含两个没有伸缩的Expanded，这意味着两个小部件的宽度相同。

里面的行包含两个Expanded：一个的flex因子为3，另一个的flex为4，第一个窗口小部件的（TextField）长度为行总宽度的3/7，而Text的宽度为4 / 7。