Flutter如何为Autocomplete输入框设置文本内边距

问题描述 #

开发Flutter应用时，需要为Autocomplete自动补全输入框设置文本内边距。
对于普通TextFormField组件，通过如下配置即可实现目标效果：

TextFormField(
  decoration: const InputDecoration(
    border: UnderlineInputBorder(),
    contentPadding: EdgeInsets.only(left: 12.0),
  ),
)

但无法在默认的Autocomplete组件上通过相同方式设置内边距，初始编写的Autocomplete组件代码如下：

class AutocompleteField extends StatelessWidget {
  const AutocompleteField({Key? key}) : super(key: key);

  static const List<String> _kOptions = <String>[
    'Superdry',
    'H&M',
  ];

  @override
  Widget build(BuildContext context) {
    return Autocomplete<String>(
      optionsBuilder: (TextEditingValue textEditingValue) {
        if (textEditingValue.text == '') {
          return const Iterable<String>.empty();
        }
        return _kOptions.where((String option) {
          return option.contains(textEditingValue.text.toLowerCase());
        });
      },
      onSelected: (String selection) {
        debugPrint('You just selected $selection');
      },
    );
  }
}

截图上方为当前Autocomplete输入框的实际效果，需要调整其样式，和下方普通输入框的显示效果保持一致。

可行实现方案 #

Autocomplete组件暴露了fieldViewBuilder回调，支持完全自定义输入视图的渲染，只需要在这个回调中返回配置了对应内边距的TextFormField即可，同时要保证绑定组件传入的控制器、焦点节点和提交回调，避免破坏自动补全的原有逻辑。
修改后的完整可运行代码：

class AutocompleteField extends StatelessWidget {
  const AutocompleteField({Key? key}) : super(key: key);

  static const List<String> _kOptions = <String>[
    'Superdry',
    'H&M',
  ];

  @override
  Widget build(BuildContext context) {
    return Autocomplete<String>(
      optionsBuilder: (TextEditingValue textEditingValue) {
        if (textEditingValue.text == '') {
          return const Iterable<String>.empty();
        }
        return _kOptions.where((String option) {
          return option.contains(textEditingValue.text.toLowerCase());
        });
      },
      onSelected: (String selection) {
        debugPrint('You just selected $selection');
      },
      // 自定义输入框视图
      fieldViewBuilder: (
        BuildContext context,
        TextEditingController controller,
        FocusNode focusNode,
        VoidCallback onSubmit,
      ) {
        return TextFormField(
          controller: controller,
          focusNode: focusNode,
          onFieldSubmitted: (_) => onSubmit(),
          decoration: const InputDecoration(
            border: UnderlineInputBorder(),
            // 配置和普通输入框一致的左内边距
            contentPadding: EdgeInsets.only(left: 12.0),
          ),
        );
      },
    );
  }
}

• 如果需要调整其他输入框样式（比如前缀图标、提示文字、边框样式等），都可以直接在fieldViewBuilder返回的TextFormField的InputDecoration中配置，和普通输入框的写法完全一致。
• 不要在自定义的输入框中自行创建TextEditingController和FocusNode，必须使用Autocomplete组件通过回调传入的实例，否则选项匹配、选中填充等核心逻辑会失效。

内容的提问来源于stack exchange，提问作者jansemrau