Flutter如何通过模型类将JSON数组科目数据展示到ListView中

1. 引入网络请求依赖 #

首先在pubspec.yaml中添加http包用于接口请求：

dependencies:
  flutter:
    sdk: flutter
  http: ^1.1.0 # 可替换为最新稳定版本

2. 完整页面实现代码 #

以下代码包含接口请求、JSON解析、列表渲染全流程，可直接复用：

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
// 此处导入你之前生成的模型类文件，示例文件名为subject_model.dart
import 'subject_model.dart';

class SubjectListPage extends StatefulWidget {
  const SubjectListPage({super.key});

  @override
  State<SubjectListPage> createState() => _SubjectListPageState();
}

class _SubjectListPageState extends State<SubjectListPage> {
  // 存储接口返回的科目列表
  List<Subject> _subjectList = [];
  // 加载状态标记
  bool _isLoading = true;
  // 错误信息标记
  String? _errorMsg;

  // 替换为你的实际接口地址
  static const String _apiUrl = "https://你的实际接口请求地址";
  // 替换为你的实际服务器域名前缀，接口返回的image为相对路径，需要拼接域名才能加载
  static const String _imageBaseUrl = "https://你的实际服务器域名/";

  @override
  void initState() {
    super.initState();
    _fetchSubjectData();
  }

  // 接口请求+数据解析方法
  Future<void> _fetchSubjectData() async {
    try {
      final response = await http.get(Uri.parse(_apiUrl));
      if (response.statusCode == 200) {
        // 直接用你生成的模型方法解析JSON
        final SubjectByUser result = subjectByUserFromJson(response.body);
        if (result.success == 1) {
          setState(() {
            _subjectList = result.subject;
            _isLoading = false;
          });
        } else {
          setState(() {
            _errorMsg = "接口请求失败";
            _isLoading = false;
          });
        }
      } else {
        setState(() {
          _errorMsg = "请求失败，状态码：${response.statusCode}";
          _isLoading = false;
        });
      }
    } catch (e) {
      setState(() {
        _errorMsg = "请求出错：$e";
        _isLoading = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("科目列表")),
      body: _buildBody(),
    );
  }

  Widget _buildBody() {
    // 加载中状态
    if (_isLoading) {
      return const Center(child: CircularProgressIndicator());
    }
    // 错误状态
    if (_errorMsg != null) {
      return Center(child: Text(_errorMsg!));
    }
    // 数据加载完成渲染ListView
    return ListView.builder(
      itemCount: _subjectList.length,
      itemBuilder: (context, index) {
        final subject = _subjectList[index];
        return ListTile(
          // 左侧展示科目图片
          leading: Image.network(
            _imageBaseUrl + subject.image,
            width: 50,
            height: 50,
            fit: BoxFit.cover,
            // 图片加载失败的占位提示
            errorBuilder: (context, error, stackTrace) {
              return const Icon(Icons.broken_image, size: 50, color: Colors.grey);
            },
          ),
          // 右侧展示科目名称
          title: Text(subject.subjectName),
          // 可自定义添加点击事件
          onTap: () {
            // 点击科目后的业务逻辑
          },
        );
      },
    );
  }
}

注意事项 #

• 务必替换代码中的_apiUrl和_imageBaseUrl为实际的接口地址和服务器域名，否则图片无法正常加载
• 若需要更自定义的列表项样式，可将ListTile替换为自行实现的Row布局
• 如果图片为本地资源而非网络资源，可将Image.network替换为Image.asset，同时调整路径逻辑即可

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