flutter - 如何在颤动中实现带有下拉前缀的文本字段

Question

我怎样才能在颤振中实现这一目标？我尝试将 DropdownButton 用作 a 中的子级，prefixIcon但InputDecoration效果TextFormField不佳。我很想知道人们在面对这样的挑战时将如何解决这个问题。

标签： flutter

Answer 1

您可以使用 aListTile并将 and 放入a并将DropDownButtonthe设置为。用于制作圆角。TextFieldRowRowtitleListTileClipRRect

ListTile(
  title: ClipRRect(
    borderRadius: BorderRadius.circular(50.0),
    child: Container(
      color: Colors.black12,
      child: Row(
        children: [
          _buildDropDownButton('USD'),
          Expanded(
            child: TextField(
              decoration: InputDecoration(
                border: InputBorder.none,
              ),
              controller: textController,
              style:
              TextStyle(fontSize: 20.0, color: Colors.black),
              keyboardType:
              TextInputType.numberWithOptions(decimal: true),
            ),
          ),
        ],
      ),
    ),
  ),
)

Widget _buildDropDownButton(String currencyCategory) {
  return Container(
    color: Colors.deepPurple,
    child: Padding(
      padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 5),
      child: DropdownButtonHideUnderline(
        child: DropdownButton(
          iconEnabledColor: Colors.white,
          style: TextStyle(
            color: Colors.white,
          ),
          dropdownColor: Colors.deepPurple,
          value: currencyCategory,
          items: ['USD', 'EUR']
          .map((String value) => DropdownMenuItem(
            value: value,
            child: Row(
              children: <Widget>[
                Text(value),
              ],
            ),
          ))
          .toList(),
          onChanged: (value) {},
        ),
      ),
    ),
  );
}

结果：