Flutter问题：TextEditingController无法用API数据更新ListView

核心问题定位 #

你遇到的列表为空问题，根源在于movieResponse返回空，需从API请求、数据解析、状态更新三个维度逐一排查：

1. API请求环节的常见问题 #

URL编码缺失

用户输入的查询词如果包含空格、特殊字符，直接拼接会导致请求URL格式无效，TMDB API返回空结果。
修复：对查询参数做URL编码：

Future<void> fetchMovies(String query) async {
  if (query.isEmpty) {
    setState(() => searchMoviesList.clear());
    return;
  }
  // 对查询词编码，处理特殊字符
  final encodedQuery = Uri.encodeComponent(query);
  final fullUrl = Constants.search + encodedQuery;
  print('请求URL: $fullUrl'); // 打印确认URL正确性
  try {
    var movieResponse = await ApiCall(fullUrl).getData();
    // ...后续解析逻辑
  } catch (e) {
    print('请求失败: $e');
  }
}

API密钥无效或网络权限缺失

• 确认Constants.search里的XXXXXXX已替换为有效的TMDB API密钥，密钥错误会返回空响应或401权限错误。
• Android需在AndroidManifest.xml添加网络权限：

  <uses-permission android:name="android.permission.INTERNET"/>
  

• iOS无需额外配置HTTPS权限（TMDB使用HTTPS，默认允许），但需确保App未被限制网络访问。

2. ApiCall类的getData()方法是否正确实现 #

如果ApiCall的请求逻辑有问题，会导致返回空数据。以下是标准的实现参考：

import 'package:http/http.dart' as http;
import 'dart:convert';

class ApiCall {
  final String url;
  ApiCall(this.url);

  Future<Map<String, dynamic>> getData() async {
    final response = await http.get(Uri.parse(url));
    // 先检查响应状态码
    if (response.statusCode != 200) {
      throw Exception('请求失败，状态码: ${response.statusCode}');
    }
    // 解析JSON并打印完整响应
    final jsonData = jsonDecode(response.body);
    print('API响应内容: $jsonData');
    return jsonData;
  }
}

确保已在pubspec.yaml添加http依赖：

dependencies:
  flutter:
    sdk: flutter
  http: ^0.13.5

3. 数据解析与状态更新问题 #

MovieModel.fromJson映射错误

如果MovieModel的字段和TMDB返回的JSON字段不匹配，会导致解析后的对象为空，列表无数据。检查MovieModel的实现：

class MovieModel {
  final int id;
  final String title;
  final String? posterPath;

  MovieModel({required this.id, required this.title, this.posterPath});

  factory MovieModel.fromJson(Map<String, dynamic> json) {
    return MovieModel(
      id: json['id'] ?? 0, // 加默认值避免空指针异常
      title: json['title'] ?? '未知标题',
      posterPath: json['poster_path'],
    );
  }
}

重复触发请求的优化

当前代码同时使用了TextEditingController的listener和TextFormField的onChanged，会导致重复调用fetchMovies，浪费资源。建议移除onChanged：

TextFormField(
  controller: _searchController,
  // 移除冗余的onChanged回调
  decoration: const InputDecoration(
    hintText: 'Search for movies',
    focusedBorder: UnderlineInputBorder(
      borderSide: BorderSide(color: Colors.red),
    ),
  ),
),

另外，添加防抖机制避免频繁API调用（输入每个字符都触发请求，容易被TMDB限流）：

Timer? _debounceTimer;

void _onTextChanged() {
  // 取消之前的定时器，避免重复请求
  _debounceTimer?.cancel();
  // 延迟300ms再发起请求
  _debounceTimer = Timer(const Duration(milliseconds: 300), () {
    fetchMovies(_searchController.text);
  });
}

@override
void dispose() {
  _debounceTimer?.cancel(); // 页面销毁时取消定时器
  _searchController.removeListener(_onTextChanged);
  _searchController.dispose();
  super.dispose();
}

调试技巧 #

1. 打印完整请求URL，复制到浏览器或Postman中直接访问，确认返回的results字段是否有数据。
2. 在ApiCall的getData()中打印完整响应内容，检查是否包含results数组，或者是否有错误提示。
3. 打印searchMoviesList的长度和每个元素，确认解析是否成功。

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