在颤振中解析json对象

Posted 2023-02-23

【中文标题】在颤振中解析json对象

【英文标题】：parsing json object in flutter

【发布时间】：2021-09-25 23:20:59

【问题描述】：

我有这样的数据 json。

    "id": 3,
    "fname": "joni"

我想在首页显示

之前我在下面创建了一个模型类

GetUserModel.dart

class GetUserModel
  int id;
  String fname;

  GetUserModel(
    this.id,
    this.fname,
  );

  GetUserModel.fromJson(Map<String, dynamic> response) 
    id = response['id'];
    fname = response['fname'];
  

  Map<String, dynamic> toJson() 
    return 
      'id': id,
      'fname': fname,
    ;
  

我创建了一个服务页面来与 api 交互

class UserServices 
  String baseUrl = 'https://myurl.com';

  Future<GetUserModel> getDataUser() async 
    print(url);
    var headers = 
      'Content-Type': 'application/json'
    ;

    var response = await http.get(
      Uri.parse(url),
      headers: headers,
    );

    if (response.statusCode == 200) 
      var data = jsonDecode(response.body);
      GetUserModel user = GetUserModel.fromJson(data);
      return user;
     else 
      print(response.body);
      throw Exception('Failed');
    
  

我有 UserProvider.dart

class UserProvider with ChangeNotifier 
  List<GetUserModel> _u = [];

  List<GetUserModel> get users => _u;

  set users(List<GetUserModel> users) 
    _u = users;
    notifyListeners();
  

  Future<void> getuserdua() async 
    try 
      users = await UserServices().getuserdua();
      _u = users;
     catch (e) 
      print(e);
    
  

和 homepage.dart

class Homepage extends StatelessWidget 
  @override
  Widget build(BuildContext context) 

    UserProvider x = Provider.of<UserProvider>(context);

    return Container(
      color: Colors.white,
      child: Center(
        child: Text($x.fname), // i have view fname
      ),
    );
  

在显示主页之前，我创建了一个启动页面来加载 API。

class SplashPage extends StatefulWidget 
  @override
  _SplashPageState createState() => _SplashPageState();


class _SplashPageState extends State<SplashPage> 
  @override
  void initState() 
    load();
    super.initState();
  

  Future<void> load() async 
      await Provider.of<UserProvider>(context, listen: false).getuserdua();
  

如何在首页显示我从服务中获取的fname？谢谢！

【问题讨论】：

on ``` GetUserModel.fromJson(Map response) id = response['id']; fname = 响应['fname']; ``` 使用 ` id = response['id'] as int ;` 有帮助吗？

【参考方案1】：

首先在您的 api 调用中使用 notifyListeners()：

Future<void> getuserdua() async 
    try 
      users = await UserServices().getuserdua();
      _u = users;
      notifyListeners();
     catch (e) 
      print(e);
    
  

那么，您可以按如下方式访问这些数据：

return Container(
      color: Colors.white,
      child: Center(
        child: Text($x.users[0].fname), // i have view fname
      ),
    );

但是，如果您需要显示您的模型的所有列表，请使用ListView。

【讨论】：

我在哪里放置未来的无效？

我觉得还是放到provider里面再调用比较好。但您可以使用描述加载状态的布尔值。如果还没有加载，显示进度条什么的，加载完毕就可以显示结果了。