Flutter调用Wikipedia API获取乐队图片异常求助

核心问题 #

1. 异步操作未等待且未触发UI刷新：_getBandImage是异步方法，但点击按钮时直接调用却未用await，导致保存Firestore的代码在API请求完成前就执行，此时_bandImageUrl还是旧值；同时更新_bandImageUrl后没有调用setState()，UI不会重新渲染展示新图片。
2. URL编码不严谨：手动用replaceAll(' ', '%20')处理空格的方式不够通用，无法覆盖其他特殊字符的编码需求。
3. 未处理API返回的无效页面：当Wikipedia API找不到对应页面时，会返回pageKey为"-1"的条目，未做判断可能导致逻辑异常。

修复步骤 #

1. 修正异步逻辑与UI刷新 #

修改_getBandImage方法，使用标准URL编码处理乐队名称，更新图片URL后调用setState()触发UI刷新：

Future<void> _getBandImage() async {
  // 使用内置方法处理URL编码，兼容所有特殊字符
  String encodedBandName = Uri.encodeComponent(_favoriteBand);

  http.Response response = await http.get(Uri.parse(
      'https://en.wikipedia.org/w/api.php?format=json&action=query&prop=pageimages&titles=$encodedBandName&pithumbsize=400'));

  Map<String, dynamic> jsonData = json.decode(response.body);

  setState(() {
    if (jsonData['query'] != null && jsonData['query']['pages'] != null) {
      String pageKey = jsonData['query']['pages'].keys.first;
      // 排除API返回的无效页面（找不到内容时pageKey为"-1"）
      if (pageKey != "-1" &&
          jsonData['query']['pages'][pageKey]['thumbnail'] != null) {
        _bandImageUrl = jsonData['query']['pages'][pageKey]['thumbnail']['source'];
      } else {
        _bandImageUrl = '';
      }
    } else {
      _bandImageUrl = '';
    }
  });
}

2. 调整按钮点击事件逻辑 #

确保先完成图片获取，再执行Firestore保存操作，避免保存未更新的空值：

ElevatedButton(
  onPressed: () async {
    if (_favoriteBand.isNotEmpty) {
      await _getBandImage(); // 等待图片请求完成
      // 保存到Firestore
      User currentUser = FirebaseAuth.instance.currentUser!;
      await _firestore.collection('users').doc(currentUser.uid).set({
        'favoriteBand': _favoriteBand,
        'bandImageUrl': _bandImageUrl,
      }, SetOptions(merge: true));
    }
  },
  child: Text('Suchen'),
)

3. 优化加载状态显示（可选） #

当前代码在初始状态也会显示加载圈，可新增加载状态变量区分初始状态和加载中：

// 在State类中新增变量
bool _isLoading = false;

// 修改_getBandImage方法
Future<void> _getBandImage() async {
  setState(() {
    _isLoading = true;
  });
  // ... 原有API请求逻辑 ...
  setState(() {
    _isLoading = false;
    // ... 原有图片URL赋值逻辑 ...
  });
}

// 修改UI部分的加载显示
_isLoading
    ? CircularProgressIndicator()
    : _bandImageUrl.isNotEmpty
        ? Image.network(_bandImageUrl)
        : SizedBox.shrink(), // 初始状态不显示任何内容

原场景偶现正常的原因 #

删除最后一个字符时，TextField的onChanged触发了setState()，意外刷新了UI，此时如果之前的API请求已经完成，就会显示图片，但这是不可靠的偶然情况。

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