时间戳

首页 > 解决方案 > 在颤振中解析json对象

json - 在颤振中解析json对象

问题描述

我有这样的数据json。

{
    "id": 3,
    "fname": "joni"
}

我想在首页显示

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

获取用户模型.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？谢谢你 ！

标签： jsonflutterdartflutter-layout

解决方案

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

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.

推荐阅读