时间戳

首页 > 解决方案 > Flutter Autocomplete 小部件延迟更新建议

flutter - Flutter Autocomplete 小部件延迟更新建议

问题描述

我在使用自动完成小部件时遇到问题。基本上，当我在文本字段中输入时显示的选项列表会延迟一个字符。

例如，假设有一组数据，如 [“Apple”、“Banana”、“Orange”]。如果文本字段最初为空并且我开始输入字母“A”，则没有任何反应。然后我输入例如字母“k”，这样就不应该与数据匹配，但小部件在选项列表中显示“Apple”。然后假设我删除了最后一个字母“k”，因此只有“A”并且应该与单词“Apple”匹配，但小部件不显示任何内容。等等。

Autocomplete<Song>(
      optionsBuilder: (_) => state.searchResults,
      fieldViewBuilder: (context, controller, focusNode, onFieldSubmitted) {
        return TextField(
          controller: controller,
          focusNode: focusNode,
          onChanged: (value) {
            context.read(searchProvider.notifier).inputChanged(value);
          },
        );
      },
      optionsViewBuilder: (context, onSelected, options) {
        return Align(
          alignment: Alignment.topLeft,
          child: Material(
            child: SizedBox(
              height: 100.0,
              child: ListView(
                padding: EdgeInsets.all(kDefaultPadding / 3),
                itemExtent: 40.0,
                children: options
                    .map(
                      (song) => SuggestionEntry(song: song),
                    )
                    .toList(),
              ),
            ),
          ),
        );
      },
    )

我使用 Riverpod 作为状态管理器，但这不应该是问题，因为我在页面的其他部分也使用了相同的 StateNotifier，这些部分已正确更新。另外，请注意，存储在 StateNotifier 中的建议列表正确地基于当前输入，因此问题似乎出在 Autocomplete 小部件的“渲染”期间。

示例：https ://drive.google.com/file/d/17FZuxgDoHhOR2ceAUsOtADZZe23BU0m1/view?usp=sharing

标签： flutterautocomplete

解决方案

optionsBuilder之前被调用fieldViewBuilder.onChange。所以删除部分

onChanged: (value) {
    context.read(searchProvider.notifier).inputChanged(value);
},

并将定义移动到内部，optionsBuilder如：

optionsBuilder: (TextEditingValue value) {
    await context.read(searchProvider.notifier).inputChanged(value);
    return ...;
},

推荐阅读