Flutter for OpenHarmony 实战：折线图、柱状图展示统计数据
是Google开发的开源UI工具包，支持用一套代码构建和六大平台应用，实现"一次编写，多处运行"。是由开放原子开源基金会运营的分布式操作系统，为全场景智能设备提供统一底座，具有多设备支持、模块化设计、分布式能力和开源开放等特性。
·
前言
Flutter是Google开发的开源UI工具包，支持用一套代码构建iOS、Android、Web、Windows、macOS和Linux六大平台应用，实现"一次编写，多处运行"。
OpenHarmony是由开放原子开源基金会运营的分布式操作系统，为全场景智能设备提供统一底座，具有多设备支持、模块化设计、分布式能力和开源开放等特性。
Flutter for OpenHarmony技术方案使开发者能够：
- 复用Flutter现有代码（Skia渲染引擎、热重载、丰富组件库）
- 快速构建符合OpenHarmony规范的UI
- 降低多端开发成本
- 利用Dart生态插件资源加速生态建设
先看效果
例子中包含两类功能：拖拽排序列表（main 入口）与图表演示（饼图/环形图、图例、玻璃卡片等）
📋 目录
项目结构说明
文件目录结构
lib/
├── main.dart # 应用入口 + 拖拽排序页
├── models/
│ ├── list_item_model.dart # 列表项数据模型（拖拽排序用）
│ └── chart_segment.dart # 图表扇区数据模型（饼图/环形图用）
├── screens/
│ └── charts_demo_page.dart # 图表演示页面
└── widgets/
├── reorderable_list_item.dart # 可拖拽列表项组件
├── pie_donut_chart.dart # 饼图/环形图组件
├── chart_legend.dart # 图例组件
└── glass_card.dart # 玻璃拟态卡片容器
入口与页面一览
| 文件 | 类型 | 说明 |
|---|---|---|
lib/main.dart |
入口 + 页面 | main()、MyApp 配置主题与首页；ReorderableListPage 实现拖拽排序列表，为当前默认首页。 |
lib/screens/charts_demo_page.dart |
页面 | 图表演示页：环形图/饼图切换、图例、刷新/重置、选中高亮与中心信息展示。 |
数据模型一览
| 文件 | 类名 | 说明 |
|---|---|---|
lib/models/list_item_model.dart |
ListItemModel |
拖拽排序列表中单条数据：id、title、subtitle、emoji、colorValue 等。 |
lib/models/chart_segment.dart |
ChartSegment |
图表一个扇区的数据：label（名称）、value（数值）、color（颜色）。 |
组件一览
| 文件 | 类名 | 说明 |
|---|---|---|
lib/widgets/reorderable_list_item.dart |
ReorderableListItem |
单条可拖拽列表项 UI，用于 ReorderableListView.builder。 |
lib/widgets/pie_donut_chart.dart |
PieDonutChart、PieDonutChartStyle |
饼图/环形图：支持动画、选中高亮、点击回调、中心占位。 |
lib/widgets/chart_legend.dart |
ChartLegend |
图例：按 ChartSegment 列表展示条目与占比，支持选中与点击联动。 |
lib/widgets/glass_card.dart |
GlassCard |
玻璃拟态卡片：毛玻璃背景 + 圆角边框 + 阴影，包裹任意 child。 |
依赖关系
main.dart
├── models/list_item_model.dart
└── widgets/reorderable_list_item.dart
screens/charts_demo_page.dart
├── models/chart_segment.dart
├── widgets/pie_donut_chart.dart
├── widgets/chart_legend.dart
└── widgets/glass_card.dart
widgets/pie_donut_chart.dart
└── models/chart_segment.dart
widgets/chart_legend.dart
└── models/chart_segment.dart
应用入口 main.dart
- 作用：Flutter 应用入口；配置 MaterialApp 主题并指定首页为
ReorderableListPage。 - 关键点：
main()调用runApp(const MyApp())；MyApp中home: const ReorderableListPage()决定当前启动后看到的页面。
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
Widget build(BuildContext context) {
return MaterialApp(
title: '拖拽排序演示',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(
seedColor: Colors.deepPurple,
brightness: Brightness.dark,
),
useMaterial3: true,
),
home: const ReorderableListPage(),
);
}
}
拖拽排序相关
ListItemModel（列表项模型）
- 文件：
lib/models/list_item_model.dart - 作用：表示拖拽排序列表中的一条数据，供
ReorderableListItem展示和ValueKey(id)使用。 - 常见字段：
id（唯一）、title、subtitle、emoji、colorValue（如0xFF6366F1）。 - 使用：在
_initializeItems()中构造ListItemModel列表赋给_items，并在itemBuilder里把_items[index]传给ReorderableListItem。
ReorderableListItem（可拖拽列表项）
- 文件：
lib/widgets/reorderable_list_item.dart - 作用：单条列表项的 UI，用于
ReorderableListView.builder的itemBuilder，支持长按拖拽。 - 主要参数：
key: ValueKey(item.id)（必填）、item: ListItemModel、index: int。 - 注意：必须带
ValueKey，否则拖拽后列表重排时可能错乱。
ReorderableListItem(
key: ValueKey(_items[index].id),
item: _items[index],
index: index,
)
图表演示相关
ChartSegment（图表扇区模型）
- 文件：
lib/models/chart_segment.dart - 作用：描述饼图/环形图中的一个扇区，供
PieDonutChart和ChartLegend使用。 - 字段：
label：显示名称（如「视频」「音乐」）。value：数值，用于计算占比。color：该扇区的颜色（Color）。
- 使用：构造
List<ChartSegment>传给PieDonutChart和ChartLegend。
const ChartSegment(
label: '视频',
value: 38,
color: Color(0xFF7C4DFF),
);
ChartsDemoPage（图表演示页）
- 文件：
lib/screens/charts_demo_page.dart - 作用：演示饼图/环形图完整用法：环形图与饼图切换、图例、刷新/随机数据、重置、选中扇区高亮并在中心显示标题与占比。
- 内部状态：
_segments（数据）、_selectedIndex（当前选中扇区索引）、_mode（环形/饼图）。 - 使用的子组件：
PieDonutChart、ChartLegend、GlassCard；内部还有_ChartCenter、_InfoStrip、_NeonBackground等私有 Widget。 - 使用：若要将图表演示设为首页，可在
MyApp中把home改为const ChartsDemoPage()。
PieDonutChart（饼图/环形图）
- 文件：
lib/widgets/pie_donut_chart.dart - 作用：根据
ChartSegment列表绘制饼图或环形图，支持入场动画、点击选中、选中项外扩与高亮、中心占位内容。 - 主要参数：
segments：List<ChartSegment>，必填。isDonut：true 为环形图，false 为饼图。selectedIndex：当前选中扇区索引，用于高亮。onSegmentTap：点击扇区回调，可传选中索引或 null（取消选中）。style：PieDonutChartStyle，可配置起始角、扇区间隙、内径比、发光、选中偏移等。size：图表宽高。center：可选，放在图表中心的 Widget（如显示选中项标题与占比）。animate：是否播放入场动画。
- 说明：内部使用
CustomPainter（_PieDonutPainter）绘制圆弧/扇形，并通过_hitTest做点击检测。
PieDonutChart(
segments: _segments,
isDonut: true,
selectedIndex: selectedIndex,
onSegmentTap: (i) => selectedIndex = i,
size: 260,
center: centerWidget,
style: const PieDonutChartStyle(
innerRadiusRatio: 0.64,
glowBlur: 16,
gapRadians: 0.02,
selectedOffset: 12,
selectedExtraThickness: 8,
),
)
ChartLegend（图例）
- 文件：
lib/widgets/chart_legend.dart - 作用：根据
ChartSegment列表展示图例条目（色块 + 名称 + 占比百分比），支持选中高亮与点击，与图表选中状态联动。 - 主要参数：
segments：List<ChartSegment>，与图表一致。selectedIndex：当前选中项索引，与PieDonutChart的selectedIndex保持一致。onSelect：点击某条图例时的回调，通常用于更新选中索引（再次点击同一条可传 null 取消选中）。
- 说明：内部每条为
_LegendRow，使用InkWell+AnimatedContainer做点击与选中样式。
ChartLegend(
segments: _segments,
selectedIndex: selectedIndex,
onSelect: (i) => selectedIndex = i,
)
GlassCard（玻璃卡片）
- 文件：
lib/widgets/glass_card.dart - 作用：提供一个「玻璃拟态」风格的卡片容器：毛玻璃背景（
BackdropFilter）+ 半透明渐变 + 圆角 + 细边框 + 阴影，用于包裹任意内容。 - 主要参数：
child：必填，卡片内显示的 Widget。padding：内边距，默认EdgeInsets.all(16)。borderRadius：圆角，默认BorderRadius.circular(24)。
- 说明：依赖
dart:ui的ImageFilter.blur，在性能较差的设备上可考虑减少使用或降低模糊强度。
GlassCard(
padding: const EdgeInsets.all(18),
child: Column(
children: [
// 图表、图例等
],
),
)
使用说明
- 运行应用：在项目根目录执行
flutter run，当前默认进入拖拽排序页（ReorderableListPage）。 - 拖拽排序：长按列表项拖拽到新位置松手即可调整顺序；依赖
list_item_model.dart与reorderable_list_item.dart，若缺失需补全或修改 main 的 home。 - 图表演示：若已接入路由，可跳转到
ChartsDemoPage；或临时将MyApp的home改为const ChartsDemoPage()查看效果。页面内可切换环形/饼图、刷新随机数据、重置默认数据，点击扇区或图例可高亮并查看占比。 - 复用组件：
GlassCard、PieDonutChart、ChartLegend、ChartSegment均可单独在其他页面使用，只需按上述参数传入数据与回调即可。
以上为当前项目中每个入口文件、数据模型、页面与组件的说明；新增组件时可在「项目结构说明」的表格中补一行，并在对应小节增加一段描述。
欢迎加入开源鸿蒙跨平台社区： https://openharmonycrossplatform.csdn.net
开源鸿蒙跨平台开发社区汇聚开发者与厂商，共建“一次开发，多端部署”的开源生态，致力于降低跨端开发门槛，推动万物智联创新。
更多推荐
13
0- 0
已为社区贡献10条内容
所有评论(0)