TodoList应用是基于OpenHarmony SDK开发的安装在润和HiSpark Taurus AI Camera(Hi3516d)开发板上的应用;应用主要功能是以列表的形式,展示需要完成的日程;通过本demo可以学习到 JS UI 框架List使用;
完整的项目结构目录如下
├─entry\src\main
│ │ config.json //应用配置文件
│ │
│ ├─js
│ │ └─MainAbility
│ │ │ app.js // 应用程序入口
│ │ │
│ │ ├─common // 公共资源
│ │ │ │ checkbutton.png
│ │ │ │ delete.png
│ │ │ │ done.png
│ │ │ │ head0.png
│ │ │ │ head1.png
│ │ │ │ head2.png
│ │ │ │ head3.png
│ │ │ │ head4.png
│ │ │ │ right.png
│ │ │ │
│ │ │ └─images
│ │ │ bg-tv.jpg
│ │ │ Wallpaper.png
│ │ │
│ │ ├─i18n // 多语言文件
│ │ │ en-US.json
│ │ │ zh-CN.json
│ │ │
│ │ └─pages
│ │ └─index
│ │ index.css //页面样式
│ │ index.hml //首页展示
│ │ index.js //页面逻辑
│ │
│ └─resources
│ ├─base
│ │ ├─element
│ │ │ string.json
│ │ │
│ │ └─media
│ │ icon.png
│ │
│ └─rawfile
在DevEco Studio中点击File -> New Project ->[Standard]Empty Ability->Next,Language 选择JS语言,最后点击Finish即创建成功。
1)最外层是div容器,并在class里面设置背景色为黑色按行布局;
2)再通过list包裹list-item 的 内层div 容器按列布局,并设置点击事件onclick
3)div容器按列布局依次写入image 组件和 div 容器 ;
4)div容器里面又包裹一个div容器和以及text组件,且div容器里面也是两个按列布局的text
<div class="container">
<list class="tag-list" initialindex="{{initialIndex}}">
<list-item for="{{taskList}}" class="todo-list-item" focusable="false">
<div class="todo-item flex-row" onclick="completeEvent({{$item.id}})">
<image class="todo-image" src="{{$item.checkBtn}}" ></image>
<div class="todo-text-wrapper">
<div class="todo-name-mark">
<text class="todo-name {{$item.color}}" focusable="false">{{$item.event}}</text>
<text class="todo-mark {{$item.tag}} {{$item.showTag}}"></text>
</div>
<text class="todo-time" >{{$item.time}}</text>
</div>
</div>
</list-item>
</list>
</div>
点击某一行后,并根据当前行的状态改变相反的状态
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;
}
}
},
项目地址:https://gitee.com/openharmony-sig/knowledge_demo_smart_home/tree/master/FA/TodoList
1)git下载
git clone git@gitee.com:openharmony-sig/knowledge_demo_smart_home.git
2)项目导入
打开DevEco Studio,点击File->Open->下载路径FA/TodoList