Question

我想将DropdownButton旁边的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

尝试一下：

Container(
  decoration: BoxDecoration(
    border: Border(
      //TODO: Customize the underline here
      bottom: BorderSide(
        color: Colors.white70,
        width: 0.5,
      ),
    ),
  ),
  child: Row(
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [
      DropdownButton<String>(
        onChanged: (c) {},
        underline: Container(),
        items: [
          DropdownMenuItem<String>(
            child: Text('Email'),
          )
        ],
      ),
      Flexible(
        child: TextField(
          decoration: InputDecoration(
            border: InputBorder.none,
          ),
        ),
      ),
    ],
  ),
),

Answer 3

我不确定该解决方案是否对您有帮助，但我认为它比使用row更好。

 TextField(
    decoration: InputDecoration(
       prefix: DropdownButton(underline: Container(), ...)
    ),
 )

Answer 4

尝试一下：

Row(
    Row(mainAxisAlignment: MainAxisAlignment.end, crossAxisAlignment: CrossAxisAlignment.end
    children: <Widget>[
      Expanded(
        flex: 1
        child: ButtonTheme(
                   alignedDropdown: true,
                   child: DropdownButton<String>(
        ...
      ))),
       Expanded(
         flex: 6
         child: TextField(
          ...
        ),
      ),
    ],
  )

Answer 5

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

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

结果：

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

Answer 6

有点晚了，但是尽管布局略有不同，我还是遇到了同样的问题：

我使用TextFormField而不是TextField。
我使用DropdownButtonFormField而不是DropDownButton。
两个字段都包装在Flexible中的Row小部件中，其中mainAxisSize设置为MainAxisSize.min。
我的文本字段位于下拉菜单的左侧。

话虽如此，将crossAxisAlignment设置为CrossAxisAlignment.end对我来说是有效的。

尝试一下：

Row(
  mainAxisSize: MainAxisSize.min,  // see 3
  crossAxisAlignment: CrossAxisAlignment.start,
  children: <Widget>[
    Flexible(  // see 3
      child: DropdownButtonFormField<String>(  // see 2
        ...
      ),
    ),
    Flexible(
      child: TextFormField(  // see 1
        ...
      ),
    ),
  ],
)

Answer 7

您可以简单地在 InputDecoration 的 DropdownButtonFormField 中减少 contentPadding

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

7 个答案: