Flutter中如何在ExpansionTile按日期打印对应通知列表

你可以通过遍历Map的entries来获取每个日期（key）对应的通知列表（value），然后将其嵌套到ExpansionTile中展示。以下是完整的实现代码：

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('通知列表')),
        body: const NotificationList(),
      ),
    );
  }
}

class NotificationList extends StatelessWidget {
  const NotificationList({super.key});

  // 你的原始数据
  final Map<String, dynamic> data = {
    "20230701": [
      {"gubun": "alim", "message": "false", "reg_date": "20230701"},
    ],
    "20230702": [
      {"gubun": "alim", "message": "false", "reg_date": "20230702"},
    ],
    "20230703": [
      {"gubun": "alim", "message": "false", "reg_date": "20230703"},
      {"gubun": "alim", "message": "complete", "reg_date": "20230703"},
      {"gubun": "alim", "message": "complete", "reg_date": "20230703"},
    ],
    "20230704": [
      {"gubun": "alim", "message": "complete", "reg_date": "20230704"}
    ],
    "20230705": [
      {"gubun": "alim", "message": "false", "reg_date": "20230705"},
      {"gubun": "alim", "message": "complete", "reg_date": "20230705"},
      {"gubun": "alim", "message": "false", "reg_date": "20230705"},
      {"gubun": "alim", "message": "complete", "reg_date": "20230705"},
      {"gubun": "alim", "message": "complete", "reg_date": "20230705"},
      {"gubun": "alim", "message": "complete", "reg_date": "20230705"},
      {"gubun": "alim", "message": "complete", "reg_date": "20230705"},
      {"gubun": "alim", "message": "complete", "reg_date": "20230705"},
      {"gubun": "alim", "message": "false", "reg_date": "20230705"},
    ],
    "20230706": [
      {
        "gubun": "alim",
        "message": "false",
        "reg_date": "20230706"
      },
      {
        "gubun": "alim",
        "message": "complete",
        "reg_date": "20230706"
      }
    ],
    "20230707": [
      {
        "gubun": "alim",
        "message": "complete",
        "reg_date": "20230707"
      }
    ]
  };

  // 格式化日期字符串（比如20230701 → 2023-07-01）
  String formatDate(String dateStr) {
    if (dateStr.length != 8) return dateStr;
    return '${dateStr.substring(0,4)}-${dateStr.substring(4,6)}-${dateStr.substring(6,8)}';
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: data.length,
      itemBuilder: (context, index) {
        // 获取当前的日期key和对应的通知列表
        final entry = data.entries.elementAt(index);
        final date = entry.key;
        final notifications = entry.value as List<Map<String, dynamic>>;

        return ExpansionTile(
          // 展开/收起的标题显示格式化后的日期
          title: Text(formatDate(date)),
          // 展开后显示该日期下的所有通知
          children: notifications.map((notification) {
            return ListTile(
              title: Text('类型: ${notification['gubun']}'),
              subtitle: Text('状态: ${notification['message']}'),
              trailing: Text('日期: ${formatDate(notification['reg_date'])}'),
            );
          }).toList(),
        );
      },
    );
  }
}

关键说明： #

1. 遍历Map条目：通过data.entries获取所有键值对，每个entry包含日期（entry.key）和对应的通知列表（entry.value）。
2. 日期格式化：自定义formatDate方法将原始数字日期字符串转换为更易读的格式，提升用户体验。
3. 嵌套列表展示：在ExpansionTile的children中，遍历当前日期的通知列表，用ListTile展示每条通知的详情。

内容的提问来源于stack exchange，提问作者sopu5555