颤动：同一行中的多个表单字段，如“填空”样式

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，没有flex，这意味着两个widget都具有相同的宽度。

内部行包含两个Expanded：一个flex因子为3，另一个flex为4，第一个widget（TextField）长度为总行宽的3/7，而Text的宽度为4/7。