Flutter for OpenHarmony 智能备忘录笔记APP 实战DAY2：笔记实体Model封装+自定义列表卡片+模拟数据渲染

本文是Flutter for OpenHarmony智能备忘录APP开发实战的第二篇，主要完成笔记实体模型封装、自定义列表卡片组件和模拟数据渲染。文章详细介绍了如何创建笔记实体类并实现JSON序列化方法，封装符合鸿蒙UI风格的笔记卡片组件，构造模拟测试数据，并在首页ListView中循环渲染。同时扩展了本地存储工具类的读写方法，为后续功能开发做准备。通过真机测试验证了列表滑动流畅、布局美观协调。D

yinqingchen11

328人浏览 · 2026-05-04 23:07:51

yinqingchen11 · 2026-05-04 23:07:51 发布

Flutter for OpenHarmony 智能备忘录笔记APP 实战DAY2：笔记实体Model封装+自定义列表卡片+模拟数据渲染

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

大家好，继续全新备忘录APP实战连载DAY2！
上一篇DAY1我们已经完成了开发环境搭建、项目创建、依赖引入、规范目录分层、首页骨架布局以及本地存储工具类的基础封装，整个项目基础架子已经完全搭好。
今天DAY2我们进入核心业务开发阶段，主要完成笔记实体模型定义、自定义笔记列表卡片组件、构造模拟测试数据、首页列表自动渲染、页面布局细节优化，让空白的首页变成可以展示笔记条目、符合鸿蒙UI设计风格的完整页面，全程保持和往期天气系列一模一样的文风、结构、代码风格。

🚀 本期开发目标

在model目录新建笔记实体类，封装id、标题、内容、时间、标签完整字段
实现fromJson、toJson序列化方法，为后续本地缓存做铺垫
封装全局自定义笔记列表Item卡片组件，统一圆角、阴影、排版样式
构造模拟笔记假数据，生成多条测试笔记列表
在首页ListView中循环渲染笔记卡片，实现列表正常展示
优化页面内边距、字体大小、配色风格，深度适配OpenHarmony视觉规范
完善存储工具类基础读写方法，为后续真实笔记增删改查预留接口

📦 第一步：创建笔记实体Model数据模型

首先在lib/model目录下新建 note_model.dart，定义笔记的完整属性字段，包含唯一标识、标题、详情内容、创建时间、分类标签，满足后续所有业务需求。

class NoteModel {
  final String id;
  final String title;
  final String content;
  final String time;
  final String tag;

  NoteModel({
    required this.id,
    required this.title,
    required this.content,
    required this.time,
    required this.tag,
  });
}

字段设计完全贴合备忘录实际使用场景，id用来做唯一标识删除编辑，标题用于列表展示，内容存放笔记正文，时间记录创建日期，标签用于后续分类筛选。
在这里插入图片描述

🔄 第二步：添加JSON序列化与反序列化

为了后续能把笔记列表存入本地缓存、读取解析，必须加上json互转方法，方便后续存储工具直接调用。

factory NoteModel.fromJson(Map<String,dynamic> json){
  return NoteModel(
    id: json['id'],
    title: json['title'],
    content: json['content'],
    time: json['time'],
    tag: json['tag'],
  );
}

Map<String,dynamic> toJson(){
  return {
    'id':id,
    'title':title,
    'content':content,
    'time':time,
    'tag':tag,
  };
}

封装好序列化之后，后续多条笔记可以转成json字符串存入本地存储，打开APP自动解析还原列表数据，实现永久不丢失。

🧩 第三步：封装自定义笔记列表卡片组件

在ui/widget目录下新建 note_item_card.dart，抽离成公共组件，全局复用，统一UI样式，符合鸿蒙圆角、浅阴影、简约留白的设计风格。

Widget noteItemCard(BuildContext context,NoteModel note){
  return Container(
    margin: EdgeInsets.only(bottom: 12),
    padding: EdgeInsets.all(16),
    decoration: BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.circular(18),
      boxShadow: [
        BoxShadow(color: Colors.black12,blurRadius: 4)
      ],
    ),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(note.title,style: TextStyle(fontSize: 16,fontWeight: FontWeight.bold)),
        SizedBox(height: 6),
        Text(note.content,maxLines: 2,overflow: TextOverflow.ellipsis),
        SizedBox(height: 8),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text(note.tag,style: TextStyle(color: Colors.blueGrey,fontSize: 12)),
            Text(note.time,style: TextStyle(color: Colors.grey,fontSize: 12)),
          ],
        )
      ],
    ),
  );
}

卡片采用大圆角、轻微阴影、白底色，文字两行省略溢出，底部展示标签和时间，完全对标OpenHarmony原生应用审美，适配手机、平板所有分辨率。

📋 第四步：构造模拟笔记测试数据

为了让首页立刻看到列表效果，我们在首页页面中编写模拟数据方法，批量生成多条笔记对象，直接用于渲染列表。

List<NoteModel> getMockNoteList(){
  return [
    NoteModel(
      id: "1",
      title: "Flutter鸿蒙开发学习笔记",
      content: "每日学习Flutter适配OpenHarmony开发，掌握跨平台实战技巧",
      time: "2026-05-03",
      tag: "学习",
    ),
    NoteModel(
      id: "2",
      title: "日常待办事项",
      content: "整理项目源码、撰写开发文档、调试真机适配问题",
      time: "2026-05-02",
      tag: "待办",
    ),
  ];
}

模拟两条不同标签、不同时间的笔记，后续可以无限追加，结构统一，方便后期替换成真实接口或本地缓存数据。
在这里插入图片描述

📱 第五步：首页循环渲染笔记列表

拿到模拟数据后，把ListView用builder方式循环加载自定义卡片，高效渲染列表，不会造成性能卡顿，适配鸿蒙中低端机型流畅滑动。

ListView.builder(
  itemCount: noteList.length,
  itemBuilder: (ctx,index){
    return noteItemCard(ctx,noteList[index]);
  },
)

采用ListView.builder懒加载机制，列表再多笔记也不会卡顿，滑动流畅，符合Flutter高性能开发规范。

💾 第六步：扩展存储工具类读写基础方法

在DAY1的StorageUtil工具类基础上，新增字符串、列表的存取方法，为DAY3新增笔记、保存本地数据提前铺垫。

static Future<bool> setString(String key,String value){
  return _prefs!.setString(key, value);
}

static String getString(String key){
  return _prefs!.getString(key) ?? "";
}