使用DropDownItem时如何禁用键盘自动更正与联想功能

我实现了支持输入筛选的大型列表下拉选择器，功能正常运行，但键盘会弹出不必要的联想建议。尝试通过修改keyboardType为TextInputType.visiblePassword来自定义键盘以关闭联想，但并未生效，寻求解决方法。

现有代码 #

import 'package:flutter/material.dart';
import 'selector_theme.dart';

abstract class DropDownItem {
  String get name;
  String? get code;
}

class DropDownSelector extends StatefulWidget {
  const DropDownSelector({
    super.key,
    required this.itemsList,
    required this.hintText,
    this.selectedItem,
    this.onSelected,
  });
  final List<DropDownItem> itemsList;
  final DropDownItem? selectedItem;
  final void Function(DropDownItem?)? onSelected;
  final String hintText;

  @override
  State<DropDownSelector> createState() => _DropDownSelectorState();
}

class _DropDownSelectorState extends State<DropDownSelector> {
  DropDownItem? selectedItem;
  late final List<DropDownItem> itemsList;
  late final TextEditingController controller;

  @override
  void initState() {
    super.initState();
    controller = TextEditingController();
    itemsList = widget.itemsList;
    selectedItem = widget.selectedItem;
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: DropdownMenu<DropDownItem>(
        controller: controller,
        width: double.infinity,
        leadingIcon: const Icon(Icons.search),
        hintText: widget.hintText,
        requestFocusOnTap: true,
        keyboardType: TextInputType.visiblePassword,
        enableFilter: true,
        inputDecorationTheme: selectorDecorationTheme(context),
        onSelected: (DropDownItem? anItem) {
          FocusScope.of(context).unfocus();
          setState(() {
            selectedItem = anItem;
            widget.onSelected?.call(anItem);
          });
        },
        initialSelection: selectedItem,
        menuStyle: const MenuStyle(
          shape: WidgetStatePropertyAll(RoundedRectangleBorder(
              borderRadius: BorderRadius.all(Radius.circular(20)))),
        ),
        dropdownMenuEntries: itemsList
            .map<DropdownMenuEntry<DropDownItem>>((DropDownItem anItem) {
          return DropdownMenuEntry<DropDownItem>(
            value: anItem,
            label: anItem.name,
          );
        }).toList(growable: false),
      ),
    );
  }
}

解决方法 #

仅修改keyboardType不足以完全关闭输入法的联想建议，需要在DropdownMenu组件中额外添加两个参数，强制关闭自动纠正和联想功能：

• 添加autocorrect: false：关闭自动拼写纠正
• 添加enableSuggestions: false：关闭输入法联想建议

同时可以保留keyboardType: TextInputType.visiblePassword作为补充，进一步强化无联想的键盘行为。

修改后的完整代码 #

import 'package:flutter/material.dart';
import 'selector_theme.dart';

abstract class DropDownItem {
  String get name;
  String? get code;
}

class DropDownSelector extends StatefulWidget {
  const DropDownSelector({
    super.key,
    required this.itemsList,
    required this.hintText,
    this.selectedItem,
    this.onSelected,
  });
  final List<DropDownItem> itemsList;
  final DropDownItem? selectedItem;
  final void Function(DropDownItem?)? onSelected;
  final String hintText;

  @override
  State<DropDownSelector> createState() => _DropDownSelectorState();
}

class _DropDownSelectorState extends State<DropDownSelector> {
  DropDownItem? selectedItem;
  late final List<DropDownItem> itemsList;
  late final TextEditingController controller;

  @override
  void initState() {
    super.initState();
    controller = TextEditingController();
    itemsList = widget.itemsList;
    selectedItem = widget.selectedItem;
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: DropdownMenu<DropDownItem>(
        controller: controller,
        width: double.infinity,
        leadingIcon: const Icon(Icons.search),
        hintText: widget.hintText,
        requestFocusOnTap: true,
        keyboardType: TextInputType.visiblePassword,
        // 新增关闭联想和自动纠正的参数
        autocorrect: false,
        enableSuggestions: false,
        enableFilter: true,
        inputDecorationTheme: selectorDecorationTheme(context),
        onSelected: (DropDownItem? anItem) {
          FocusScope.of(context).unfocus();
          setState(() {
            selectedItem = anItem;
            widget.onSelected?.call(anItem);
          });
        },
        initialSelection: selectedItem,
        menuStyle: const MenuStyle(
          shape: WidgetStatePropertyAll(RoundedRectangleBorder(
              borderRadius: BorderRadius.all(Radius.circular(20)))),
        ),
        dropdownMenuEntries: itemsList
            .map<DropdownMenuEntry<DropDownItem>>((DropDownItem anItem) {
          return DropdownMenuEntry<DropDownItem>(
            value: anItem,
            label: anItem.name,
          );
        }).toList(growable: false),
      ),
    );
  }
}

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