Flutter：如何在 ListView 中组合 Card 小部件

Question

我有一个屏幕，它通过 JSON 显示来自 Web 服务的数据。数据显示在 ListView 中，每个项目都在卡片中。

这很好用，但如果我在同一日期有 2 个项目，我想在同一日期将它们一起显示。

第一张图片是它现在的显示方式，第二张是我想要的模型。谁能告诉我怎么做？

干杯，

保罗

JSON：

{
   "rows":[
      {
         "JOBID":23,
         "START_DATE":1588809600000,
         "START_TIME":"08:35",
         "END_TIME":"17:35",
         "JOB_NAME":"Fence repair"
      },
      {
         "JOBID":24,
         "START_DATE":1588809600000,
         "START_TIME":"18:00",
         "END_TIME":"07:30",
         "JOB_NAME":""
      },
      {
         "JOBID":25,
         "START_DATE":1588896000000,
         "START_TIME":"08:35",
         "END_TIME":"17:35",
         "JOB_NAME":"Fence repair"
      }
   ]
}

Answer 1

您应该按照以下方式实施

首先你应该在你的数据模型中添加子列表

例如：

class DataModel {
  int JOBID;
  int START_DATE;
  String START_TIME;
  String END_TIME;
  String JOB_NAME;
  List<DataModel> child;

  DataModel(this.JOBID, this.START_DATE, this.START_TIME, this.END_TIME,
      this.JOB_NAME, this.child);

  @override
  String toString() {
    return "{JobID:$JOBID,StartDate:${DateTime.fromMillisecondsSinceEpoch(START_DATE)},StartTime:$START_TIME,EndTime:$END_TIME,JobName:$JOB_NAME,child:${child.toString()}}";
  }
}

现在您在下面添加两种过滤数据并提供具有相同日期子项的列表的方法

  List<DataModel> getFilteredList(ListData listData) {
    listData.rows.sort((a, b) =>
        DateTime.fromMillisecondsSinceEpoch(b.START_DATE)
            .compareTo(DateTime.fromMillisecondsSinceEpoch(a.START_DATE)));

    for (int i = 0; i < listData.rows.length; i++) {
      print(listData.rows[i].toString());
    }
    DataModel prev;
    bool isHeader = false;
    List<DataModel> filterList = [];
    int index = 0;
    listData.rows.forEach((element) {
      if (prev != null && !isSameDate(element.START_DATE, prev.START_DATE)) {
        isHeader = true;
      }
      if (!isHeader) {
        if (filterList.length != 0) {
          filterList[index].child.add(element);
        } else {
          filterList.add(DataModel(element.JOBID, element.START_DATE,
              element.START_TIME, element.END_TIME, element.JOB_NAME, []));
        }
      } else {
        filterList.add(DataModel(element.JOBID, element.START_DATE,
            element.START_TIME, element.END_TIME, element.JOB_NAME, []));
        index++;
        isHeader = false;
      }
      prev = element;
    });
    return filterList;
  }

  bool isSameDate(int startDate, int startDate2) {
    var date1 = DateTime.fromMillisecondsSinceEpoch(startDate);
    var date2 = DateTime.fromMillisecondsSinceEpoch(startDate2);
    return date1.day == date2.day &&
        date1.month == date2.month &&
        date1.year == date2.year;
  }




filteredListData = getFilteredList(listData);

fileredListData 有正确的数据

完整示例

class Demo extends StatefulWidget {
  @override
  _DemoState createState() => _DemoState();
}

class _DemoState extends State<Demo> {
  ListData listData = ListData.empty();

  List<DataModel> filteredListData;

  @override
  void initState() {
    super.initState();
    listData.rows = [];
    listData.rows
        .add(new DataModel(23, 1588809600000, "08:35", "17:35", "F-1", []));
    listData.rows
        .add(new DataModel(24, 1588809600000, "18:00", "07:30", "F-1.1", []));
    listData.rows
        .add(new DataModel(25, 1588896000000, "08:35", "17:35", "A-1", []));
    listData.rows
        .add(new DataModel(26, 1590057927000, "08:35", "17:35", "New -1", []));
    listData.rows
        .add(new DataModel(27, 1588896000000, "08:35", "17:35", "A-1.1", []));
    listData.rows.add(
        new DataModel(28, 1590057927000, "08:35", "17:35", "New -1.1", []));
    listData.rows
        .add(new DataModel(29, 1588896000000, "08:35", "17:35", "A-1.2", []));

    listData.rows
        .add(new DataModel(30, 1590056427000, "08:35", "17:35", "New-1.2", []));
    listData.rows
        .add(new DataModel(31, 1590057027000, "08:35", "17:35", "New-1.3", []));

    filteredListData = getFilteredList(listData);
    for (int i = 0; i < filteredListData.length; i++) {
      print(filteredListData[i].toString());
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: ListView.builder(
      itemCount: filteredListData.length,
      itemBuilder: (builder, parentIndex) {
        return Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Text(
                "${DateTime.fromMillisecondsSinceEpoch(filteredListData[parentIndex].START_DATE).toString()} - ${filteredListData[parentIndex].JOB_NAME}"),
            if (filteredListData[parentIndex].child.length > 0)
              ListView.builder(
                itemBuilder: (builder, index) {
                  return Text(
                      filteredListData[parentIndex].child[index].JOB_NAME);
                },
                shrinkWrap: true,
                physics: NeverScrollableScrollPhysics(),
                itemCount: filteredListData[parentIndex].child.length,
              )
          ],
        );
      },
    ));
  }

  List<DataModel> getFilteredList(ListData listData) {
    listData.rows.sort((a, b) =>
        DateTime.fromMillisecondsSinceEpoch(b.START_DATE)
            .compareTo(DateTime.fromMillisecondsSinceEpoch(a.START_DATE)));

    for (int i = 0; i < listData.rows.length; i++) {
      print(listData.rows[i].toString());
    }
    DataModel prev;
    bool isHeader = false;
    List<DataModel> filterList = [];
    int index = 0;
    listData.rows.forEach((element) {
      if (prev != null && !isSameDate(element.START_DATE, prev.START_DATE)) {
        isHeader = true;
      }
      if (!isHeader) {
        if (filterList.length != 0) {
          filterList[index].child.add(element);
        } else {
          filterList.add(DataModel(element.JOBID, element.START_DATE,
              element.START_TIME, element.END_TIME, element.JOB_NAME, []));
        }
      } else {
        filterList.add(DataModel(element.JOBID, element.START_DATE,
            element.START_TIME, element.END_TIME, element.JOB_NAME, []));
        index++;
        isHeader = false;
      }
      prev = element;
    });
    return filterList;
  }

  bool isSameDate(int startDate, int startDate2) {
    var date1 = DateTime.fromMillisecondsSinceEpoch(startDate);
    var date2 = DateTime.fromMillisecondsSinceEpoch(startDate2);
    return date1.day == date2.day &&
        date1.month == date2.month &&
        date1.year == date2.year;
  }
}

输出