樣式 Flutter 視覺上自動完成匹配 TextFormField 小部件？

Question

我在設置自動完成小部件以匹配並適合我的 TextFormField 小部件時遇到問題：

我有幾個問題：

1. 無法顯示提示文本

2. 圖標看起來左側有一些不可見的填充

    TextFormField( controller: manufacturerController, decoration: const InputDecoration( icon: Icon(Icons.store), hintText: 'Manufacturer', labelText: 'Manufacturer', ), ), InputDecorator( decoration: const InputDecoration( prefixIcon: Icon(Icons.style), hintText: 'Item Category', //labelText: 'Item Category', border: InputBorder.none, ), child: Autocomplete<String>( optionsBuilder: (TextEditingValue textEditingValue) { if (textEditingValue.text == '') { return const Iterable<String>.empty(); } return itemTypeList.where((String option) { return option.contains(textEditingValue.text.toLowerCase()); }); }, onSelected: (String selection) { debugPrint('You just selected $selection'); }, ),

Answer 1

在您設置了 Textfield 小部件圖標和 AutoComplete 小部件 prefixIcon 的代碼中嘗試以下代碼。 參考InputDecoration

Column(
  children: [
    TextFormField(
      controller: manufacturerController,
      decoration: const InputDecoration(
        icon: Icon(Icons.store),//with icon
        // prefixIcon: Icon(Icons.store), //with prefixIcon
        hintText: 'Manufacturer',
        labelText: 'Manufacturer',
      ),
    ),
    InputDecorator(
      decoration: const InputDecoration(
        icon: Icon(Icons.style),//with icon
        //prefixIcon: Icon(Icons.style), //with prefixIcon
        hintText: 'Item Category',
        //labelText: 'Item Category',
        border: InputBorder.none,
      ),
      child: Autocomplete<String>(
        optionsBuilder: (TextEditingValue textEditingValue) {
          if (textEditingValue.text == '') {
            return const Iterable<String>.empty();
          }
          return itemTypeList.where((String option) {
            return option.contains(textEditingValue.text.toLowerCase());
          });
        },
        onSelected: (String selection) {
          debugPrint('You just selected $selection');
        },
      ),
    ),
  ],
),

帶圖標的結果屏幕->

帶有prefixIcon->的結果屏幕