如何在 Flutter 中将 DropdownButton 与 TextField 对齐？

Question

我想在 aDropdownButton旁边垂直对齐a TextField。

  Row(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      DropdownButton<String>(
        ...
      ),
      Flexible(
        child: TextField(
          ...
        ),
      ),
    ],
  )

目前的行为是：

如您所见，底线未对齐。我想这是由于身高差异而发生的。什么是解决这个问题的好习惯？（我猜没有使用固定高度）

---

我的最终目标是这样的：

在两条线和文字DropdownButton和TextField垂直对齐。

Answer 1

希望这有帮助，但我成功了！为我做到这一点的关键道具是contentPadding将行中的小部件设置为0.0

Row(
   children: <Widget>[
       Flexible(
       flex: 2,
       child: TextFormField(
          keyboardType: TextInputType.number,
          inputFormatters: <TextInputFormatter>[
          WhitelistingTextInputFormatter.digitsOnly
          ],
          decoration: InputDecoration(
             labelText: 'Width',
             contentPadding: EdgeInsets.all(0.0),
          ),
          onChanged: (String newValue) {
             _stashItem.width = "$newValue $_widthUnit";
          },
          )),
          Flexible(
          flex: 1,
          child: DropdownButtonFormField(
          decoration: InputDecoration(
             contentPadding: EdgeInsets.all(0.0)
          ),
          value: _widthUnit,
          items: ['cm', 'm', 'in', 'ft', 'yd']
              .map((String unit) =>
                 DropdownMenuItem<String>(
                   value: unit, child: Text(unit)))
                   .toList(),
          onChanged: (value) => setState(() {
              _widthUnit = value;
          })),
          )
          ],
       ),

Answer 2

我最终编辑了TextField的内容的填充，并使用CrossAxisAlignment.center而不是CrossAxisAlignment.start：

  Row(
    crossAxisAlignment: CrossAxisAlignment.center,
    children: <Widget>[
      DropdownButton<String>(
        ...
      ),
      Flexible(
        child: TextField(
          decoration: InputDecoration(
            contentPadding: EdgeInsets.all(6.0),
          ),
        ),
      ),
    ],
  )

结果：

（由于添加了 SizedBox，您会看到它们之间有空间）