将 TextFormField 内的 Flutter DropdownButton 作为前缀答案

【问题标题】：Flutter DropdownButton inside TextFormField as prefix将 TextFormField 内的 Flutter DropdownButton 作为前缀
【发布时间】：2020-02-13 10:38:58
【问题描述】：

根据标题，我想在TextFormField 中添加一个DropdownButton 作为prefix（或prefixIcon？）。文本字段是金额，下拉菜单是货币。

我的直接方法在视觉上有效，但我无法点击下拉菜单来显示列表。每次我点击它时，它都会显示（并立即隐藏）文本字段本身的键盘。

怎么做？

TextFormField(
    initialValue: '10.00',
    decoration: InputDecoration(
        prefix: DropdownButtonHideUnderline(
            child: DropdownButton(
                items: CURRENCY_CODES,
                onChanged: _onCurrencyChanged,
                value: _currency,
            ),
        ),
    ),
),

【问题讨论】：

你能用你正在采取的方法发布代码吗？
您是否尝试过使用两个单独的小部件将它们与Row 包装起来？我不认为prefix 可以与DropdownButton 一起使用。根据文档，prefix can be used, for example, to add some padding to text that would otherwise be specified using prefixText, or to add a custom widget in front of the input.
@PabloBarrera 问题已更新。
@Marat 我将文本字段自定义为带有阴影的圆角，所以我更喜欢将所有内容都放在里面。

标签： flutter

【解决方案1】：

问题

当您点击prefix 中包含的Widget 时，TextFormField 将聚焦并出现键盘。但是由于Widget 是DropdownButton，当显示DropdownItems 时，键盘被关闭，奇怪的是DropdownItems 也被关闭。

如果您尝试使用PopupMenuButton 而不是DropdownButton，则会发生类似的情况：显示键盘然后关闭，但在这种情况下PopupMenuItems 不会关闭。为此，我可以使用焦点侦听器和标志来解决此问题，但这并不好。

解决方案

采取另一种方法，一种方法是使用带有您想要的装饰的Container，包装一个包含DropdownButton / PopupMenuButton 和TextFormField 的Row。

实施

如果您使用DropdownButton，当您聚焦TextFormField 然后点击DropdownButton，键盘将被关闭，而奇怪的是DropdownItems 也被关闭。这是一个未解决的问题：DropdownButton bad behaviour when tapped and keyboard is showing

如果你使用PopupMenuButton，你可以这样做：

Wrap(
  children: <Widget>[
    Container(
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(16.0),
        boxShadow: [BoxShadow()],
      ),
      child: Row(
        children: <Widget>[
          PopupMenuButton(
            onSelected: (c) {},
            child: Row(
              children: <Widget>[
                Text(_currency),
                Icon(Icons.arrow_drop_down)
              ],
            ),
            itemBuilder: (context) => CURRENCY_CODES
                .map((c) => PopupMenuItem(value: c, child: Text(c)))
                .toList(),
          ),
          Flexible(
            child: TextFormField(),
          ),
        ],
      ),
    ),
  ],
)

【讨论】：