Flutter中RawAutoComplete初始值设置问题求助

问题核心 #

你遇到的问题本质是：

• RawAutocomplete的initialValue参数在存在textEditingController时会被忽略，官方文档也明确说明了这一点
• TextFormField不能同时设置controller和initialValue，因为controller本身负责管理输入框的文本状态，两者冲突会触发断言错误

正确解决方案 #

不要依赖RawAutocomplete的initialValue，而是提前初始化自己的TextEditingController并设置初始值，然后在RawAutocomplete的fieldViewBuilder中直接使用这个自定义controller，而非使用参数传入的controller。

具体步骤：

1. 在你的State类中提前初始化itemTypeController，并设置初始文本
2. 移除RawAutocomplete的initialValue参数
3. 在fieldViewBuilder中直接使用自定义的itemTypeController，不要覆盖为参数传入的controller
4. 记得在State的dispose方法中销毁controller，避免内存泄漏

修改后的完整代码 #

// 在你的State类中添加：
final TextEditingController itemTypeController = TextEditingController(text: "你的初始值"); // 这里设置初始值
late FocusNode _focusNode;

@override
void initState() {
  super.initState();
  _focusNode = FocusNode();
}

@override
void dispose() {
  itemTypeController.dispose();
  _focusNode.dispose();
  super.dispose();
}

// 然后是你的布局代码：
LayoutBuilder(
  builder: (context, constraints) => InputDecorator(
    decoration: const InputDecoration(
      icon: Icon(Icons.style),
      border: InputBorder.none,
    ),
    child: RawAutocomplete<String>(
      // 移除initialValue参数
      optionsBuilder: (TextEditingValue textEditingValue) {
        if (textEditingValue.text == '') {
          return itemTypeList;
        }
        return itemTypeList.where((String option) {
          return option
              .toLowerCase()
              .contains(textEditingValue.text.toLowerCase());
        });
      },
      optionsViewBuilder: (BuildContext context,
          AutocompleteOnSelected<String> onSelected,
          Iterable<String> options) {
        return Align(
          alignment: Alignment.topLeft,
          child: Material(
            elevation: 4.0,
            child: SizedBox(
              height: 200.0,
              width: constraints.biggest.width * 0.8,
              child: ListView.builder(
                padding: const EdgeInsets.all(8.0),
                itemCount: options.length,
                itemBuilder: (BuildContext context, int index) {
                  final String option = options.elementAt(index);
                  return GestureDetector(
                    onTap: () {
                      onSelected(option);
                    },
                    child: ListTile(
                      title: Text(option),
                    ),
                  );
                },
              ),
            ),
          ),
        );
      },
      fieldViewBuilder:
          (context, _, focusNode, onEditingComplete) {
        // 这里不再将参数的controller赋值给itemTypeController，直接用自己的
        return Focus(
          onFocusChange: (hasFocus) {
            if (temperatureItemTypes
                .contains(itemTypeController.text.trim())) {
              setState(() {
                temperatureField = true;
              });
            } else {
              setState(() {
                temperatureField = false;
              });
            }
            if (volumeItemTypes
                .contains(itemTypeController.text.trim())) {
              setState(() {
                volumeField = true;
              });
            } else {
              setState(() {
                volumeField = false;
              });
            }
          },
          child: TextFormField(
            controller: itemTypeController, // 使用自定义的controller
            focusNode: _focusNode, // 使用自己初始化的focusNode
            onEditingComplete: onEditingComplete,
            decoration: const InputDecoration(
              labelText: "Item type*",
              hintText: 'What is the item?',
            ),
          ),
        );
      },
    ),
  ),
);

关键说明 #

• 自定义controller并设置初始值，既满足了RawAutocomplete的输入状态管理，也能避免与initialValue的冲突
• 移除RawAutocomplete的initialValue参数，因为它在有controller时完全无效
• 自己管理focusNode的生命周期，避免潜在的内存泄漏问题

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