TypeAheadField 下拉项目不会更新

Question

我有这个小部件：

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: TypeAheadField(
        hideOnEmpty: true,
        builder: (context, controller, focusNode) {
          return TextField(
            controller: _controller,
            focusNode: focusNode,
            autofocus: false,
            style: const TextStyle(
                fontFamily: 'DynaPuff',
                fontWeight: FontWeight.w100,
                color: secondaryColor,
                decoration: TextDecoration.none),
            decoration: InputDecoration(
              labelStyle: const TextStyle(color: secondaryColor),
              enabledBorder: const OutlineInputBorder(
                borderSide: BorderSide(color: thirdColor, width: 1.0),
              ),
              focusedBorder: const OutlineInputBorder(
                borderSide: BorderSide(color: thirdColor, width: 1.0),
              ),
              fillColor: mainBgColor,
              suffixIcon: Visibility(
                visible: textValue.isNotEmpty,
                child: IconButton(
                  onPressed: () {
                    _controller.clear();
                    setState(() {
                      textValue = '';
                    });
                  },
                  icon: const Icon(
                    Ionicons.close_outline,
                    color: secondaryColor,
                  ),
                ),
              ),
              prefixIcon: const Icon(
                Ionicons.search_outline,
                color: secondaryColor,
              ),
              labelText: 'Search',
            ),
            onSubmitted: (value) {
              textValue = value;
              saveSearchHistory(value: textValue);
            },
            onChanged: (value) {
              setState(() {
                textValue = value;
              });
            },
          );
        },
        itemBuilder: (context, value) {
          return ListTile(
            tileColor: Colors.transparent,
            title: Text(
              value.toString(),
            ),
            trailing: IconButton(
              icon: const Icon(
                Ionicons.close_outline,
                size: 15.0,
              ),
              onPressed: () {
                removeFromHistory(value: value);
              },
            ),
          );
        },
        onSelected: (value) {
          _controller.text = value.toString();
        },
        suggestionsCallback: (pattern) {
          return _searchHistory
              .where((suggestion) =>
                  suggestion.toLowerCase().contains(pattern.toLowerCase()))
              .toList();
        },
      ),
    );
  }

当用户提交 TextField 时，我想将 TextField 的值添加到下拉菜单中。 我正在使用此函数将元素添加到列表中：

  saveSearchHistory({required String value}) async {
    if (_searchHistory.contains(value)) {
      _searchHistory.remove(value);
    }
    _searchHistory.add(value);
    await _prefs.setStringList('searchHistory', _searchHistory);
    _controller.clear();
  }

不幸的是，当我再次点击文本字段时，新添加的项目将不会显示；

我还在 ListTile 中添加了一个 IconButton 以删除 en 元素，但它也不起作用，该元素仍保留在列表中，直到页面重新加载。

  removeFromHistory({required String value}) async {
    setState(() {
      _searchHistory.remove(value);
    });
    await _prefs.setStringList('searchHistory', _searchHistory);
  }

你有什么建议吗？

Answer 1

您需要为建议列表维护一个单独的变量，并在搜索历史记录发生变化时更新它

小部件：

List<String> _suggestions = [];

@override
Widget build(BuildContext context) {
  return Padding(
    padding: const EdgeInsets.all(8.0),
    child: TypeAheadField(
      hideOnEmpty: true,
      builder: (context, controller, focusNode) {
        return TextField(
          controller: _controller,
          focusNode: focusNode,
          autofocus: false,
          style: const TextStyle(
              fontFamily: 'DynaPuff',
              fontWeight: FontWeight.w100,
              color: secondaryColor,
              decoration: TextDecoration.none),
          decoration: InputDecoration(
            labelStyle: const TextStyle(color: secondaryColor),
            enabledBorder: const OutlineInputBorder(
              borderSide: BorderSide(color: thirdColor, width: 1.0),
            ),
            focusedBorder: const OutlineInputBorder(
              borderSide: BorderSide(color: thirdColor, width: 1.0),
            ),
            fillColor: mainBgColor,
            suffixIcon: Visibility(
              visible: textValue.isNotEmpty,
              child: IconButton(
                onPressed: () {
                  _controller.clear();
                  setState(() {
                    textValue = '';
                  });
                },
                icon: const Icon(
                  Ionicons.close_outline,
                  color: secondaryColor,
                ),
              ),
            ),
            prefixIcon: const Icon(
              Ionicons.search_outline,
              color: secondaryColor,
            ),
            labelText: 'Search',
          ),
          onSubmitted: (value) {
            textValue = value;
            saveSearchHistory(value: textValue);
          },
          onChanged: (value) {
            setState(() {
              textValue = value;
              _suggestions = _searchHistory.where((suggestion) =>
                suggestion.toLowerCase().contains(value.toLowerCase())).toList();
            });
          },
        );
      },
      itemBuilder: (context, value) {
        return ListTile(
          tileColor: Colors.transparent,
          title: Text(
            value.toString(),
          ),
          trailing: IconButton(
            icon: const Icon(
              Ionicons.close_outline,
              size: 15.0,
            ),
            onPressed: () {
              removeFromHistory(value: value);
            },
          ),
        );
      },
      onSelected: (value) {
        _controller.text = value.toString();
      },
      suggestionsCallback: (pattern) {
        return _suggestions;
      },
    ),
  );
}

其他功能：

  saveSearchHistory({required String value}) async {
  if (_searchHistory.contains(value)) {
    _searchHistory.remove(value);
  }
  _searchHistory.add(value);
  await _prefs.setStringList('searchHistory', _searchHistory);
  _controller.clear();
  _suggestions = _searchHistory;
}

removeFromHistory({required String value}) async {
  setState(() {
    _searchHistory.remove(value);
    _suggestions = _searchHistory;
  });
  await _prefs.setStringList('searchHistory', _searchHistory);
}

谢谢你 快乐编码！！！！！！