在颤振中解析json对象

Question

我有这样的数据 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？谢谢！

Answer 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。