Flutter中从API提取数据并在ListView展示的问题求助

1. 创建强类型数据模型 #

先定义对应API返回数据的模型类，避免直接操作动态类型导致的错误，同时让数据操作更清晰：

class LogItem {
  final String responsibleAdmin;
  final int date;
  final int userId;
  final int fixedId;
  final int amount;

  LogItem({
    required this.responsibleAdmin,
    required this.date,
    required this.userId,
    required this.fixedId,
    required this.amount,
  });

  // 从JSON对象转换为LogItem实例
  factory LogItem.fromJson(Map<String, dynamic> json) {
    return LogItem(
      responsibleAdmin: json['responsible_admin'],
      date: json['date'],
      userId: json['userID'],
      fixedId: json['fixedID'],
      amount: json['amount'],
    );
  }
}

2. 修正数据获取逻辑并存储数据 #

原代码中jsonEncode的写法存在语法错误，同时需要把返回的JSON数组转换为LogItem列表并保存到组件状态中：

class _LogListPageState extends State<LogListPage> {
  List<LogItem> _logItems = [];
  bool _isLoading = false;

  Future<void> fetchLogs() async {
    setState(() {
      _isLoading = true;
    });

    try {
      final response = await http.post(
        Uri.parse('my.api.com'),
        headers: {
          "Content-Type": "application/json"
        },
        // 修正jsonEncode的写法
        body: jsonEncode({
          "u": "admin",
          "pw": "password",
        }),
      );

      if (response.statusCode == 200) {
        final jsonResponse = jsonDecode(response.body);
        // 提取data数组并转换为LogItem列表
        List<dynamic> rawData = jsonResponse['data'];
        setState(() {
          _logItems = rawData.map((item) => LogItem.fromJson(item)).toList();
        });
      } else {
        print('请求失败，状态码：${response.statusCode}');
      }
    } catch (e) {
      print('请求出错：$e');
    } finally {
      setState(() {
        _isLoading = false;
      });
    }
  }

  @override
  void initState() {
    super.initState();
    // 页面初始化时触发数据请求
    fetchLogs();
  }

  // 构建UI部分见下一步
}

3. 用ListView展示数据 #

使用ListView.builder构建列表，同时处理加载状态、空数据状态，还可以把时间戳转换为可读的日期格式：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: const Text('操作日志')),
    body: _isLoading
        ? const Center(child: CircularProgressIndicator())
        : _logItems.isEmpty
            ? const Center(child: Text('暂无日志数据'))
            : ListView.builder(
                itemCount: _logItems.length,
                itemBuilder: (context, index) {
                  final log = _logItems[index];
                  // 将毫秒时间戳转换为DateTime
                  DateTime logDate = DateTime.fromMillisecondsSinceEpoch(log.date);
                  return ListTile(
                    title: Text('管理员：${log.responsibleAdmin}'),
                    subtitle: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text('用户ID：${log.userId}'),
                        Text('固定ID：${log.fixedId}'),
                        Text('金额：${log.amount}'),
                        Text('操作时间：${logDate.toString().split('.')[0]}'),
                      ],
                    ),
                  );
                },
              ),
  );
}

常见错误排查 #

• 检查字段名大小写：确保模型类中的字段和API返回的JSON字段完全匹配（比如userID和fixedID的大小写）
• 确认API返回格式：保证data字段是数组类型，且没有拼写错误
• 网络权限：在AndroidManifest.xml或Info.plist中添加网络访问权限，避免请求失败

内容的提问来源于stack exchange，提问作者Shervin.bdn