我正在嘗試從我從 JSON API 獲得的資料中按日期對串列進行排序。JSON 是一個被序列化為模型的 Map。我嘗試了幾件事，但都沒有奏效。知道該怎么做嗎？不確定我是否應該在 Listview.builder 或 API 請求類中對其進行排序。
API 請求類
import 'package:http/http.dart' as http;
import 'package:lets_chat/app/modules/events/models/events.dart';
class EventApi {
static var client = http.Client();
static Future<Event?> fetchEvents() async {
final response = await client.get(Uri.parse(
'https://xposure.ae/wp-json/wp/auditorium/v1/events'));
if (response.statusCode == 200) {
var jsonString = response.body;
return eventFromJson(jsonString);
} else {
//show error message
return null;
}
}
}
模型類
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;
@override
void initState() {
data!.sort((a, b) => a.datetime.compareTo(b.datetime));
}
factory Event.fromJson(Map<String, dynamic> json) => Event(
data: json["data"] == null ? null : List<Datum>.from(json["data"].map((x) => Datum.fromJson(x))),
);
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"]],
);
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;
late 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:flutter/material.dart';
import 'package:get/get.dart';
import 'package:get/instance_manager.dart';
import 'package:lets_chat/app/modules/events/views/event_details.dart';
import 'package:lets_chat/app/modules/events/controllers/events_controller.dart';
import 'package:lets_chat/app/modules/events/views/event_tile.dart';
class EventView extends StatelessWidget {
final EventsController eventController = Get.put(EventsController());
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey[800],
appBar: AppBar(
backgroundColor: Colors.grey[850],
elevation: 2,
leading: GestureDetector(
onTap: () {
Navigator.pop(context);
},
child: const Icon(
Icons.arrow_back_ios,
color: Colors.grey,
),
),
),
body: Column(
children: [
Expanded(
child: Obx(() {
if (eventController.isLoading.value)
return Center(child: CircularProgressIndicator(
color: Colors.red,
));
else {
return ListView.builder(
itemCount: eventController.event.value!.data!.length,
itemBuilder: (context, index) {
return GestureDetector(
onTap: () {
Navigator.push(
context, MaterialPageRoute(builder: (context) => EventDetails(event: eventController.event.value!.data![index]))
);
},
child: EventTile(eventController.event.value!.data![index]));
});
}
}),
)
],
),
);
}
}
uj5u.com熱心網友回復：
以下是如何對來自 JSON API 的資料進行排序。
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Events",
style: TextStyle(color: Colors.black, fontSize: 16)),
backgroundColor: Color(0xffffffff),
elevation: 0.0,
actions: [
TextButton.icon(
icon: Icon(
Icons.refresh,
color: Colors.black,
),
onPressed: () {
if (ascend) {
sortAscending(); //to sort the date from oldest to latest
} else {
sortDescending(); //to sort the date from latest to oldest
}
},
label: Text(
"Sort by date",
style: TextStyle(fontSize: 11, color: Colors.black),
))
],
),
body: SingleChildScrollView(
child: Padding(
padding: EdgeInsets.only(left: 5),
child: Column(
children: _buildList(),
),
),
)),
debugShowCheckedModeBanner: false,
);
}
下面的代碼可以幫助您構建一系列小部件
List<Widget> _buildList() {
List<Widget> x = [];
//jsonData refers to the data from the JSON API
for (int i = 0; i < jsonData.length; i ) {
DateTime dateTime =
DateFormat("MMMM dd, yyyy - kk:mm").parse(jsonData[i]['datetime']);
x.add(
Row(children: [
Flex(
mainAxisAlignment: MainAxisAlignment.center,
direction: Axis.vertical,
children: [
Text(months[dateTime.month - 1].toString(),
style:
TextStyle(fontWeight: FontWeight.bold, fontSize: 14)),
Card(
child: Container(
padding: const EdgeInsets.all(8.0),
child: Flex(direction: Axis.vertical, children: [
Text(
dateTime.day.toString(),
style: TextStyle(
fontWeight: FontWeight.bold,
color: Color(0xff800200),
fontSize: 22),
),
Padding(
padding: EdgeInsets.only(top: 5),
child: Text(
dateTime.year.toString(),
style: TextStyle(fontSize: 11),
),
)
])),
),
]),
Flexible(
child: Card(
semanticContainer: true,
clipBehavior: Clip.antiAliasWithSaveLayer,
child: Container(
height: 200,
decoration: new BoxDecoration(
image: new DecorationImage(
image: NetworkImage(jsonData[i]['event_image']),
fit: BoxFit.fill,
colorFilter: new ColorFilter.mode(
Colors.black.withOpacity(0.25), BlendMode.dstATop),
),
),
child: Padding(
padding: EdgeInsets.only(right: 10, left: 10, bottom: 5),
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(jsonData[i]['Eventtitle'],
style: TextStyle(fontWeight: FontWeight.w800)),
SizedBox(
height: 5,
),
Row(
children: [
Icon(
Icons.pin_drop,
color: Colors.black54,
),
Text(
jsonData[i]['Location']['venue'],
style: TextStyle(fontSize: 13),
)
],
)
],
),
),
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
elevation: 5,
margin: EdgeInsets.all(10),
),
)
]),
);
}
return x;
}
當您使用 AppBar 上的操作按鈕按日期排序時，以下功能將有助于更新串列
sortAscending() {
setState(() {
ascend = false; //initialize this bool variable at the top of the class.
jsonData.sort((a, b) => DateFormat("MMMM dd, yyyy - kk:mm")
.parse(b['datetime'])
.compareTo(DateFormat("MMMM dd, yyyy - kk:mm").parse(a['datetime'])));
});
}
sortDescending() {
setState(() {
ascend = true;
jsonData.sort((a, b) => DateFormat("MMMM dd, yyyy - kk:mm")
.parse(a['datetime'])
.compareTo(DateFormat("MMMM dd, yyyy - kk:mm").parse(b['datetime'])));
});
}
您將在下面使用來格式化月份的名稱。
List months = [ 'JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'];
以下是說明的螢屏截圖：
uj5u.com熱心網友回復：
您似乎將日期存盤String在 Model 類中。
然后它按字母順序排序：
void main() {
List<String> dates = [
"September 14, 2022 - 2:35 PM",
"February 24, 2022 - 3:05 AM",
"February 3, 2022 - 10:10 AM",
"January 13, 2022 - 9:15 PM"
];
dates.sort((a, b) => a.compareTo(b));
dates.forEach(print);
}
// Dates get sorted alphabetically:
// February 24, 2022 - 3:05 pm
// February 3, 2022 - 10:10 pm
// January 13, 2022 - 9:15 pm
// September 14, 2022 - 2:35 pm
如果這是您面臨的問題，您可能應該在您的轉換中或（可能更好）在您的轉換DateTime中將它們轉換為物件。sortfromJson
簡單的例子：
void main2() {
List<DateTime> dates = [
"September 14, 2022 - 2:35 PM",
"February 24, 2022 - 3:05 AM",
"February 3, 2022 - 10:10 AM",
"January 13, 2022 - 9:15 PM"
].map((d) => DateFormat('MMMM d, y - h:mm a').parse(d)).toList();
dates.sort((a, b) => a.compareTo(b));
dates.forEach(print);
}
// Dates get sorted chronologically:
// 2022-01-13 21:15:00.000
// 2022-02-03 10:10:00.000
// 2022-02-24 03:05:00.000
// 2022-09-14 14:35:00.000
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/408529.html
標籤：