Flutter中解析PHP关联数组并展示于ListView教程

{"No":"020474","name":"Ayuk Baye"}
{"No":"08273","name":"Cedrick"}
// ... 更多类似行

[
   {"No":"020474","name":"Ayuk Baye"},
   {"No":"08273","name":"Cedrick"},
   {"No":"08274","name":"Ayuk Baye"},
   {"No":"08275","name":"Ayu Rebecca"},
   {"No":"08276","name":"Raymond"},
   {"No":"08277","name":"Jolie"},
   {"No":"08278","name":"Prince"},
   {"No":"08474","name":"Ayuk Baye"}
]

class User {
  final String no;
  final String name;

  User({required this.no, required this.name});

  // 工厂构造函数，用于从JSON Map创建User对象
  factory User.fromJson(Map<String, dynamic> json) {
    return User(
      no: json['No'] as String, // 注意键名与JSON中一致
      name: json['name'] as String,
    );
  }
}

import 'dart:convert'; // 用于jsonDecode
import 'package:flutter/material.dart'; // 用于Flutter UI

// 模拟从后端获取的JSON字符串
const String jsonString = '''
[
   {"No":"020474","name":"Ayuk Baye"},
   {"No":"08273","name":"Cedrick"},
   {"No":"08274","name":"Ayuk Baye"},
   {"No":"08275","name":"Ayu Rebecca"},
   {"No":"08276","name":"Raymond"},
   {"No":"08277","name":"Jolie"},
   {"No":"08278","name":"Prince"},
   {"No":"08474","name":"Ayuk Baye"}
]
''';

List<User> parseUsers(String responseBody) {
  // 1. 使用jsonDecode将JSON字符串转换为Dart对象
  // 这里的responseBody是一个JSON数组字符串，所以jsonDecode会返回List<dynamic>
  final parsed = jsonDecode(responseBody).cast<Map<String, dynamic>>();

  // 2. 遍历解析后的List，并使用User.fromJson工厂构造函数将其转换为List<User>
  return parsed.map<User>((json) => User.fromJson(json)).toList();
}

// 示例调用
// List<User> userList = parseUsers(jsonString);
// print(userList.first.name); // 输出: Ayuk Baye

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http; // 用于实际的网络请求，这里仅作示例

// 假设我们已经定义了User类
// class User { ... }

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

  @override
  State<UserListPage> createState() => _UserListPageState();
}

class _UserListPageState extends State<UserListPage> {
  late Future<List<User>> _usersFuture;

  @override
  void initState() {
    super.initState();
    _usersFuture = _fetchUsers();
  }

  // 模拟从后端获取数据的方法
  Future<List<User>> _fetchUsers() async {
    // 实际应用中，这里会发起HTTP请求
    // final response = await http.get(Uri.parse('YOUR_API_ENDPOINT'));
    // if (response.statusCode == 200) {
    //   return parseUsers(response.body);
    // } else {
    //   throw Exception('Failed to load users');
    // }

    // 暂时使用硬编码的JSON字符串进行演示
    await Future.delayed(const Duration(seconds: 2)); // 模拟网络延迟
    return parseUsers(jsonString);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('用户列表'),
      ),
      body: FutureBuilder<List<User>>(
        future: _usersFuture,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            // 数据加载中
            return const Center(child: CircularProgressIndicator());
          } else if (snapshot.hasError) {
            // 数据加载失败
            return Center(child: Text('错误: ${snapshot.error}'));
          } else if (!snapshot.hasData || snapshot.data!.isEmpty) {
            // 没有数据
            return const Center(child: Text('没有找到用户数据。'));
          } else {
            // 数据加载成功，并有数据
            final users = snapshot.data!;
            return ListView.builder(
              itemCount: users.length,
              itemBuilder: (context, index) {
                final user = users[index];
                return Card(
                  margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
                  child: Padding(
                    padding: const EdgeInsets.all(16.0),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          '编号: ${user.no}',
                          style: const TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
                        ),
                        const SizedBox(height: 4),
                        Text(
                          '姓名: ${user.name}',
                          style: const TextStyle(fontSize: 14),
                        ),
                      ],
                    ),
                  ),
                );
              },
            );
          }
        },
      ),
    );
  }
}

// 为了使上面的代码可运行，需要User类和parseUsers函数
class User {
  final String no;
  final String name;

  User({required this.no, required this.name});

  factory User.fromJson(Map<String, dynamic> json) {
    return User(
      no: json['No'] as String,
      name: json['name'] as String,
    );
  }
}

const String jsonString = '''
[
   {"No":"020474","name":"Ayuk Baye"},
   {"No":"08273","name":"Cedrick"},
   {"No":"08274","name":"Ayuk Baye"},
   {"No":"08275","name":"Ayu Rebecca"},
   {"No":"08276","name":"Raymond"},
   {"No":"08277","name":"Jolie"},
   {"No":"08278","name":"Prince"},
   {"No":"08474","name":"Ayuk Baye"}
]
''';

List<User> parseUsers(String responseBody) {
  final parsed = jsonDecode(responseBody).cast<Map<String, dynamic>>();
  return parsed.map<User>((json) => User.fromJson(json)).toList();
}

// 如何在main.dart中使用
// void main() {
//   runApp(const MyApp());
// }
//
// class MyApp extends StatelessWidget {
//   const MyApp({super.key});
//
//   @override
//   Widget build(BuildContext context) {
//     return MaterialApp(
//       title: 'Flutter JSON List Demo',
//       theme: ThemeData(
//         primarySwatch: Colors.blue,
//       ),
//       home: const UserListPage(),
//     );
//   }
// }