我已經使用 get 方法來檢索用戶詳細資訊，并且也獲得了 200 個狀態。我對如何在 UI 中顯示詳細資訊感到困惑。在我的主頁中，我有一個指向個人資料頁面的浮動操作按鈕。任何幫助將不勝感激謝謝。
Future getProfile() async {
String? token = await getToken();
final response = await http.get(Uri.parse('$API_URL/user'), headers: {
'Accept': 'application/json',
'Authorization': 'Bearer $token'
});
print(response.statusCode);
if (response.statusCode == 200) {
if (response.body != "") {
var results = json.decode(response.body);
var resultData = results['data']['name'];
print(resultData);
}
}
}
uj5u.com熱心網友回復：
你可以使用FutureBuilder這樣的：
FutureBuilder<dynamic>(
future: getProfile,
builder: (BuildContext context, AsyncSnapshot<dynamic> snapshot) {
switch (snapshot.connectionState) {
case ConnectionState.waiting: return Text('Loading....');
default:
if (snapshot.hasError)
return Text('Error: ${snapshot.error}');
else
return Text('Result: ${snapshot.data}');
}
},
);
...
Future getProfile() async {
String? token = await getToken();
final response = await http.get(Uri.parse('$API_URL/user'), headers: {
'Accept': 'application/json',
'Authorization': 'Bearer $token'
});
dynamic resultData;
if (response.statusCode == 200) {
if (response.body != "") {
var results = json.decode(response.body);
resultData = results['data']['name'];
print(resultData);
}
}
return resultData;
}
uj5u.com熱心網友回復：
當您使用網路資料（即 API 回應）時，最佳實踐表明您應該將接收到的資料轉換為 Dart 物件。然后，您將能夠輕松訪問您的資料。
快速簡便的方法（不推薦）
對于快速而骯臟的方法，您可以執行以下操作： 1- 為您的用戶創建一個模型。創建新檔案并命名user_model.dart
class User{
String id;
String name;
// Add whatever other properties you need to pull from the server here
User({
this.id,
this.name,
});
// This function will help you convert the deata you receive from the server
// into an instance of User
factory User.fromJson(Map<String, dynamic> json) => User({
id: json['id'],
namne: json['name']
})
}
2- 在你的getProfile()函式中實體化一個新用戶
Future<User?> getProfile() async { // you want to get a Future<User>
String? token = await getToken();
final response = await http.get(Uri.parse('$API_URL/user'), headers: {
'Accept': 'application/json',
'Authorization': 'Bearer $token'
});
print(response.statusCode);
if (response.statusCode == 200) {
if (response.body != "") {
var result = json.decode(response.body)['data']; // select the data you need here
final user = User.fromJson(result) // create a new User instance
return user // return it
}
}
// in case something went wrong you want to return null
// you can always check the nullity of your instance later in your code
return null;
}
3- 在您的 UI 中，您可以像這樣使用新創建的實體。我假設您在build()任何小部件的功能中！
//...
@override
Widget build(BuildContext context) {
return FutureBuilder<dynamic>(
future: getProfile,
builder: (BuildContext context, AsyncSnapshot<dynamic> snapshot) {
if(snapshot.hasData){
final user = snapshot;
// now you can access your user's data as you wish
print(user.id);
print(user.name);
}
);
}
//...
更好的方法（推薦）
上述方法雖然似乎有效，但對于更復雜的專案來說并不理想。為此，您需要遵循如下所示的路線圖：
- 使用freezed等包自動化物件序列化/反序列化。這將通過為您構建 toJson 和 fromJson 方法等，將您從任何不需要的錯誤注入中解脫出來；）。查看他們的檔案以獲取更多詳細資訊。
- 使用像bloc這樣的狀態管理庫來管理資料流。您可以從小部件樹中的任何位置訪問您的狀態，在您的情況下是用戶的組態檔資料，而無需在任何地方使用
FutureBuilder。它還將幫助您與資料保持同步。查看他們撰寫良好的檔案以獲取有關如何使用它的更多詳細資訊。
我在這里提到了這兩個庫，因為它們是我一直使用的并且我熟悉的庫。他們可能是其他人或多或少做同樣的事情。由你來選擇你覺得舒服的；）
熟悉狀態管理庫后，您可以按如下方式構建您的應用程式：
/...
-lib
|- model #build your data instance and return object
|- repository #call API methods and convert received data to model instance
|- api #make HTTP calls
|- ui #build UI elements
|- bloc #receive events from UI and call repository functions then return datastreams to UI
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/420295.html
標籤：
上一篇：在顫振中初始化未來？