flutter - Flutter:如何按时间和日期对卡片列表进行排序
问题描述
我在整理卡片列表时遇到问题。每次我保存数据时,它都会在我的应用程序中作为卡片输出。它包含名称、时间、日期、图片等。问题是它不按时间和日期排序。它只是添加和添加。它甚至不堆叠,它只是添加到列表中的任何位置。顺便说一句,我通过 StreamBuilder 获取这些数据。谁能帮我解决这个问题?谢谢你。
我的 StreamBuilder 代码:
StreamBuilder<QuerySnapshot>(
stream: db.collection('HELP REQUEST').where('Type_OfDisaster', isEqualTo: '[Drought]').snapshots(),
builder: (context, snapshot) {
if (snapshot.hasData) {
return Column(
children: snapshot.data.documents
.map((doc) => buildItem(doc))
.toList());
}
else {
return Container(
child: Center(
child: CircularProgressIndicator()
)
);
}
});
我在卡片中输出数据的地方:
Container buildItem(DocumentSnapshot doc) {
return Container(
child: Padding(
padding: const EdgeInsets.only(left: 20.0, right: 20.0, bottom: 15.0),
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15),
),
color: Color(0xFFFFFFFF),
elevation: 5,
child: Padding(
padding: const EdgeInsets.only(top: 20, left: 20, right: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
children: <Widget> [
picture(),
SizedBox(
width: 10,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
children: <Widget>[
Text(
'${doc.data['Name_ofUser']}',
style: TextStyle(
fontSize: 11.5,
fontWeight: FontWeight.w800),
),
],
),
Row(
children: <Widget>[
Text(doc.data['Help_DatePosted'],
style: TextStyle(
fontSize: 9,
fontWeight: FontWeight.w800
),
),
],
)
],
),
Visibility(
visible: orgstat,
child: Padding(
padding: const EdgeInsets.only(left: 8.0, bottom: 5.0),
child: Icon(
FontAwesomeIcons.checkCircle,
color: Colors.green,
size: 12,
),
),
)
],
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
CircleAvatar(
radius: 20,
backgroundImage: AssetImage('assets/Drought.jpg')
),
],
),
],
),
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(
height: 20,
),
Padding(
padding: const EdgeInsets.only(top: 8.0),
child: Text('Description:', style: TextStyle(
fontSize: 11.5,
color: Color(0xFF000000)
),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: GestureDetector(
onTap: (){
setState(() {
});
},
child: Text(
'${doc.data['Help_Description']}',
maxLines: 3,
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.justify,
style: TextStyle(
fontSize: 13.5, fontWeight: FontWeight.w800,
color: Color(0xFF000000)),
),
),
),
Row(
children: <Widget>[
Text('Families affected:', style: TextStyle(
fontSize: 11.5,
color: Color(0xFF000000)
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'${doc.data['Help_FamiliesAffected']}',
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 13.5, fontWeight: FontWeight.w800,
color: Color(0xFF000000)),
),
),
],
),
Row(
children: <Widget>[
Text('Area/Barangay:', style: TextStyle(
fontSize: 11.5,
color: Color(0xFF000000)
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'${doc.data['Help_AreaAffected']}',
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 13.5,
fontWeight: FontWeight.w800,
color: Color(0xFF000000)
),
),
),
],
),
Row(
children: <Widget>[
Text('Things we need:',
style: TextStyle(
fontSize: 11.5,
color: Color(0xFF000000)
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'${doc.data['Help_ThingsNeeded']}'.replaceAll(new RegExp(r'[^\w\s\,]+'),''),
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 13.5,
fontWeight: FontWeight.w800,
color: Color(0xFF000000)),
),
),
],
),
Row(
children: <Widget>[
Text('Drop off location:',
style: TextStyle(
fontSize: 11.5,
color: Color(0xFF000000)
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'${doc.data['Help_DropoffLocation']}',
maxLines: 2,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 13.5, fontWeight: FontWeight.w800),
),
),
],
),
Row(
children: <Widget>[
Text('For inquiries call:',
style: TextStyle(
fontSize: 11.5,
color: Color(0xFF000000)
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'${doc.data['Help_Inquiry']}',
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 13.5,
fontWeight: FontWeight.w800,
color: Color(0xFF000000)
),
),
),
],
),
],
),
),
Padding(
padding: const EdgeInsets.only(top: 8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(bottom: 10, top: 15),
child: Container(
height: _height * 0.05,
width: _width * 0.30,
child: Text(
'${doc.data['Respondents_Count'].toString()} respondents.',
style: TextStyle(
color: Color(0xFF000000),
fontSize: 12,
fontWeight: FontWeight.w800,
),
),
),
),
Padding(
padding: const EdgeInsets.only(bottom: 10),
child: Container(
height: _height * 0.05,
width: _width * 0.30,
child: RaisedButton(
highlightColor: Color(0xFF02663B1),
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(20.0))),
color: Color(0xFF3F6492),
onPressed: () async {
final FirebaseAuth _firebaseAuth = FirebaseAuth.instance;
final FirebaseUser user = await _firebaseAuth.currentUser();
if (user.isEmailVerified){
Navigator.push(
context,
MaterialPageRoute(
builder: (BuildContext context) => DroughtFeedBenefactorAnswerHelp(
doc.data['Help_Description'],
doc.data['Name_ofUser'],
doc.data['User_ID'],
doc.data['Help_DropoffLocation'],
doc.data['Help_ThingsNeeded'],
doc.data['Type_OfDisaster'],
doc.data['Help_AreaAffected'],
doc.data['Unique_ID'],
widget.totalInterestedCount,
widget.totalConfirmedhelpCount,
doc.data['Respondents_Count']
)
)
);
}else{
_showVerifyEmail(doc.data);
}
},
child: Text(
'I want to help',
style: TextStyle(
color: Color(0xFFFFFFFF),
fontSize: 12,
fontWeight: FontWeight.w800),
),
),
),
)
],
),
),
],
),
),
),
),
);
}
我的卡的用户界面:
解决方案
可以使用firestore提供的ordeBy方法
https://firebase.google.com/docs/firestore/query-data/order-limit-data
db.collection('HELP REQUEST')
.where('Type_OfDisaster', isEqualTo: '[Drought]')
.orderBy('time', descending: true)
.snapshots()
希望它可以帮助你;)
推荐阅读
- android - 将 keras 模型从 pb 文件转换为 tflite 文件
- javascript - HTML/Javascript/CSS Collapsible Menu not staying closed when refreshed
- javascript - 在 Javascript 中进行持续计算
- azure - Azure 应用服务多实例:我是否需要更改我的 Web 应用代码
- java - 向 HttpURLConnection.getInputStream() 发送响应并避免“无效的 Http 响应”的格式是什么?
- php - PHP XMLReader 父子同名
- html - 圆形图像背景周围的透明 CSS 渐变
- sql-server - 如何仅选择前 ROW_NUMBER 并结合 SUM
- google-cloud-platform - 谷歌云:容器发布后自动更新使用触发器自动更新图像?
- content-security-policy - Google fonts blocked by Content Security Policy