作者本着学习鸿蒙应用开发的目的，根据 HarmonyOS Developer 上提供的API一点点来开发一个超级简洁的便签应用，最后附上源码。
0.准备
- 开发工具：
IDE: DevEco Studio 3.1.1 Release
Compile SDK: 3.1.0(API9)
1.功能分析
分析便签应用的特点，核心功能主要有：
1.便签记录增删改查
2.便签UI的搭建
涉及了ArkUI相关控件、路由跳转、手势事件、关系型数据库应用等知识的学习应用。
2.新建工程
创建一个Empty Ability 项目，初始化工程信息。
image.png
- 运行工程
确保项目环境配置正确，可以运行。
image.png
3.搭建UI
- 便签列表页面
核心布局：
Row() {
Column() {
Row() {
Text('记录列表')
.width('33%')
.height(50)
.backgroundColor(Color.Black)
.fontSize(25)
.fontColor(0x317aff)
Text('+')
.width(50)
.height(50)
.fontSize(40)
.fontColor(Color.White)
.onClick(() => {
})
}
.justifyContent(FlexAlign.SpaceBetween)
.height(70)
.width('90%')
.padding(10)
.backgroundColor(Color.Black)
Flex({ direction: FlexDirection.Column }) {
List() {
ForEach(this.items, (item: Item, index: number) => {
ListItem() {
Row() {
Text(`✍️ ${item.content}`)
.fontSize(20)
.fontColor(Color.White)
.maxLines(2)
.padding(3)
}
.width('100%')
.height(50)
.justifyContent(FlexAlign.Start)
.alignItems(VerticalAlign.Center)
.backgroundColor(0x23ffffff)
}.gesture()
}, item => item.id)
}
.width('100%')
.divider({
strokeWidth: 6,
startMargin: 2,
endMargin: 10,
color: '#00ffffff'
})
}.padding(10)
}
.width('100%')
.height('100%').backgroundColor(Color.Black)
}
image.png
- 便签编辑页面
核心布局：
Column() {
Row() {
Column() {
Row() {
Text('编辑')
.width('33%')
.height(50)
.backgroundColor(Color.Black)
.fontSize(25)
.fontColor(0x317aff)
Button('完成', { type: ButtonType.Normal, stateEffect: true })
.borderRadius(8)
.backgroundColor(0x317aff)
.width(80)
.height(38)
.bindPopup(this.handlePopup, {
message: this.popContent,
})
.onClick(() => {
})
}
.justifyContent(FlexAlign.SpaceBetween)
.height(70)
.width('90%')
.padding(10)
.backgroundColor(Color.Black)
TextArea({ text: this.message, placeholder: "请输入" })
.placeholderColor(Color.Gray)
.focusable(true)
.focusOnTouch(true)
.fontSize(22)
.fontColor(Color.White)
.backgroundColor(Color.Black)
.onChange((value: string) => {
if (value.trim() != '') {
this.message = value
}
})
}
.width('100%')
.height('100%')
}
.height('100%')
.backgroundColor(Color.Black)
}
image.png
- 路由跳转
跳转采用了SDK提供的router api进行路由操作，与其他平台大同小异，因为跳转到编辑页可能是修改便签，所以需要携带便签Id参数进行跳转。
router.pushUrl({
url: 'pages/Detail', // 目标url
params: item
}, router.RouterMode.Standard, (err) => {
if (err) {
console.error(`Invoke pushUrl failed, code is ${err.code}, message is ${err.message}`);
return;
}
console.info('Invoke pushUrl succeeded.');
});
4.搭建数据库
SDK提供了三种数据持久化方式，针对便签记录，三种都可以用，但更规范的还是使用关系型数据库，这里就使用关系型数据库实现数据持久化。
- 字段设计
因为功能简单，所以表字段就按照最简单的来，后面功能多了可以直接拓展表字段。
数据库存储对象的实体映射：
export default class Item {
id: number;
content: string;
}
初始化数据库，这里主要是新建表，创建数据库连接实例供应用其他功能使用，这里使用了SDK提供的globalThis对象来存储全局单例，方便其他页面快速访问。
// DB
const STORE_CONFIG = {
name: 'RdbTest.db', // 数据库文件名
securityLevel: relationalStore.SecurityLevel.S1 // 数据库安全级别
};
const SQL_CREATE_TABLE = 'CREATE TABLE IF NOT EXISTS NOTE (ID INTEGER PRIMARY KEY AUTOINCREMENT, CONTENT TEXT)'; // 建表Sql语句
relationalStore.getRdbStore(this.context, STORE_CONFIG, (err, store) => {
if (err) {
console.error(`Failed to get RdbStore. Code:${err.code}, message:${err.message}`);
return;
}
console.info(`Succeeded in getting RdbStore.`);
store.executeSql(SQL_CREATE_TABLE); // 创建数据表
globalThis.dbStore = store
});
- 数据增删改查
5.便签列表页功能
核心主要是刷新最新数据源到列表上:
reloadData() {
let predicates = new relationalStore.RdbPredicates('NOTE');
// predicates.equalTo('NAME', 'Rose');
let store: relationalStore.RdbStore = globalThis.dbStore
store.query(predicates, ['ID', 'CONTENT'], (err, resultSet) => {
if (err) {
console.error(`Failed to query data. Code:${err.code}, message:${err.message}`);
return;
}
console.info(`ResultSet column names: ${resultSet.columnNames}`);
console.info(`ResultSet rowCount : ${resultSet.rowCount}`);
let count = resultSet.rowCount
console.error(`count==> is ${count}`);
this.items.splice(0, this.items.length)
if (count == 0) {
return
}
for (let index = 0; index < count; index++) {
resultSet.goToRow(index)
this.items.push(new Item().from(resultSet))
}
})
}
在 onPageShow 中刷新，就实现了每次打开页面都是最新数据：
onPageShow() {
console.log("onPageShow=====>")
if (this.timeoutId) {
clearTimeout(this.timeoutId)
}
this.timeoutId = setTimeout(() => {
this.reloadData()
}, 300)
}
6.便签编辑页完善
编辑页面，在onPageShow中执行判断，跳转过来时是否携带了参数，如果有，表示是修改便签，将参数解析成便签ID即初始化已存在的便签，如果没有，则表示是新建便签，就使用数据库新建记录。
onPageShow() {
let predicates = new relationalStore.RdbPredicates('NOTE');
let id = router.getParams()
if (id && id['id']) {
this.ID = id['id']
predicates.equalTo("ID", this.ID as number)
} else {
return
}
setTimeout(() => {
let store: relationalStore.RdbStore = globalThis.dbStore
store.query(predicates, ['ID', 'CONTENT'], (err, resultSet) => {
if (err) {
console.error(`Failed to query data. Code:${err.code}, message:${err.message}`);
return;
}
console.info(`ResultSet column names: ${resultSet.columnNames}`);
console.info(`ResultSet rowCount : ${resultSet.rowCount}`);
if (resultSet.rowCount == 0) {
return
}
resultSet.goToLastRow()
this.message = resultSet.getString(1)
// console.info(`ResultSet column value: ${resultSet.getString(1)}`);
})
}, 300)
}
编辑器简单使用TextArea组件，在onChange中通知改变内容变更状态值：
TextArea({ text: this.message, placeholder: "请输入" })
.placeholderColor(Color.Gray)
.focusable(true)
.focusOnTouch(true)
.fontSize(22)
.fontColor(Color.White)
.backgroundColor(Color.Black)
.onChange((value: string) => {
if (value.trim() != '') {
this.message = value
}
})
7.删除
还缺个删除功能就齐活了，就用长按列表item来实现吧。但长按手势事件和点击手势事件的设置和其他平台有所区别，在组合手势中添加两个手势事件，并设置识别优先级。
// 点击与长按的组合手势
ListItem(){}
.gesture(
GestureGroup(GestureMode.Exclusive,
// 绑定count为2的TapGesture
TapGesture({ count: 1 })
.onAction((event: GestureEvent) => {
router.pushUrl({
url: 'pages/Detail', // 目标url
params: item
}, router.RouterMode.Standard, (err) => {
if (err) {
console.error(`Invoke pushUrl failed, code is ${err.code}, message is ${err.message}`);
return;
}
console.info('Invoke pushUrl succeeded.');
});
}), LongPressGesture({ repeat: true })
.onAction((event: GestureEvent) => {
})
.onActionEnd(() => {
console.log("long press===>")
this.deleteId = item.id
this.dialogController.open()
})))
GestureMode.Exclusive表明手势组为互斥并别，单击手势识别成功后，双击手势会识别失败。
8.其他
路由跳转没反应：
添加了ets页面描述文件后，需要在main_pages.json中声明注册才能进行路由，否则跳转时没有任何反应。布局错误没实时提示:
有些布局上的错误，编译器没有实时显示出来，在运行时会在控制台报错个笼统的错误,比如（ERROR: Cannot read properties of undefined (reading 'kind')），需要回去扣布局代码找错误，这点比较坑，可以使用git多提交保存还原，或者使用编译器的localHistory功能还原下代码。
