一、为什么需要"应用内通知模拟器"？
在 OpenHarmony 的分布式场景中，设备间会频繁传递消息（如手机向手表发送日程提醒、车机接收导航指令）。但系统级通知（Push Notification）涉及权限、后台服务、厂商通道等复杂机制，不适合初学者快速验证 UI 逻辑。
而许多应用（如聊天、待办、IoT 控制面板）需要在应用内部展示实时消息流，例如：
- "客厅灯已关闭"；
- "新设备加入网络"；
- "任务同步完成"。
这类"应用内通知"（In-App Notification）不依赖系统推送，仅需 UI 更新，是开发者最常实现的功能之一。
本文将构建一个极简页面：「应用内消息通知模拟器」。它只包含：
- 一个"发送通知"按钮；
- 一个垂直滚动的消息列表，按时间倒序排列（最新在顶部）。
所有逻辑纯 Dart 实现，零原生调用、零权限、零兼容性问题，完美适配 OpenHarmony 模拟器。
二、完整可运行代码
dart
// lib/main.dart
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(
title: '通知模拟器',
debugShowCheckedModeBanner: false,
theme: ThemeData(useMaterial3: true, colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue)),
home: const InAppNotificationPage(),
);
}
}
class InAppNotificationPage extends StatefulWidget {
const InAppNotificationPage({super.key});
@override
State<InAppNotificationPage> createState() => _InAppNotificationPageState();
}
class _InAppNotificationPageState extends State<InAppNotificationPage> {
final List<String> _notifications = [];
void _sendNotification() {
final time = DateTime.now().toString().split('.').first;
final message = '通知 $time';
setState(() {
_notifications.insert(0, message); // 最新通知插入顶部
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('应用内通知模拟')),
body: _notifications.isEmpty
? const Center(child: Text('暂无通知', style: TextStyle(fontSize: 16)))
: ListView.builder(
padding: const EdgeInsets.all(16),
itemCount: _notifications.length,
itemBuilder: (context, index) {
return Card(
margin: const EdgeInsets.only(bottom: 12),
child: Padding(
padding: const EdgeInsets.all(12),
child: Text(_notifications[index]),
),
);
},
),
floatingActionButton: FloatingActionButton(
onPressed: _sendNotification,
child: const Icon(Icons.add),
),
);
}
}✅ 此代码仅使用 Flutter 内置组件 （
MaterialApp,Scaffold,ListView,Card等），无需任何权限或原生代码，在 OpenHarmony DevEco 模拟器中可直接运行，点击"+"按钮即可生成新通知。
三、设计价值：聚焦核心 UI 流程
这个页面虽简单，却完整覆盖了实时消息展示的核心模式：
- 状态管理 ：用
List<String>存储消息； - 状态更新 ：
setState触发重建； - UI 映射 ：
ListView.builder高效渲染列表； - 交互反馈 ：空状态提示 + 新增动画（隐含在
setState中）。
它是学习 "状态驱动 UI" 的绝佳范例，也是构建聊天、日志、事件流等复杂页面的基础模板。
四、：消息生成与状态更新
我们首先看通知生成逻辑：
dart
final List<String> _notifications = [];
void _sendNotification() {
final time = DateTime.now().toString().split('.').first;
final message = '通知 $time';
setState(() {
_notifications.insert(0, message); // 插入到列表开头
});
}这段代码实现了模拟消息的创建与状态更新。
_notifications是一个 私有状态变量，存储所有通知文本；DateTime.now().toString()获取当前时间，.split('.').first截去毫秒部分，得到如"2026-01-25 18:45:30"的可读格式；message构造为"通知 2026-01-25 18:45:30"，确保每条唯一；_notifications.insert(0, message)是关键：- 将新消息插入索引 0（列表顶部）；
- 实现"最新消息在最上方"的常见 UX 模式；
- 若用
add()则新消息在底部，不符合通知流习惯。
💡 这种"在列表头部插入"的模式，在消息、日志、动态 feed 场景中极为常见。虽然对长列表性能不佳（O(n)），但在通知数量有限（<100 条）时完全可接受。
五、条件渲染与高效列表
再看 UI 构建逻辑：
dart
@override
Widget build(BuildContext context) {
return Scaffold(
body: _notifications.isEmpty
? const Center(child: Text('暂无通知'))
: ListView.builder(
padding: const EdgeInsets.all(16),
itemCount: _notifications.length,
itemBuilder: (context, index) {
return Card(
margin: const EdgeInsets.only(bottom: 12),
child: Padding(
padding: const EdgeInsets.all(12),
child: Text(_notifications[index]),
),
);
},
),
floatingActionButton: FloatingActionButton(onPressed: _sendNotification, child: Icon(Icons.add)),
);
}这里展示了 "条件渲染 + 高效列表" 的最佳实践。
1. 空状态处理
- 使用
_notifications.isEmpty ? ... : ...三元表达式； - 空时显示居中提示"暂无通知"，避免空白页面；
- 这是提升用户体验的低成本高回报设计。
2. 使用 ListView.builder
- 相比
Column+for循环，ListView.builder只构建可见项，内存占用低； itemCount和itemBuilder分离，结构清晰；- 即使有 1000 条通知，也能流畅滚动。
3. 视觉层次
Card提供阴影和圆角，区分每条通知；Padding和margin确保呼吸感；FloatingActionButton符合 Material Design 快捷操作规范。
📌 值得注意的是，所有 UI 元素均由状态
_notifications驱动，无任何硬编码内容。这正是响应式 UI 的核心思想。
六、为何这个微页面具有教学与实用双重价值？
1. 教学价值
- 演示了 StatefulWidget 的完整生命周期（状态定义 → 更新 → 渲染）；
- 展示了
setState的正确使用场景； - 介绍了 空状态、列表、浮动按钮 等基础组件组合。
2. 实用价值
- 可直接作为 IoT 设备事件日志面板；
- 可扩展为 跨设备消息中转站（结合 OpenHarmony 分布式能力）；
- 可嵌入到 设置页的"操作历史" 功能中。
更重要的是，它完全规避了平台兼容性问题------因为所有逻辑都在 Dart 层，不碰原生 API。
七、扩展方向（保持简洁前提下）
虽然本文聚焦极简，但可安全扩展：
- 消息分类 ：用
enum MessageType { info, warning, success }区分颜色； - 自动清理：限制最多显示 50 条，超出则移除最早一条；
- 时间分组：按"今天"、"昨天"分组显示（需额外状态管理）。
但这些都不影响核心逻辑的简洁性。
八、结语：伟大的 UI，始于简单的状态
本文的页面没有炫技，没有复杂架构，只有一个列表、一个按钮、一个状态变量 。但它完整诠释了 Flutter 的核心哲学：UI 是状态的函数。
在 OpenHarmony 的跨端开发中，我们常被分布式、原子化服务等宏大概念吸引。但回归本质，每一个超级终端体验，都是由无数个这样简单、可靠、即时反馈的微交互组成的。
让我们从这样的小页面开始，构建值得信赖的智慧体验。
🌐 欢迎加入开源鸿蒙跨平台社区 ：
在这里，您将获得：
- OpenHarmony 应用内消息设计规范；
- Flutter 状态管理入门实战；
- 无依赖 UI 组件模板。
用简单，承载复杂。