Flutter Autocomplete组件样式匹配TextFormField问题求助

针对你遇到的两个样式问题，直接给出修改方案：

问题1：提示文本无法显示 #

Autocomplete默认的输入组件不会自动继承外层InputDecorator的hint配置，需要自定义它的fieldViewBuilder，将提示文本直接配置到内部的TextField上。

问题2：图标左侧内边距不一致 #

TextFormField使用的是icon属性（属于输入框外部的前置图标），而你给InputDecorator用的是prefixIcon（输入框内部的前置图标），两者布局逻辑不同导致内边距差异。统一使用icon属性即可对齐样式。

修改后的完整代码 #

TextFormField(
  controller: manufacturerController,
  decoration: const InputDecoration(
    icon: Icon(Icons.store),
    hintText: 'Manufacturer',
    labelText: 'Manufacturer',
  ),
),
InputDecorator(
  decoration: const InputDecoration(
    icon: Icon(Icons.style), // 替换prefixIcon为icon，和TextFormField保持一致
    hintText: 'Item Category',
    border: InputBorder.none,
  ),
  child: Autocomplete<String>(
    // 自定义输入框，传递提示文本
    fieldViewBuilder: (context, textEditingController, focusNode, onFieldSubmitted) {
      return TextField(
        controller: textEditingController,
        focusNode: focusNode,
        onSubmitted: onFieldSubmitted,
        decoration: const InputDecoration(
          hintText: 'Item Category', // 配置输入框的提示文本
          border: InputBorder.none,
          contentPadding: EdgeInsets.zero, // 移除输入框内部多余内边距
        ),
      );
    },
    optionsBuilder: (TextEditingValue textEditingValue) {
      if (textEditingValue.text.isEmpty) {
        return const Iterable<String>.empty();
      }
      return itemTypeList.where((String option) {
        return option.toLowerCase().contains(textEditingValue.text.toLowerCase());
      });
    },
    onSelected: (String selection) {
      debugPrint('You just selected $selection');
    },
  ),
)

补充说明 #

• 如果需要显示labelText，直接在InputDecorator的decoration中添加该属性即可，写法和TextFormField完全一致。
• 若想保留prefixIcon，可以通过prefixIconConstraints调整内边距来匹配icon的布局，示例：

  prefixIcon: Icon(Icons.style),
  prefixIconConstraints: BoxConstraints(minWidth: 48, minHeight: 48), // 匹配icon默认尺寸
  

内容的提问来源于stack exchange，提问作者Ten Digit Grid