DormMate 新生宿舍管理系统 —— 通知公告模块开发实战

前言

随着高校信息化建设的推进，新生宿舍管理系统在学生日常生活中扮演了重要角色。从宿舍分配、入住登记，到宿舍维修、报修通知，信息化管理可以大幅提升宿管效率和学生体验。本文将分享我在 Flutter × HarmonyOS 6.0 跨端开发环境下，开发“通知公告”模块的完整实践，包括核心代码及详细解析，希望对开发者在多端开发中有所启发。

---

背景

在高校宿舍管理场景中，通知公告是最基础且最频繁使用的功能之一：

• 发布新生宿舍分配结果
• 提醒学生入住须知和安全事项
• 反馈宿舍维修进度和流程

传统的单端开发需要分别在 Android/iOS/HarmonyOS 上开发，这不仅成本高，而且维护复杂。而 Flutter × Harmony6.0 的跨端方案，使得我们只需一套代码，即可部署在多端设备上，实现一致的用户体验。

---

Flutter × Harmony6.0 跨端开发介绍

Flutter 是 Google 推出的跨平台 UI 框架，支持 iOS、Android、Web、桌面应用开发，其特点是：

• 单一代码库，多端运行
• 高性能渲染引擎（Skia）
• 丰富的组件库与社区插件

而 HarmonyOS 6.0 是华为最新的多设备操作系统，其 ArkUI 和 JS/FA/FAE 生态 与 Flutter 的跨端理念高度契合，通过 FA-Debug 或 Harmony Build 可以将 Flutter 应用快速打包运行在手机、平板、甚至智慧屏上。

结合两者的优势，我们能够快速开发多端统一的宿舍管理系统，并在 “通知公告” 模块中实现简洁、优雅的 UI 展示。

---

开发核心代码及详细解析

下面给出完整实现的 通知公告模块 代码，并分段逐行解析：

---

1. 通知公告 Widget 构建

// 通知公告
Widget _buildNotifications(ThemeData theme) {
  return Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text(
            '通知公告',
            style: theme.textTheme.titleMedium?.copyWith(
              fontWeight: FontWeight.bold,
            ),
          ),
          TextButton(
            onPressed: () {},
            child: Text(
              '查看全部',
              style: TextStyle(color: theme.colorScheme.primary),
            ),
          ),
        ],
      ),
      const SizedBox(height: 16),
      Container(
        decoration: BoxDecoration(
          color: theme.colorScheme.surface,
          borderRadius: BorderRadius.circular(12),
          boxShadow: [
            BoxShadow(
              color: Colors.black.withOpacity(0.05),
              spreadRadius: 0,
              blurRadius: 8,
              offset: const Offset(0, 2),
            ),
          ],
        ),
        child: Column(
          children: [
            _buildNotificationItem(
              theme, '2024新生宿舍分配结果已发布', '2024-08-15',
            ),
            _buildNotificationItem(
              theme, '宿舍入住须知及注意事项', '2024-08-10',
            ),
            _buildNotificationItem(
              theme, '关于宿舍维修申请流程的通知', '2024-08-05',
            ),
          ],
        ),
      ),
    ],
  );
}

逐行解析

1. Widget _buildNotifications(ThemeData theme)
   定义一个返回 Widget 的方法，传入 ThemeData 用于统一应用风格。

2. Column
   使用垂直布局，保证通知列表纵向排列。

3. 标题行 Row

   • 左侧显示 “通知公告” 文本
   • 右侧显示 “查看全部” 按钮，未来可绑定跳转到完整通知列表页面。

4. SizedBox(height: 16)
   添加间距，让标题与通知卡片保持视觉分隔。

5. Container

   • 设置背景颜色、圆角、阴影效果
   • 提升整体卡片感，符合现代 UI 设计风格

6. Column(children: [...])

   • 依次添加多个通知项
   • 使用 _buildNotificationItem 方法封装单条通知，便于维护和复用

---

2. 单条通知项构建

// 通知项
Widget _buildNotificationItem(ThemeData theme, String title, String date) {
  return Container(
    padding: const EdgeInsets.all(16),
    decoration: const BoxDecoration(
      border: Border(bottom: BorderSide(color: Colors.grey, width: 0.5)),
    ),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Expanded(
          child: Text(
            title,
            style: theme.textTheme.bodyMedium?.copyWith(
              fontWeight: FontWeight.bold,
            ),
            overflow: TextOverflow.ellipsis,
          ),
        ),
        Text(
          date,
          style: theme.textTheme.bodySmall?.copyWith(
            color: Colors.grey,
          ),
        ),
      ],
    ),
  );
}

逐行解析

1. Container

   • 内边距 16，让文字不紧贴边框
   • 下边框分隔线，区分各条通知

2. Row

   • 左右布局：左侧通知内容，右侧日期

3. Expanded(Text(...))

   • 左侧文本占据剩余空间
   • overflow: TextOverflow.ellipsis 防止文字溢出，保持整洁

4. 日期文本

   • 使用 bodySmall 样式，颜色灰色，弱化视觉权重，突出通知标题

---

3. 核心特点

• 模块化设计：通知卡片和列表分开封装
• 响应式布局：左右布局自适应屏幕
• UI 美观：卡片圆角 + 阴影 + 分隔线
• 可扩展性强：支持动态数据源，只需替换静态字符串即可

---

心得

1. 跨端开发效率显著提高
   Flutter + HarmonyOS 6.0 方案，让我只需写一套 UI 代码，就能在手机和平板上部署，避免了重复开发成本。

2. UI 风格统一与易维护性
   使用 ThemeData 管理主题色和文本样式，实现全局统一风格，后期修改更灵活。

3. 模块化设计思维
   将单条通知项独立封装，方便未来增加功能，例如通知点击跳转、通知类型标记（紧急/普通）等。

4. HarmonyOS 适配
   尽管 Flutter 是跨端框架，但在 HarmonyOS 上需要注意一些特定控件尺寸和状态栏适配，最好结合 HMS Core 提供的 API 优化体验。

---

总结

本文以 DormMate（宿友通）新生宿舍管理系统 的 通知公告模块 为例，展示了 Flutter × Harmony6.0 跨端开发的实际应用。通过模块化封装、主题统一和响应式布局，我们实现了功能完整、界面美观、易扩展的通知公告界面。同时，跨端方案大幅降低了开发成本，提升了多设备用户体验。

未来可在此基础上：

• 增加通知分类与筛选功能
• 支持通知推送和未读状态标记
• 与宿舍管理后台 API 联动，实现数据动态加载

DormMate 不仅是新生宿舍管理的工具，也为跨端开发提供了实践案例。