Flutter实现OpenHarmony分组列表 ExpansionTile

2402_89706816

1029人浏览 · 2025-12-01 21:17:29

2402_89706816 · 2025-12-01 21:17:29 发布

在这里插入图片描述

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net

案例概述

本案例展示如何使用 ExpansionTile + ListView 实现一个「可折叠的分组列表」。这种结构适合有天然分组属性的数据，例如按日期分组的任务、按状态分组的订单、按分类分组的设置项等。

页面结构上：

最外层是一个 ListView；
每个分组是一个带卡片背景的 ExpansionTile；
展开后显示该分组下的若干 ListTile 子项；
同样根据屏幕宽度调整水平内边距，以适配 PC/平板/手机。

核心概念

1. 分组数据结构

案例中使用一个简单的 Map<String, List<String>> 来描述分组：

key 表示分组名称，如“今天”、“本周”、“稍后”；
value 是该分组下的任务名称列表。

你在真实项目中可以将 value 换成自定义对象列表，只需在构建子项时读取对应字段即可。

2. ExpansionTile 折叠/展开

ExpansionTile 自带：

带箭头的标题行；
折叠/展开动画；
将子组件包裹在可展开容器中的能力。

这样无需自己写动画逻辑，就能实现基础的展开/收起效果。

代码详解

1. 页面结构与数据准备

class GroupedListPage extends StatelessWidget {
  const GroupedListPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final screenWidth = MediaQuery.of(context).size.width;
    final isTablet = screenWidth >= 600 && screenWidth < 1200;
    final isPC = screenWidth >= 1200;

    final horizontalPadding = isPC ? 48.0 : (isTablet ? 32.0 : 16.0);

    final groups = {
      '今天': ['任务 1', '任务 2', '任务 3'],
      '本周': ['任务 4', '任务 5'],
      '稍后': ['任务 6'],
    };
    // ...
  }
}

说明：

同样使用 MediaQuery 判断设备类型并设置横向内边距；
groups Map 用来存储分组和任务列表，结构简单直观；
在实际业务中，你可以使用日期、状态、类型等任意维度作为 key。

2. Scaffold 与 ListView

return Scaffold(
  appBar: AppBar(
    title: const Text('案例7：分组列表 - ExpansionTile + ListView'),
    centerTitle: isPC,
    elevation: 2,
  ),
  body: ListView(
    padding: EdgeInsets.symmetric(horizontal: horizontalPadding, vertical: 16),
    children: groups.entries.map((entry) {
      return Card(
        margin: const EdgeInsets.only(bottom: 12),
        child: ExpansionTile(
          // ...
        ),
      );
    }).toList(),
  ),
);

说明：

ListView 的 children 由 groups.entries.map 生成，每个 entry 对应一个分组卡片；
使用 Card 包裹 ExpansionTile，让每个分组块有独立的视觉区域和阴影；
padding 控制列表整体与屏幕边缘的距离。

3. ExpansionTile 标题与子项

ExpansionTile(
  title: Text(
    entry.key,
    style: Theme.of(context).textTheme.titleMedium?.copyWith(
          fontWeight: FontWeight.bold,
        ),
  ),
  children: entry.value
      .map(
        (task) => ListTile(
          leading: const Icon(Icons.check_circle_outline),
          title: Text(task),
        ),
      )
      .toList(),
),