Flutter天气API应用异常求助：数据加载与搜索更新问题

核心问题梳理 #

• 用FutureBuilder时搜索后页面不更新：绑定的Future对象未变化，组件不会触发重建
• build方法里调用getData：build会频繁触发，导致重复发起API请求，引发异常
• initState里调用getData：仅执行一次，无法响应后续搜索操作

具体解决方案 #

1. 用State管理Future对象

在State类中单独维护Future变量，搜索时更新该变量并触发组件重建：

• 定义late Future<WeatherData> _weatherFuture;
• initState中初始化默认城市的请求
• 搜索提交时，更新_weatherFuture为新城市的请求，再调用setState

2. 正确结合FutureBuilder

将FutureBuilder的future参数绑定到维护的_weatherFuture，按状态处理UI：

class WeatherScreen extends StatefulWidget {
  @override
  _WeatherScreenState createState() => _WeatherScreenState();
}

class _WeatherScreenState extends State<WeatherScreen> {
  late Future<WeatherData> _weatherFuture;
  final _searchController = TextEditingController();

  @override
  void initState() {
    super.initState();
    // 初始化加载默认城市，比如当前定位城市
    _weatherFuture = getData('北京');
  }

  Future<WeatherData> getData(String city) async {
    // 替换成你的API请求逻辑，记得加错误处理
    try {
      final response = await http.get(Uri.parse('https://your-api-url.com/weather?city=$city'));
      if (response.statusCode == 200) {
        return WeatherData.fromJson(jsonDecode(response.body));
      } else {
        throw Exception('请求失败，状态码：${response.statusCode}');
      }
    } catch (e) {
      throw Exception('网络异常：$e');
    }
  }

  void _handleSearch(String city) {
    if (city.trim().isEmpty) return;
    setState(() {
      // 更新Future对象，触发FutureBuilder重新构建
      _weatherFuture = getData(city.trim());
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: TextField(
          controller: _searchController,
          decoration: const InputDecoration(
            hintText: '输入城市名搜索',
            border: InputBorder.none,
          ),
          onSubmitted: _handleSearch,
        ),
      ),
      body: FutureBuilder<WeatherData>(
        future: _weatherFuture,
        builder: (ctx, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return const Center(child: CircularProgressIndicator());
          } else if (snapshot.hasError) {
            return Center(child: Text('加载出错：${snapshot.error}'));
          } else if (snapshot.hasData) {
            // 这里渲染你的天气详情UI
            return Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text('${snapshot.data!.cityName}'),
                  Text('${snapshot.data!.temp}°C'),
                ],
              ),
            );
          } else {
            return const Center(child: Text('暂无数据'));
          }
        },
      ),
    );
  }
}

3. 异常规避要点

• 绝对不要在build方法里直接调用异步请求，避免重复发起请求导致异常
• API请求必须加try-catch捕获网络、解析异常，防止应用崩溃
• 搜索时做非空校验，避免空字符串请求API
• 可选：给搜索加防抖（比如延迟500ms再发起请求），避免用户连续输入时频繁调用API

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