Flutter flutter_typeahead组件仅能选中首个建议项问题求助

问题现象 #

使用flutter_typeahead: ^5.2.0开发Flutter应用时，API可正常返回完整的邮政编码建议列表，但仅首个选项点击时onSuggestionSelected会触发回调，点击其他选项无任何响应。

可能原因与解决方案 #

1. 状态更新干扰建议列表状态 #

你的fetchZipCodeSuggestions方法最后调用了update()，这会触发UI重建。当建议列表显示时，UI重建会导致TypeAheadField重新初始化，原本的建议列表状态丢失，进而导致非首个选项的点击事件失效。

修改方案：移除fetchZipCodeSuggestions中的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;
}

2. 列表项缺少唯一Key导致复用问题 #

Flutter列表组件会复用元素，若未给每个建议项设置唯一Key，可能导致点击事件绑定错误。

修改方案：在itemBuilder的ListTile中添加唯一Key：

itemBuilder: (context, suggestion) {
  return ListTile(
    key: Key(suggestion), // 添加唯一Key确保列表项独立
    title: Text(suggestion),
  );
},

3. Stack布局的层级干扰 #

虽然TypeAheadField的建议列表通过Overlay显示，但Stack布局可能存在潜在层级冲突。可尝试简化布局，用TextField自带的suffixIcon替代Stack中的定位图标：

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: 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,
                ),
                suffixIcon: const Icon(Icons.home_filled, color: iconColor), // 用suffixIcon替代Stack中的定位图标
              ),
            ),
            suggestionsCallback: (pattern) async {
              return await controller.fetchZipCodeSuggestions(pattern);
            },
            itemBuilder: (context, suggestion) {
              return ListTile(
                key: Key(suggestion),
                title: Text(suggestion),
              );
            },
            onSuggestionSelected: (suggestion) {
              print(suggestion);
              controller.addSelectedZipCode(suggestion);
            },
          ),
        ),
      ),
    ],
  ),
),

验证步骤 #

1. 优先尝试移除fetchZipCodeSuggestions中的update()，这是最可能的诱因；
2. 若问题未解决，添加ListTile的唯一Key；
3. 最后尝试简化布局，移除Stack结构。

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