Flutter中如何将JSON数据解析为列表并在ListView展示

关键修改点 #

• 新增状态变量存储姓名列表
• 调整getData方法逻辑，获取数据后通过setState更新状态
• 在initState中调用数据获取方法，避免重复请求
• 修正JSON解析的key错误（原JSON键为peoplesnames）
• 使用ListView.builder高效渲染列表
• 添加加载状态处理

完整代码 #

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

class Test extends StatefulWidget {
  const Test({Key? key}) : super(key: key);

  @override
  State<Test> createState() => _TestState();
}

class _TestState extends State<Test> {
  // 定义状态变量存储姓名列表，初始为空
  List<String> _names = [];
  // 加载状态标记
  bool _isLoading = true;

  Future<void> getData() async {
    try {
      http.Response response = await http.get(
        // 注意URL需补全http/https前缀
        Uri.parse('https://www.genericwebsite.com'),
      );
      if (response.statusCode == 200) {
        String data = response.body;
        // 修正JSON键为peoplesnames
        List<dynamic> fetchedNames = jsonDecode(data)['peoplesnames'];
        // 转换为String类型列表并更新状态
        setState(() {
          _names = fetchedNames.cast<String>();
          _isLoading = false;
        });
      } else {
        print('请求失败，状态码：${response.statusCode}');
        setState(() {
          _isLoading = false;
        });
      }
    } catch (e) {
      print('请求出错：$e');
      setState(() {
        _isLoading = false;
      });
    }
  }

  @override
  void initState() {
    super.initState();
    // 组件初始化时调用数据获取方法，避免重复请求
    getData();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _isLoading
          ? // 加载中显示圆形进度条
          const Center(child: CircularProgressIndicator())
          : // 数据加载完成后渲染列表
          ListView.builder(
              itemCount: _names.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(_names[index]),
                );
              },
            ),
    );
  }
}

代码说明 #

1. 状态变量：_names存储获取到的姓名列表，_isLoading标记数据是否加载完成，用于切换加载状态与列表视图。
2. getData方法：改为Future<void>类型，通过setState更新状态变量触发UI重建，同时添加异常捕获处理网络请求失败场景。
3. initState：在组件初始化阶段调用数据获取方法，避免build方法重复执行导致多次发起网络请求。
4. ListView.builder：相比直接生成children列表，ListView.builder按需渲染列表项，在数据量较大时性能更优。
5. JSON解析：修正原代码中键名不匹配的问题，与你的JSON结构{"peoplesnames": [...]}对应。

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