一、为什么需要“应用内通知模拟器”？

在 OpenHarmony 的分布式场景中，设备间会频繁传递消息（如手机向手表发送日程提醒、车机接收导航指令）。但系统级通知（Push Notification）涉及权限、后台服务、厂商通道等复杂机制，不适合初学者快速验证 UI 逻辑。

而许多应用（如聊天、待办、IoT 控制面板）需要在应用内部展示实时消息流，例如：

• “客厅灯已关闭”；
• “新设备加入网络”；
• “任务同步完成”。

这类“应用内通知”（In-App Notification）不依赖系统推送，仅需 UI 更新，是开发者最常实现的功能之一。

本文将构建一个极简页面：「应用内消息通知模拟器」。它只包含：

• 一个“发送通知”按钮；
• 一个垂直滚动的消息列表，按时间倒序排列（最新在顶部）。

所有逻辑纯 Dart 实现，零原生调用、零权限、零兼容性问题，完美适配 OpenHarmony 模拟器。

---

二、完整可运行代码

// 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” 的绝佳范例，也是构建聊天、日志、事件流等复杂页面的基础模板。

---

四、：消息生成与状态更新

我们首先看通知生成逻辑：

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 构建逻辑：

@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 的跨端开发中，我们常被分布式、原子化服务等宏大概念吸引。但回归本质，每一个超级终端体验，都是由无数个这样简单、可靠、即时反馈的微交互组成的。

让我们从这样的小页面开始，构建值得信赖的智慧体验。

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

在这里，您将获得：

• OpenHarmony 应用内消息设计规范；
• Flutter 状态管理入门实战；
• 无依赖 UI 组件模板。

用简单，承载复杂。