Flutter flutter_typeahead 仅在 onSuggestionSelected 中选择第一个选项

Question

我正在使用 this 插件 flutter_typeahead: ^5.2.0 构建 Flutter 应用程序，但在显示这些选定项目时遇到一些问题，因为只有第一个项目正在选择。当我尝试选择除第一个之外的任何项目时，回调

onSuggestionSelected

不返回任何内容。 这是我们的简化代码：

// view code
Padding(
  padding: const EdgeInsets.symmetric(horizontal: 30.0),
  child: Column(
    children: [
      Padding(
        padding: const EdgeInsets.only(bottom: 12.0),
        child: Container(
          decoration: BoxDecoration(
              color: white,
              borderRadius: BorderRadius.circular(20)),
          child: Stack(children: [
            TypeAheadField(
              textFieldConfiguration:
                  TextFieldConfiguration(
                controller: controller.txt,
                decoration: InputDecoration(
                  filled: true,
                  fillColor: white,
                  border: OutlineInputBorder(
                      borderRadius:
                          BorderRadius.circular(30),
                      borderSide: const BorderSide(
                          color: white, width: 1)),
                  focusedBorder: OutlineInputBorder(
                      borderRadius:
                          BorderRadius.circular(30),
                      borderSide: const BorderSide(
                          color: white, width: 1)),
                  enabledBorder: OutlineInputBorder(
                      borderRadius:
                          BorderRadius.circular(30),
                      borderSide: const BorderSide(
                          color: white, width: 1)),
                  contentPadding:
                      const EdgeInsets.symmetric(
                          horizontal: 15, vertical: 15),
                  hintText: 'Enter your zip code',
                  hintMaxLines: 1,
                  hintStyle: const TextStyle(
                    fontFamily: secondaryFont,
                    letterSpacing: 0,
                    color: txtSecondary,
                    fontWeight: FontWeight.w400,
                    fontSize: 16,
                    fontStyle: FontStyle.normal,
                  ),
                ),
              ),
              suggestionsCallback: (pattern) async {
                var suggestions = await controller
                    .fetchZipCodeSuggestions(pattern);
                return suggestions;
              },
              itemBuilder: (context, suggestion) {
                return ListTile(
                  title: Text(suggestion),
                );
              },
              onSuggestionSelected: (suggestion) {
                print(suggestion);
                controller.addSelectedZipCode(suggestion);
              },
            ),
            const Positioned(
                top: 12,
                right: 15,
                child: Icon(
                  Icons.home_filled,
                  color: iconColor,
                ))
          ]),
        ),
      ),
    ],
  ),
),

// controller code
final selectedZipCodes = <String>[];

void addSelectedZipCode(String zipCode) {
  selectedZipCodes.add(zipCode);
  update();
}

void removeSelectedZipCode(String zipCode) {
  print('removed');
  selectedZipCodes.remove(zipCode);
  update();
}

Future<List<String>> fetchZipCodeSuggestions(String pattern) async {
  if (pattern.length < 3) {
    return [];
  }
  String apipage = "/someAPI.php";
  Map mappedData = {'text': pattern};
  var response = await sendDataServer(apipage, mappedData);
  var servResJson = response.data;
  var zipDB = zipcodeFromJson(servResJson);
  List<String> suggestions = zipDB.zipcode;
  print('Fetched Suggestions: $suggestions');
  update();
  return suggestions;
}

API 获取的数据工作正常，但当点击这些建议的项目时，只有第一个项目从

onSuggestionSelected

重新调整

Answer 1

使用

ignoreAccessibleNavigation

属性为 true。

允许通过可访问性绕过 Flutter 3.7+ 上的问题 通过 Overlay 防止 flutter_typeahead 注册点击 正确的建议列表。