在Flutter中解析PHP关联数组并构建动态列表视图

{"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});

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

import 'dart:convert';

// 假设这是从网络请求中获取到的有效JSON字符串
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();
}

// 在实际应用中，你可能会在一个异步函数中调用它
// List<User> myUserList = parseUsers(jsonString);

import 'package:flutter/material.dart';

// 假设 User 类和 parseUsers 函数已定义
// ... (User class and parseUsers function from above) ...

class UserListPage extends StatefulWidget {
  @override
  _UserListPageState createState() => _UserListPageState();
}

class _UserListPageState extends State<UserListPage> {
  List<User> _users = [];
  bool _isLoading = true;
  String _error = '';

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

  Future<void> _fetchUsers() async {
    setState(() {
      _isLoading = true;
      _error = '';
    });
    try {
      // 模拟网络请求延迟
      await Future.delayed(Duration(seconds: 2));

      // 假设这是从API获取到的JSON字符串
      String fetchedJsonString = '''
      [
         {"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> parsedUsers = parseUsers(fetchedJsonString);
      setState(() {
        _users = parsedUsers;
        _isLoading = false;
      });
    } catch (e) {
      setState(() {
        _error = 'Failed to load users: $e';
        _isLoading = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('用户列表'),
      ),
      body: _isLoading
          ? Center(child: CircularProgressIndicator())
          : _error.isNotEmpty
              ? Center(child: Text(_error))
              : ListView.builder(
                  itemCount: _users.length,
                  itemBuilder: (context, index) {
                    final user = _users[index];
                    return Card(
                      margin: EdgeInsets.symmetric(vertical: 4, horizontal: 8),
                      child: ListTile(
                        leading: CircleAvatar(
                          child: Text(user.no.substring(0, 2)), // 显示No的前两位
                        ),
                        title: Text(user.name),
                        subtitle: Text('编号: ${user.no}'),
                        onTap: () {
                          // 点击列表项时的操作
                          ScaffoldMessenger.of(context).showSnackBar(
                            SnackBar(content: Text('点击了 ${user.name}')),
                          );
                        },
                      ),
                    );
                  },
                ),
    );
  }
}