前言
TodoList基本在各大系统平台都是会自带的一个小程序,本文基于List控件实现一个简单的TodoList小应用,体验开发板的便捷的应用开发。
过程
从以下地址下载代码
https://gitee.com/qinyunti/knowledge_demo_smart_home.git
打开DevEco Studio 3.0.0.993
打开工程
更新
点击Run
有如下提示按图配置即可
代码分析
代码入口
src/main/js/MainAbility/app.js
export default {
onCreate() {
console.info("Application onCreate");
},
onDestroy() {
console.info("Application onDestroy");
}
};
src/main/js/MainAbility/pages/index/index.js
定义了list
data: {
title: "",
eventList: [
"接收/获取",
"约会/安排",
"电子邮件",
"清除",
"购买",
"接送小孩",
"取车",
"交水电费"],
initialIndex: 0,
taskList: []
},
以下进行重绘
onShow() {
this.$set('taskList', []);
for (let index = 0; index < this.eventList.length; index++) {
const element = {};
element.id = 'id-' + index;
element.event = this.eventList[index];
element.time = this.getRandomTime();
let completeState = this.getRandom(100) % 2;
element.checkBtn = BUTTON_STATE_IMAGE[completeState];
element.color = TEXT_COLOR[completeState];
element.showTag = TAG_STATE[completeState];
element.tag = EVENT_LEVEL[this.getRandom(EVENT_LEVEL.length)];
this.taskList.push(element);
}
如下代码响应事件
completeEvent(e) {
for (let i of this.taskList) {
if (i.id == e) {
if (i.checkBtn == "/common/done.png") {
i.checkBtn = "/common/checkbutton.png";
i.showTag = 'show';
i.color = 'text-default';
i.completeState = false;
} else {
i.checkBtn = "/common/done.png";
i.showTag = 'hide';
i.color = 'text-gray';
i.completeState = true;
}
return;
}
}
},
总结
应用开发,比较方便,直接连接开发板,下载仿真,所见即所得。