這是我從服務器獲取的串列`
[
{
"Name": "101 Working hours",
"Balance": "8.00",
"Date": "2022-10-19",
"ShiftName": "AU128"
},
{
"Name": "102 Bonus pay",
"Balance": "3:48",
"Date": "2022-10-19",
"ShiftName": ""
},
{
"Name": "110 Split Shift",
"Balance": "1:00",
"Date": "2022-10-19",
"ShiftName": ""
},
{
"Name": "111 Wage reduction",
"Balance": "1:00",
"Date": "2022-10-19",
"ShiftName": ""
},
{
"Name": "111 Wage reduction",
"Balance": "1:00",
"Date": "2022-10-20",
"ShiftName": ""
},
{
"Name": "101 Working hours",
"Balance": "8.00",
"Date": "2022-10-21",
"ShiftName": "AU128"
},
{
"Name": "102 Bonus pay",
"Balance": "3:48",
"Date": "2022-10-21",
"ShiftName": ""
},
{
"Name": "110 Split Shift",
"Balance": "1:00",
"Date": "2022-10-21",
"ShiftName": ""
},
{
"Name": "111 Wage reduction",
"Balance": "1:00",
"Date": "2022-10-21",
"ShiftName": ""
},
]
`
在這里你可以看到日期在重復，我只想避免在 FE 上重復日期。您可以查看應用程式螢屏截圖以了解我得到的以及我想要實作的想法。
我得到的資料。
我想要達到的資料
如果日期相同，我試圖避免日期重復并在同一個串列中插入資料，但我一直得到重復日期和資料，如您在影像中看到的那樣。
我的代碼：
Expanded(
child: Consumer<EmployeeWageAccountsProvider>(
builder: (context, data, child) {
if (!data.isLoading) {
int length = data.getEmployeeAccountsData!.length;
if (data.getEmployeeAccountsData!.isNotEmpty) {
wageAccountsData = data.getEmployeeAccountsData!;
return ListView.builder(
itemCount: length,
shrinkWrap: true,
scrollDirection: Axis.vertical,
itemBuilder: (context, i) {
return WageAccountsCard(
date: Helper.formatStringDate(
wageAccountsData[i].date!),
balance: wageAccountsData[i].balance,
name: wageAccountsData[i].name,
shiftName: wageAccountsData[i].shiftName,
);
},
);
}
return noDataFound(context, 50);
}
return const WageAccountsShimmer();
}),
)
工資卡
class WageAccountsCard extends StatelessWidget {
final String? date;
final String? balance;
final String? name;
final String? shiftName;
const WageAccountsCard(
{Key? key, this.date, this.name, this.balance,
this.shiftName})
: super(key: key);
@override
Widget build(BuildContext context) {
return Container(
margin: const EdgeInsets.all(10),
padding: const EdgeInsets.all(8),
decoration: CustomBoxDecoration.cardDecoration(context,
shadow: true),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
shiftName!,
style: wageTextStyle,
),
Text(
date.toString(),
style: wageTextStyle,
),
],
),
SizedBox(
height: Styles.height(context) * 0.01,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
S.of(context).wage_type,
style: cTextStyle,
),
Text(
S.of(context).balance,
style: cTextStyle,
),
],
),
const Divider(
color: Colors.black,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
name!,
style: cTextStyle,
),
Text(
balance.toString(),
style: cTextStyle,
),
],
),
SizedBox(
height: Styles.height(context) * 0.01,
),
],
),
);
}
}
模型類
class EmployeeWageAccountsModel {
String? name;
String? balance;
String? date;
String? shiftName;
EmployeeWageAccountsModel({this.name, this.balance, this.date,
this.shiftName});
EmployeeWageAccountsModel.fromJson(Map<String, dynamic> json) {
name = json['Name'];
balance = json['Balance'];
date = json['Date'];
shiftName = json['ShiftName'];
}
Map<String, dynamic> toJson() {
final Map<String, dynamic> data = <String, dynamic>{};
data['Name'] = name;
data['Balance'] = balance;
data['Date'] = date;
data['ShiftName'] = shiftName;
return data;
}
}
從 API 決議資料
List<EmployeeWageAccountsModel> employeeWageAccountsList =
List<EmployeeWageAccountsModel>.from(
employeeWageAccountsResponse.map((model) =>
EmployeeWageAccountsModel.fromJson(model)));
uj5u.com熱心網友回復：
您可以Map<String, List<Map<String, String>>>使用forEachwhere 鍵是唯一日期，值是物件串列。
void main() {
const data = [
{
"Name": "101 Working hours",
"Balance": "8.00",
"Date": "2022-10-19",
"ShiftName": "AU128"
},
{
"Name": "102 Bonus pay",
"Balance": "3:48",
"Date": "2022-10-19",
"ShiftName": ""
},
{
"Name": "110 Split Shift",
"Balance": "1:00",
"Date": "2022-10-19",
"ShiftName": ""
},
{
"Name": "111 Wage reduction",
"Balance": "1:00",
"Date": "2022-10-19",
"ShiftName": ""
},
{
"Name": "111 Wage reduction",
"Balance": "1:00",
"Date": "2022-10-20",
"ShiftName": ""
},
{
"Name": "101 Working hours",
"Balance": "8.00",
"Date": "2022-10-21",
"ShiftName": "AU128"
},
{
"Name": "102 Bonus pay",
"Balance": "3:48",
"Date": "2022-10-21",
"ShiftName": ""
},
{
"Name": "110 Split Shift",
"Balance": "1:00",
"Date": "2022-10-21",
"ShiftName": ""
},
{
"Name": "111 Wage reduction",
"Balance": "1:00",
"Date": "2022-10-21",
"ShiftName": ""
},
];
final Map<String, List<Map<String, String>>> dates = {};
data.forEach((e) {
if (dates.containsKey(e['Date'])) {
dates[e['Date']]?.add(e);
} else {
dates[e['Date']!] = [e];
}
});
dates.forEach((e, k) {
print("$e\n${k.join("\n")}");
print('\n');
});
}
uj5u.com熱心網友回復：
實作這一目標的一種方法是使用equatable包，以便您可以比較物件
class Person extends Equatable {
const Person(this.name,this.date);
final String name;
final DateTime date;
@override
List<Object> get props => [name,date];
}
現在您可以比較兩個 Person 型別的物件，并且使用一個簡單的函式可以洗掉重復。例子：
List<Person> yourList = [];
// before you add new object check if its already available
int getEqual(Person onePerson)=>yourList.indexWhere((element)=> element == onePerson);
if (getEqual(onePerson) != -1){
// object was not found in the list
yourList.add(onePerson);
}
// then sort your list by date using sort method
yourList.sort((a,b) => a.date.compareTo(b.date));
uj5u.com熱心網友回復：
您可以使用收集包并將您的資料與日期分組：
var grouped = groupBy(xdata, (Map value) => value['Date']);
然后你可以根據grouped. 請注意，這xdata是您從服務器獲得的串列。
grouped是地圖并包含以下內容：
{
2022-10-19: [
{Name: 101 Working hours, Balance: 8.00, Date: 2022-10-19, ShiftName: AU128},
{Name: 102 Bonus pay, Balance: 3:48, Date: 2022-10-19, ShiftName: },
{Name: 110 Split Shift, Balance: 1:00, Date: 2022-10-19, ShiftName: },
{Name: 111 Wage reduction, Balance: 1:00, Date: 2022-10-19, ShiftName: }
],
2022-10-20: [
{Name: 111 Wage reduction, Balance: 1:00, Date: 2022-10-20, ShiftName: }
],
2022-10-21: [
{Name: 101 Working hours, Balance: 8.00, Date: 2022-10-21, ShiftName: AU128},
{Name: 102 Bonus pay, Balance: 3:48, Date: 2022-10-21, ShiftName: },
{Name: 110 Split Shift, Balance: 1:00, Date: 2022-10-21, ShiftName: },
{Name: 111 Wage reduction, Balance: 1:00, Date: 2022-10-21, ShiftName: }
]
}
還將您的模型類更改為：
class EmployeeWageAccountsModel {
String? date;
String? shiftName;
List<Wage>? wages;
EmployeeWageAccountsModel({this.wages, this.date, this.shiftName});
EmployeeWageAccountsModel.fromJson(Map<String, dynamic> json) {
wages = (json.values.first as List).map((e) => Wage.fromJson(e)).toList();
date = json.keys.first;
shiftName = json.values.first[0]['ShiftName'];
}
...
}
class Wage {
String? name;
String? balance;
Wage({this.name, this.balance});
Wage.fromJson(Map<String, dynamic> json) {
name = json['Name'];
balance = json['Balance'];
}
}
并像這樣決議它：
var grouped =
groupBy(employeeWageAccountsResponse, (Map value) => value['Date']);
List<EmployeeWageAccountsModel> employeeWageAccountsList =
List<EmployeeWageAccountsModel>.from(grouped.entries
.map((e) => EmployeeWageAccountsModel.fromJson({e.key: e.value})));
然后將您的串列項更改為：
class WageAccountsCard extends StatelessWidget {
final String? date;
final String? shiftName;
final List<Wage>? wages;
const WageAccountsCard(
{Key? key,
this.date,
this.shiftName,
this.wages})
: super(key: key);
@override
Widget build(BuildContext context) {
return Container(
margin: const EdgeInsets.all(10),
padding: const EdgeInsets.all(8),
decoration: CustomBoxDecoration.cardDecoration(context, shadow: true),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
shiftName!,
style: wageTextStyle,
),
Text(
date.toString(),
style: wageTextStyle,
),
],
),
SizedBox(
height: Styles.height(context) * 0.01,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
S.of(context).wage_type,
style: cTextStyle,
),
Text(
S.of(context).balance,
style: cTextStyle,
),
],
),
const Divider(
color: Colors.black,
),
ListView.builder(
itemBuilder: (context, index) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
wages![index].name!,
style: cTextStyle,
),
Text(
wages![index].balance.toString(),
style: cTextStyle,
),
],
);
},
itemCount: wages!.length,
shrinkWrap: true,
),
SizedBox(
height: Styles.height(context) * 0.01,
),
],
),
);
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/523334.html
標籤：扑休息镖数据结构颤振布局