Flutter中ListTile无法随Google Places API结果实时更新

1. 异步执行顺序错误：getSuggestion是异步方法，你调用它后立刻弹出对话框，此时API请求还未完成，_placeList仍然是旧数据，对话框初始化时用的就是旧值。
2. 对话框状态独立：showDialog创建的对话框是独立于当前页面的Widget，页面的setState不会触发对话框内容的重建，所以即使后续_placeList更新，对话框也不会同步刷新。

方案一：等待API请求完成后再显示对话框 #

修改TextField的onSubmitted回调，先等待getSuggestion执行完毕，确保_placeList更新后再弹出对话框：

TextField(
  onSubmitted: (value) async {
    await getSuggestion(value); // 等待API请求完成，_placeList更新
    if (_placeList.isNotEmpty) { // 增加非空判断，避免索引越界
      showDialog(
        context: context,
        builder: ((context) {
          return Card(
            child: ListTile(
              title: Text(_placeList[0].description),
            ),
          );
        }),
      );
    }
  },
)

优化空安全处理 #

原代码中result!和predictions!存在空指针风险，建议修改getSuggestion方法，增加空值处理：

void getSuggestion(String input) async {
  var googlePlace = GooglePlace(AppConstants.APIBASE_GOOGLEMAPS_KEY);
  var result = await googlePlace.queryAutocomplete.get(input);
  setState(() {
    _placeList = result?.predictions ?? []; // 空值时返回空列表，避免崩溃
  });
}

方案二：让对话框响应状态更新（可选） #

如果需要对话框显示后还能实时更新内容（比如实时输入联想），可以用StatefulBuilder包裹对话框内容，让其能响应状态变化：

TextField(
  onSubmitted: (value) {
    getSuggestion(value);
    showDialog(
      context: context,
      builder: ((context) {
        return StatefulBuilder(
          builder: (dialogContext, setState) {
            return Card(
              child: ListTile(
                title: Text(_placeList.isNotEmpty ? _placeList[0].description : ''),
              ),
            );
          },
        );
      }),
    );
  },
)

不过这种方案需要页面setState时，对话框内部也能感知到，通常方案一更适合你当前的提交后显示场景。

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