时间戳

首页 > 解决方案 > 将 TextFormField 内的 Flutter DropdownButton 作为前缀

flutter - 将 TextFormField 内的 Flutter DropdownButton 作为前缀

问题描述

根据标题，我想在DropdownButton内部添加一个TextFormFieldas prefix（或prefixIcon？）。文本字段用于金额，下拉菜单用于其货币。

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

怎么做？

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

标签： flutter

解决方案

问题

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

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

解决方案

采取另一种方法，一种方法可能是将 aContainer与您想要的装饰一起使用，包装Row包含DropdownButton/PopupMenuButton和TextFormField.

实施

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

如果您使用 a 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(),
          ),
        ],
      ),
    ),
  ],
)

推荐阅读