我對 Flutter 開發還是個新手，最近我一直在嘗試呼叫 API。我已經設法做到了，而無需將資料放入模型中，并且運行良好。問題是當我嘗試序列化資料時。我已經使用 app.quicktype.io 創建了一個模型。我不確定如何在我的視圖檔案中呼叫它。
該專案正在使用 Getx。
API 經理
import 'package:api_test_2/models/event.dart';
import 'package:http/http.dart' as http;
class ApiManager {
static var client = http.Client();
// Future as <List<Event>> maybe ?
static Future<Event?> fetchEvents() async {
var response = await client.get(Uri.parse(
'https://xposure.ae/wp-json/wp/auditorium/v1/events'));
if (response.statusCode == 200) {
var jsonString = response.body;
print(jsonString);
return eventFromJson(jsonString);
} else {
//show error message
return null;
}
}
}
事件模型
// To parse this JSON data, do
//
// final event = eventFromJson(jsonString);
import 'package:meta/meta.dart';
import 'dart:convert';
Event eventFromJson(String str) => Event.fromJson(json.decode(str));
String eventToJson(Event data) => json.encode(data.toJson());
class Event {
Event({
required this.data,
});
List<Datum>? data;
factory Event.fromJson(Map<String, dynamic> json) => Event(
data: json["data"] == null ? null : List<Datum>.from(json["data"].map((x) => Datum.fromJson(x))),
);
//null check added after data
Map<String, dynamic> toJson() => {
"data": data == null ? null : List<dynamic>.from(data!.map((x) => x.toJson())),
};
}
class Datum {
Datum({
required this.eventtitle,
required this.description,
required this.eventImage,
required this.speaker,
required this.datetime,
required this.location,
});
String? eventtitle;
String description;
String? eventImage;
Speaker? speaker;
String? datetime;
Location? location;
factory Datum.fromJson(Map<String, dynamic> json) => Datum(
eventtitle: json["Eventtitle"] == null ? null : json["Eventtitle"],
description: json["Description"] == null ? null : json["Description"],
eventImage: json["event_image"] == null ? null : json["event_image"],
speaker: json["Speaker"] == null ? null : Speaker.fromJson(json["Speaker"]),
datetime: json["datetime"] == null ? null : json["datetime"],
location: json["Location"] == null ? null : Location.fromJson(json["Location"]),
);
Map<String, dynamic> toJson() => {
"Eventtitle": eventtitle == null ? null : eventtitle,
"Description": description == null ? null : description,
"event_image": eventImage == null ? null : eventImage,
"Speaker": speaker == null ? null : speaker!.toJson(),
"datetime": datetime == null ? null : datetime,
"Location": location == null ? null : location!.toJson(),
};
}
class Location {
Location({
required this.venue,
required this.address,
});
Venue? venue;
Address? address;
factory Location.fromJson(Map<String, dynamic> json) => Location(
venue: json["venue"] == null ? null : venueValues.map[json["venue"]],
address: json["address"] == null ? null : addressValues.map[json["address"]],
);
//added null checks after reverse
Map<String, dynamic> toJson() => {
"venue": venue == null ? null : venueValues.reverse![venue],
"address": address == null ? null : addressValues.reverse![address],
};
}
enum Address { SHARJAH_BR_SHARJAH_BR_61110_BR_UNITED_ARAB_EMIRATES }
final addressValues = EnumValues({
"Sharjah</br>Sharjah,</br>61110,</br>United Arab Emirates": Address.SHARJAH_BR_SHARJAH_BR_61110_BR_UNITED_ARAB_EMIRATES
});
enum Venue { XPOSURE_INTERNATIONAL_PHOTOGRAPHY_FESTIVAL }
final venueValues = EnumValues({
"Xposure International Photography Festival": Venue.XPOSURE_INTERNATIONAL_PHOTOGRAPHY_FESTIVAL
});
class Speaker {
Speaker({
required this.speakername,
required this.link,
});
String speakername;
String link;
factory Speaker.fromJson(Map<String, dynamic> json) => Speaker(
speakername: json["speakername"] == null ? null : json["speakername"],
link: json["link"] == null ? null : json["link"],
);
Map<String, dynamic> toJson() => {
"speakername": speakername == null ? null : speakername,
"link": link == null ? null : link,
};
}
class EnumValues<T> {
Map<String, T> map;
Map<T, String>? reverseMap;
EnumValues(this.map);
Map<T, String>? get reverse {
if (reverseMap == null) {
reverseMap = map.map((k, v) => new MapEntry(v, k));
}
return reverseMap;
}
}
控制器
import 'package:api_test_2/models/event.dart';
import 'package:api_test_2/services/api_manager.dart';
import 'package:get/state_manager.dart';
class EventController extends GetxController {
var isLoading = true.obs;
// var eventList = List<Event>().obs;
var eventList = <Event>[].obs;
@override
void onInit() {
fetchEvents();
super.onInit();
}
void fetchEvents() async {
try {
isLoading(true);
var events = await ApiManager.fetchEvents();
if (events != null) {
// added cast as List<Event>
eventList.value = events as List<Event>;
}
} finally {
isLoading(false);
}
}
}
主視圖
import 'package:api_test_2/controllers/event_controller.dart';
import 'package:api_test_2/views/event_tile.dart';
import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:get/get.dart';
import 'package:get/instance_manager.dart';
class HomePage extends StatelessWidget {
final EventController eventController = Get.put(EventController());
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
elevation: 0,
leading: const Icon(
Icons.arrow_back_ios,
),
actions: [
IconButton(
icon: const Icon(
Icons.shopping_cart,
),
onPressed: () {},
)
],
),
body: Column(
children: [
Padding(
padding: const EdgeInsets.all(16),
child: Row(
children: [
const Expanded(
child: Text(
'ShopX',
style: TextStyle(
fontFamily: 'avenir',
fontSize: 32,
fontWeight: FontWeight.w900),
),
),
IconButton(
icon: const Icon(Icons.view_list_rounded), onPressed: () {}),
IconButton(icon: const Icon(Icons.grid_view), onPressed: () {}),
],
),
),
Expanded(
child: Obx(() {
if (eventController.isLoading.value)
return Center(child: CircularProgressIndicator());
else {
return StaggeredGridView.countBuilder(
crossAxisCount: 1,
itemCount: eventController.eventList.length,
crossAxisSpacing: 16,
mainAxisSpacing: 16,
itemBuilder: (context, index) {
return EventTile(eventController.eventList[index]);
},
staggeredTileBuilder: (index) => StaggeredTile.fit(1),
);
}
}),
)
],
),
);
}
}
事件磁貼
import 'package:api_test_2/models/event.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
class EventTile extends StatelessWidget {
final Event event;
const EventTile(this.event);
@override
Widget build(BuildContext context) {
return Card(
elevation: 2,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Text(
// ),
],
),
),
);
}
}
我想我在轉換為 List 或 Map 時做錯了，但我不確定它是在我的 API 管理器類中還是在事件模型本身中。如果有人可以提供幫助，我將不勝感激。
uj5u.com熱心網友回復：
您的實際事件串列位于data模型的屬性內。因此，您的控制器應該是：
class EventController extends GetxController {
final isLoading = true.obs;
final event = Rxn<Event>();
@override
void onInit() async{
await fetchEvents();
super.onInit();
}
void fetchEvents() async {
try {
isLoading(true);
var response = await ApiManager.fetchEvents();
if (response != null) {
event.value = response;
}
} finally {
isLoading(false);
}
}
}
還有你的StaggeredGridView：
return StaggeredGridView.countBuilder(
crossAxisCount: 1,
itemCount: eventController.event.value.data.length,
crossAxisSpacing: 16,
mainAxisSpacing: 16,
itemBuilder: (context, index) {
return EventTile(eventController.event.value.data[index]);
},
staggeredTileBuilder: (index) => StaggeredTile.fit(1),
);
最后，您的EventTile：
class EventTile extends StatelessWidget {
final Datum datum;
const EventTile(this.datum);
@override
Widget build(BuildContext context) {
return Card(
elevation: 2,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Text(
// ),
],
),
),
);
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/374705.html