Flutter FutureBuilder问题：API数据获取成功但无法展示

我帮你排查了代码里的几个关键问题，咱们一步步来修正：

问题点分析 #

• Future函数里滥用setState：你在getSearch里手动调用setState更新title，但FutureBuilder本身会根据Future的状态自动刷新UI，手动更新会导致状态不同步，完全没必要。
• Future返回值不对：现在你的getSearch返回的是单个影片名称，但我们需要整个结果列表来生成ListView，应该返回解析后的results数组。
• ListView.builder缺少return：你的itemBuilder里写了Padding组件，但没有加return，导致没有Widget被返回，界面自然看不到内容。
• 依赖外部状态而非snapshot数据：getName函数依赖外部的title变量，这会导致UI和Future的状态脱节，应该直接使用FutureBuilder的snapshot.data。

修正后的完整代码 #

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

class Search extends StatefulWidget {
  final String value;
  Search({Key? key, required this.value}) : super(key: key);

  @override
  _SearchState createState() => _SearchState();
}

class _SearchState extends State<Search> {
  // 移除不必要的title变量，直接用Future返回的数据
  Future<List<dynamic>> getSearch() async {
    http.Response response = await http.get(
      Uri.parse('https://api.themoviedb.org/3/search/company?api_key=6d6f3a650f56fd6b3347428018a20a73&query=${widget.value}'),
    );
    var results = json.decode(response.body);
    // 直接返回results数组，不需要setState
    return results['results'];
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        backgroundColor: Color(0xff1d1d27),
        body: Column(
          children: [
            Expanded(
              child: FutureBuilder<List<dynamic>>(
                initialData: [],
                future: getSearch(),
                builder: (context, snapshot) {
                  // 处理不同的状态：加载中、错误、数据为空、有数据
                  if (snapshot.connectionState == ConnectionState.waiting) {
                    return Center(child: CircularProgressIndicator());
                  } else if (snapshot.hasError) {
                    return Center(child: Text('加载出错：${snapshot.error}'));
                  } else if (!snapshot.hasData || snapshot.data!.isEmpty) {
                    return Center(child: Text('没有找到相关影片'));
                  }

                  // 数据正常时生成ListView
                  return ListView.builder(
                    itemCount: snapshot.data!.length, // 必须指定itemCount，否则ListView不知道要渲染多少项
                    itemBuilder: (context, index) {
                      // 直接从snapshot.data取数据，不需要额外的getName函数
                      final companyName = snapshot.data![index]['name'];
                      return Padding(
                        padding: EdgeInsets.symmetric(horizontal: 30, vertical: 20),
                        child: Container(
                          color: Colors.white,
                          child: Text(companyName.toString()),
                        ),
                      );
                    },
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

关键修改说明 #

1. 调整Future返回类型：把getSearch的返回类型改为Future<List<dynamic>>，直接返回API返回的results数组，去掉了不必要的setState和title变量。
2. 修复ListView.builder：添加了itemCount（必须指定，否则ListView无法正确渲染），并且在itemBuilder里添加了return，直接使用snapshot.data里的数据。
3. 增加状态处理：在builder里处理了加载中、错误、数据为空的情况，提升用户体验。
4. 优化URL构建：用Uri.parse替代字符串拼接，更安全规范。

这样修改后，FutureBuilder就能正确监听API请求的状态，并且把数据展示在界面上了。

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