Flutter 如何將分組數據添加到列表中

Question

如何將分組的 json 數據制作成顫動的列表？ 我已經對 jsondata 進行了分組。

final data = body.data['items']; // gets json data here
final uniqueSetOfChapters =groupBy(data, (dynamic obj) => obj['chapter']); // grouping it here
    uniqueSetOfChapters.forEach((key, value) {
      print('$key : : $value');
     });

結果我得到一個分組數據如下

Measurement : : [
{sequenceno: 193, _id: 5dc1, chapter: Measurement, title: Measuring Length, package_description: Let us learn about ‘Measurement using Length'., age_level: [99, 6], pkg_sequence: 251},
     {sequenceno: 193, _id: 5d99, chapter: Measurement, title: Measuring Weight, package_description: Let us learn about ‘Measuring Weight’., age_level: [99, 6], pkg_sequence: 251},
     {sequenceno: 1933, _id: 5d99, chapter: Measurement, title: Measuring Capacity, package_description: This module introduces how to measure the capacity of a container., age_level: [99, 6], pkg_sequence: 251}, 
    {sequenceno: 193, _id: 5ef4, chapter: Measurement, title: Revision - Measuring Length, package_description: In this module, we will revise about measurement using length., age_level: [99, 6], pkg_sequence: 2514],
    
 Data Handling : : [
{sequenceno: 193, _id: 5e23, chapter: Data Handling, title: Bar chart, package_description: This module helps to understand how to represent data., age_level: [99, 6], pkg_sequence: 2511},
 {sequenceno: 193, _id: 5f15, chapter: Data Handling, title: Revision - Bar chart, package_description: Let us revise some activities on presenting data in the form of graphs., age_level: [99, 6], pkg_sequence: 251}
]

我怎樣才能把這個分組的數據放到一個列表中？ 我為此創建了一個模型，如下所示

class Titles{
  String? sequenceno;
  String? id;
  String? chapter;
   String? title;
  String? packageDescription;
  String? ageLevel;
  String? pkgSequence;
  String? packagescors;
  Titles({
    this.sequenceno,
    this.id,
    this.chapter,
    this.title,
    this.packageDescription,
    this.ageLevel,
    this.pkgSequence,
    this.packagescors,
  });
  factory Titles.fromMap(Map<String, dynamic> map) {
    return Titles(
      sequenceno: map['sequenceno'],
      id: map["_id"],
      chapter: map['chapter'],
      title: map['title'],
      packageDescription: map['package_description'],
      ageLevel: map['age_level'],
      pkgSequence: map['pkg_sequence'],
      // packagescors: map['packagescors'],
    );
}
Map<String, dynamic> toMap(){
      var map = <String,dynamic>{
        "sequenceno": sequenceno,
        "_id": id,
        "chapter": chapter,
        "title": title,
        "package_description": packageDescription,
        "age_level": ageLevel,
        "pkg_sequence": pkgSequence,
         "packagescors": packagescors,
      };
       return map;
      }}

如何將此分組數據添加到列表中？

Answer 1

您可以嘗試使用 grouped_list 包： https ://pub.dev/packages/grouped_list

輸出樣本：

代碼片段：

     @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: Appbar(title: "Titles",),
      body: Container(
          child: GroupedListView<dynamic, String>(
            elements: measurements,
            groupBy: (element) => element.chapter,
            groupComparator: (value1, value2) => value2.compareTo(value1),
            order: GroupedListOrder.ASC,
            useStickyGroupSeparators: true,
            groupSeparatorBuilder: (String value) => Padding(
              padding: const EdgeInsets.only(left: 8.0),
              child: Text(
                value,
                textAlign: TextAlign.start,
                style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold, color: Theme.of(context).primaryColor),
              ),
            ),
            itemBuilder: (c, element) {
              return Column(
                children: <Widget>[
                  ListTile(
                    title: Text(
                      element.title,
                      style: TextStyle(fontSize: 14, fontWeight: FontWeight.bold),
                    ),
                    subtitle: Text(
                      element.packageDescription,
                      overflow: TextOverflow.ellipsis,
                      style: TextStyle(fontSize: 12, ),
                    ),
                    onTap: () => {},
                  ),
                ],
              );
            },
        ),
      ),
    );
  }

Answer 2

我假設您要轉換 map 列表：

measurement = [{'sequenceno': '193', '_id': '5d99',... }, {'sequenceno': '1933', '_id': '5d99', ..},  {...}, {...}]

進入標題列表。

你可以做的是：

var titleList = [for (var map in measurement) Titles.fromMap(map) ];

有關信息，您不需要使用 Factory 構造函數。 以下構造函數也應該工作：

Titles.fromMap(Map<String, dynamic> map) :
  sequenceno = map['sequenceno'],
  id = map["_id"],
  chapter = map['chapter'],
  title = map['title'],
  packageDescription = map['package_description'],
  ageLevel = map['age_level'],
  pkgSequence = map['pkg_sequence'];