Flutter：异步调用完成后渲染Widget的实现问题

咱们先把你代码里的几个基础问题修正一下：

• 旧的dart:json包已经废弃啦，现在要用dart:convert来处理JSON解析
• MyHomePage的构造函数括号没闭合，代码没法正常运行
• 还缺了HTTP请求的核心逻辑和异步UI处理的部分

下面是完整的可运行代码，我用了Flutter官方推荐的FutureBuilder来处理异步数据加载，这是最常用的异步UI实现方式：

import 'package:flutter/material.dart';
import 'dart:async';
import 'dart:convert';
import 'package:http/http.dart' as http; // 需要添加http依赖

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Async Data Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // 封装HTTP请求成Future，方便FutureBuilder监听
  Future<List<dynamic>> fetchData() async {
    // 替换成你实际的API地址
    final response = await http.get(Uri.parse('https://api.example.com/data'));

    if (response.statusCode == 200) {
      // 请求成功，解析JSON数据
      return json.decode(response.body);
    } else {
      // 请求失败时抛出异常，FutureBuilder会捕获到
      throw Exception('Failed to load data');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        // 用FutureBuilder处理异步状态，自动更新UI
        child: FutureBuilder<List<dynamic>>(
          future: fetchData(),
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              // 数据加载完成，渲染列表（根据你的API结构调整字段）
              return ListView.builder(
                itemCount: snapshot.data!.length,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text(snapshot.data![index]['title']),
                    subtitle: Text(snapshot.data![index]['description']),
                  );
                },
              );
            } else if (snapshot.hasError) {
              // 加载失败，显示错误信息
              return Text('加载失败：${snapshot.error}');
            }

            // 加载中，显示圆形加载指示器
            return const CircularProgressIndicator();
          },
        ),
      ),
    );
  }
}

几个关键细节说明： #

• FutureBuilder的作用：它会自动监听fetchData()这个异步任务的状态（加载中、成功、失败），不用手动管理状态更新，省心很多。
• HTTP依赖配置：要在项目的pubspec.yaml里添加http包依赖，不然会报错：

  dependencies:
    flutter:
      sdk: flutter
    http: ^1.1.0 # 可以用最新版本
  

• 适配你的API：记得把代码里的API地址替换成你实际的接口，还要根据接口返回的JSON结构调整列表项里的字段（比如title、description）。
• 优化体验：如果需要，可以给错误状态加个点击重试的按钮，或者给加载中的状态加个提示文字。

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