Flutter:根据类型对ListView项进行排序 [英] Flutter: Sorting ListView items based on type
本文介绍了Flutter:根据类型对ListView项进行排序的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
所以我在Flutter的项目管理应用程序中有一个listview.builder.该列表视图充满了任务(它们可以是:新的，开始的，完成的).我从API获取此数据，并希望将新"的数据显示在顶部，而将开始"的数据显示在中间和底部！ -这就是现在的样子 这是我的 Class ，请注意，我从API/JSON获取状态
So I have a listview.builder in my Project management app in Flutter. This listview is filled with tasks(they can be: new, started, done). I get this data from an API and want the ones that are "new" to appear at the top, the ones that are started to be in the middle and the bottom for the "done" ones! - This is how it looks right now This is my Class, notice that I get the state from the API/JSON
class ProjectTask {
final int id;
final String description;
final String state;
final List assigned_users;
final List subtasks;
ProjectTask(this.id,
this.description,
this.state,
this.assigned_users,
this.subtasks);
}
ListView
else return ListView.builder(
itemCount: snapshot.data.length,
itemBuilder: (BuildContext context, int index) {
if(snapshot.data[index].state == "done") {
return Slidable(
//SLIDABLE STUFF
delegate: SlidableStrechDelegate(),
actionExtentRatio: 0.25,
actions: <Widget>[
//ACTION ONE
IconSlideAction(
caption: ("Information"),
foregroundColor: Colors.white,
color: Colors.black38,
icon: Icons.info,
onTap: () {
Navigator.push(context, MaterialPageRoute(builder: (context)=>projectTask(snapshot.data[index])));
},
),
],
child: ListTile(
onTap: () {
Navigator.push(context, MaterialPageRoute(builder: (context) => projectTask(
snapshot.data[index],
)));
},
title: Text("${snapshot.data[index].description[0].toString().toUpperCase()}"
"${snapshot.data[index].description.toString().substring(1)}", maxLines: 1, style: TextStyle(
color: Colors.black87, fontSize: 17)
),
subtitle: Text("done"),
leading: Icon(Icons.check_circle, color: Colors.green),
trailing: Icon(Icons.arrow_right, color: Colors.black54,),
),
);
}
else if(snapshot.data[index].state == "started") {
return Slidable(
//SLIDABLE STUFF
delegate: SlidableStrechDelegate(),
actionExtentRatio: 0.25,
actions: <Widget>[
//ACTION ONE
IconSlideAction(
caption: ("Information"),
foregroundColor: Colors.white,
color: Colors.black38,
icon: Icons.info,
onTap: () {
Navigator.push(context, MaterialPageRoute(builder: (context)=>projectTask(snapshot.data[index])));
},
),
],
secondaryActions: <Widget>[
//ACTION TWO
IconSlideAction(
caption: ("Complete Me"),
color: Colors.green,
icon: Icons.radio_button_checked,
onTap: () {
Navigator.push(context, MaterialPageRoute(builder: (context)=>projectTask(snapshot.data[index])));
},
)
],
child: ListTile(
onTap: () {
Navigator.push(context, MaterialPageRoute(builder: (context) => projectTask(
snapshot.data[index],
)));
},
title: Text("${snapshot.data[index].description[0].toString().toUpperCase()}"
"${snapshot.data[index].description.toString().substring(1)}", maxLines: 1, style: TextStyle(
color: Colors.black87, fontSize: 17)
),
subtitle: Text("working"),
leading: Icon(Icons.radio_button_checked, color: Colors.blue),
trailing: Icon(Icons.arrow_right, color: Colors.black54,),
),
);
}
else {
return Slidable(
//SLIDABLE STUFF
delegate: SlidableStrechDelegate(),
actionExtentRatio: 0.25,
actions: <Widget>[
//ACTION ONE
IconSlideAction(
caption: ("Information"),
foregroundColor: Colors.white,
color: Colors.black38,
icon: Icons.info,
onTap: () {
Navigator.push(context, MaterialPageRoute(builder: (context)=>projectTask(snapshot.data[index])));
},
),
],
secondaryActions: <Widget>[
//ACTION TWO
IconSlideAction(
caption: ("Start Work"),
color: Colors.blue,
icon: Icons.radio_button_checked,
onTap: () {
Navigator.push(context, MaterialPageRoute(builder: (context)=>projectTask(snapshot.data[index])));
},
)
],
//LISTTILE
child: ListTile(
onTap: () {
Navigator.push(context, MaterialPageRoute(builder: (context) => projectTask(
snapshot.data[index],
)));
},
title: Text("${snapshot.data[index].description[0].toString().toUpperCase()}"
"${snapshot.data[index].description.toString().substring(1)}", maxLines: 1, style: TextStyle(
color: Colors.black87, fontSize: 17)
),
subtitle: Text("new"),
leading: Icon(Icons.radio_button_checked, color: Colors.red),
trailing: Icon(Icons.arrow_right, color: Colors.black54,),
),
);
}
}
);
JSON
[
{
"id": 7,
"description": "Finishedddddd",
"state": "done",
"assigned_users": [
{
"username": "hugo",
"fullname": "Hugo Johnsson"
}
],
"subtasks": []
},
{
"id": 9,
"description": "Newwww task for Huuugo",
"state": "started",
"assigned_users": [
{
"username": "hugo",
"fullname": "Hugo Johnsson"
}
],
"subtasks": []
},
{
"id": 11,
"description": "Google presentation om IKEAS ekonomi",
"state": "done",
"assigned_users": [
{
"username": "studentone",
"fullname": "Student One"
}
],
"subtasks": []
},
{
"id": 15,
"description": "entail",
"state": "new",
"assigned_users": [],
"subtasks": [
{
"id": 1,
"description": "dasdasdasd"
},
{
"id": 2,
"description": "fsdfsdfsdf"
}
]
},
{
"id": 17,
"description": "gmmgmsgd",
"state": "new",
"assigned_users": [],
"subtasks": []
},
{
"id": 18,
"description": "dasd",
"state": "started",
"assigned_users": [],
"subtasks": []
},
{
"id": 19,
"description": "fsdfdsfsd",
"state": "started",
"assigned_users": [],
"subtasks": []
},
{
"id": 20,
"description": "Werner",
"state": "new",
"assigned_users": [],
"subtasks": []
},
{
"id": 21,
"description": "teadfsd",
"state": "done",
"assigned_users": [],
"subtasks": []
},
{
"id": 22,
"description": "task",
"state": "new",
"assigned_users": [],
"subtasks": []
},
{
"id": 23,
"description": "asdasd",
"state": "started",
"assigned_users": [],
"subtasks": []
},
{
"id": 24,
"description": "asdasd",
"state": "new",
"assigned_users": [
{
"username": "hugo",
"fullname": "Hugo Johnsson"
}
],
"subtasks": []
}
]
推荐答案
您应在创建ListView之前对数据进行排序.您可以使用基本的 dart排序方法.基本上，您只需要实现比较功能即可返回一个整数，该返回值的符号指定项的顺序.
You should sort the data before creating the ListView. You can use basic dart sort method. Basically you just need to implement the compare function which returns an integer that the sign of the return value specify items order.
阅读以下示例代码以更好地理解:
Read this example code for better understanding:
enum TaskState {
newTask, done, started
}
class Task {
Task(this.id, this.state);
final int id;
final TaskState state;
String toString() {
return "$id";
}
}
int compare(TaskState a, TaskState b) {
if (a == b) return 0;
switch(a) {
case TaskState.newTask:
return -1;
break;
case TaskState.started:
if(b == TaskState.newTask) return 1;
return -1;
break;
case TaskState.done:
return 1;
break;
}
}
void main() {
List<Task> list = [
Task(1, TaskState.done),
Task(3, TaskState.newTask),
Task(4, TaskState.started),
Task(2, TaskState.done),
Task(10, TaskState.newTask),
];
list.sort((a, b) => compare(a.state, b.state));
print(list);
}
在代码中执行的操作应该是这样的
FutureBuilder<List<ProjectTask>>(
future: someQuery(),
builder: (BuildContext context, AsyncSnapshot<dynamic> snap) {
snap.data.sort((a, b) => {
if (a == b) return 0;
switch(a) {
case "new":
return -1;
break;
case "started":
if(b == "new") return 1;
return -1;
break;
case "done":
return 1;
break;
}
});
return ListView.builder(
...
)
}
)
这篇关于Flutter:根据类型对ListView项进行排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
