【分享+1】HarmonyOS官方模板优秀案例（第6期：商务办公 · 笔记应用）​

​​极光安全认证​​​​SDK​​​

​​腾讯优量汇​​​​SDK​​​

​​美数​​​​AdMate​​​​ SDK​​​

​​穿山甲广告​​​​SDK​​​

​​腾讯图灵盾风险识别​​​​SDK​​​

​​支付宝​​​​SDK​​​

​​Thinking SDK​​​

​​七牛云存储​​​​SDK​​​

​​友盟移动统计​​​​SDK​​​

​​Utdid​​​

​​腾讯微信​​​​SDK​​​

​​腾讯​​​​QQ SDK​​​

​笔记模板

 |-- 首页

 |    |-- 搜索

 |    |-- 笔记分类

 |    |    |-- 新建分类

 |    |    |-- 重命名 

 |    |    └-- 删除分类

 |    |-- 排序

 |    |    |-- 按创建时间排序

 |    |    └-- 按修改时间排序     

 |    |-- 笔记列表

 |    |    |-- 复制内容

 |    |    |-- 移动到其他分类

 |    |    └-- 删除

 |    |-- 创建笔记

 |    |    |-- 保存

 |    |    └-- 分享笔记

 |    └-- 编辑笔记

 |         |-- 保存

 |         └-- 分享笔记

 └-- 我的

      |-- 用户信息

      |    |-- 华为账号一键登录

      |    └-- 头像昵称修改

      └-- 回收站

      |    |-- 搜索笔记

      |    |-- 恢复笔记

      |    └-- 彻底删除

      └-- 设置

           |-- 隐私协议

           |-- 保密设置

           |    |-- 手势密码

           |    └-- 指纹解锁

           └-- 退出登录

Notes

|- common // 公共层

| |- datasource/src/main/ets/ // 公共资源

| | |- CategoryService.ets // 分类服务

| | |- Data.ets // mock数据

| | |- Model.ets // 建立模型

| | └- NoteService.ets // 笔记服务

| └- utils/src/main/ets // 公共组件模块(hsp)

| |- constants 

| | CommonConstants.ets // 公共常量

| | DateConstants.ets // 日期格式化常量

| └- utils // 工具类

| AccountUtil.ets // 账号

| AppUtil.ets // 应用

| DateUtil.ets // 日期处理

| LogUtil.ets // 日志工具

| ObjectUtil.ets // 对象工具

| ShowToast.ets // 吐司

| StringUtil.ets // 字符串工具

|

|- components // 公共组件

| |- richeditor/src/main/ets/ // 富文本组件

| | |- common 

| | | Constants.ets // 公共常量

| | |- components 

| | | RichEditorArea.ets // 富文本编辑

| | | SnapshotPreview.ets // 截图预览

| | |- model 

| | | AlignmentInfo.ets // 编辑富文本框段落选项

| | └- util

| | CommonUtils.ets // 常用(沉睡/截图) 

| | ControllerUtil.ets // 本项目使用

| | ImageUtils.ets // 图片处理

| | PickerUtil.ets // 选择、保存图片

| | PopupUtils.ets // 截图计算

| | RichEditorUtil.ets // 富文本编辑器工具类

| | 

| └- secretlock/src/main/ets/ // 应用密码设置组件

| |- components 

| | SecretLockSwitch.ets // 密码设置开关

| |- model 

| | AuthOptions.ets // 认证参数类

| | SecretLock.ets // 密码锁-保密设置(持久化)

| |- pages 

| | DrawLock.ets // 密码设置绘制页面

| └- util 

| AuthUtil.ets // 生物识别认证工具类

|

└- product/phone 

└---src/main/ets 

|- common

| LoginConstants.ets // 登录常量

|- components

| RightArrow.ets // 右箭头

|- entryability

| EntryAbility.ets // 主页面

└- pages

mine // 我的-相关页面

|- MineView.ets // 我的页面入口

|- PrivacyAgreement.ets // 隐私协议(隐私政策)

|- QuickLoginPage.ets // 一键登录

|- SecretSetting.ets // 保密设置

|- Setting.ets // 设置

|- Trash.ets // 回收站

└- UserInfoPage.ets // 用户信息

EditorCategory.ets // 编辑分类

EditNotes.ets // 编辑笔记

Index.ets // 入口页面

// 笔记卡片长按事件处理

handleLangPress(item: Note){

// 非多选状态下生效

if(!this.selectedController.isCtrl){

this.selectedController.isCtrl =true;

item.isSelected =true;

this.selectedController.selectedCount =1;

}

}

// 全选功能实现

handleSelectAll(){

if(this.selectedController.selectedCount ===this.noteList.length){

this.noteList.forEach(item => item.isSelected =false);

this.selectedController.selectedCount =0;

}else{

this.noteList.forEach(item => item.isSelected =true);

this.selectedController.selectedCount =this.noteList.length;

}

}

// 多选工具栏构建

@Builder

toolBarBuilder(){

if(this.selectedController.isCtrl){

Row(){

ForEach(toolBarList,(item: ToolBar)=>{

Column({ space:5}){

Image(item.icon)

.width(24)

.height(24)

Text(item.name)

.fontSize(10)

.fontColor($r('sys.color.font_secondary'))

}

.onClick(()=>{

this.handleToolBarClick(item.name)

})

},(item: ToolBar)=>JSON.stringify(item))

}

.margin({ top:10})

.padding({ bottom:10})

.justifyContent(FlexAlign.SpaceAround)

.width('100%')

.height(70)

.backgroundColor($r('sys.color.comp_background_list_card'))

}

}

// 富文本编辑器控制器

richEditorController: RichEditorController = RichEditorController.instance;

// 撤销重做功能实现

@Builder

toolBar(){

Row({ space:12}){

Image(this.richEditorController.currentIndex <1?

$r('app.media.undo_expire'):$r('app.media.undo_effect'))

.width(40)

.height(40)

.onClick(()=>{

this.richEditorController.onDo();// 撤销

});

Image(this.richEditorController.currentIndex >=this.richEditorController.historyRecordArray.length -1?

$r('app.media.redo_expire'):$r('app.media.redo_effect'))

.width(40)

.height(40)

.onClick(()=>{

this.richEditorController.reDo();// 重做

});

}

}

// 内容复制功能

copyNoteText(){

let copyText =this.currentNote?.description ||'';

let plainTextData =newunifiedDataChannel.UnifiedData();

let plainText =newunifiedDataChannel.PlainText();

plainText.details ={

key:'delayPlaintext',

value: copyText,

};

plainText.textContent = copyText;

plainText.abstract='delayTextContent';

plainTextData.addRecord(plainText);

let systemPasteboard: pasteboard.SystemPasteboard = pasteboard.getSystemPasteboard();

systemPasteboard.setUnifiedData(plainTextData);

}

// 分类右滑操作菜单

@Builder

categoryEnd(item: Category){

Row(){

Image($r('app.media.edit_category'))

.width(40)

.height(40)

.margin({ left:16, right:16})

.onClick(()=>{

this.isEditCategoryName =true;

this.categoryId = item.id;

// 打开编辑分类弹窗

})

Image($r('app.media.delete_category'))

.width(40)

.height(40)

.onClick(()=>{

this.categoryId = item.id;

// 打开删除分类弹窗

})

}

.width(112)

.height(48)

}

// 分类删除对话框

@ComponentV2

struct DeleteCategoryDialog {

@Param@Require params: DeleteCategoryParam;

noteService: NoteService = NoteService.instance;

categoryService: CategoryService = CategoryService.instance;

build(){

Column({ space:30}){

// 仅删除分类选项

Row(){

Text('仅删除分类')

.fontSize(16)

.onClick(()=>{

this.noteService.moveNotesCategory(this.params.categoryId);

this.categoryService.deleteCategoryById(this.params.categoryId);

});

}

// 删除分类和笔记选项

Row(){

Text('删除分类和笔记')

.fontSize(16)

.fontColor(Color.Red)

.onClick(()=>{

let notes =this.noteService.getNoteList(this.params.categoryId);

notes.forEach((item)=>{

this.noteService.deleteNote(item.id);

});

this.categoryService.deleteCategoryById(this.params.categoryId);

});

}

}

}

}

// 断点响应式样式定义

@Styles

topAreaStyle(){

.width('100%')

.padding(newBreakpointType<Padding>({

sm:{

top:12,

bottom:20,

left:$r('sys.float.padding_level8'),

right:$r('sys.float.padding_level8'),

},

md:{

top:12,

bottom:20,

left:$r('sys.float.padding_level12'),

right:$r('sys.float.padding_level12'),

},

lg:{

top:12,

bottom:20,

left:$r('sys.float.padding_level16'),

right:$r('sys.float.padding_level16'),

},

}).getValue(this.globalInfo.currentBreakpoint));

}

// 不同视图模式适配

@Builder

showNoteList(){

if(this.noteSearchController.isSearching &&this.noteList.length ===0){

SearchNoResult()

}

if(!this.noteSearchController.isSearching &&this.noteList.length ===0){

EmptyNotes()

}elseif(this.showListType ===SHOW_METHOD_ENUM.normalList){

this.cardList()// 列表视图

}else{

this.waterCardList()// 瀑布流视图

}

}

// 瀑布流布局实现

@Builder

waterCardList(){

Column(){

WaterFlow(){

LazyForEach(this.dataList,(item: Note)=>{

FlowItem(){

this.cardItem(item,9)// 9行文本显示

}

.width('100%')

.gesture(

LongPressGesture({ repeat:false, fingers:1, duration:500})

.onAction((event: GestureEvent|undefined)=>{

if(event){

this.handleLangPress(item)

}

})

)

},(item:Note)=> item.id)

}

.columnsTemplate('1fr 1fr')// 两列布局

.columnsGap(obtainGutter(this.globalInfo.currentBreakpoint,'WaterFlow'))

.rowsGap(16)

}

}