[文章]HarmonyOS 应用开发在线体验-to do list
0
4
一、技术相关
使用语言: Js
体验内容： to do list
工具：在线开发
https://playground.harmonyos.com/#/cn/onlineDemo?ha_source=harmonyos&ha_sourceid=9011
二、效果如下
三、因为在线体验模式，所以无文件，全部代码如下；
Js
const BUTTON_STATE_IMAGE = ['/common/checkbutton.png', '/common/done.png'];
const TAG_STATE = ['show', 'hide'];
const TEXT_COLOR = ['text-default', 'text-gray'];
const EVENT_LEVEL = ['urgent', 'senior', 'middle', 'low'];
export default {
title: "每日计划",
taskList: [
{
id: 'id-1',
event: '起床锻炼',
time: '07:30',
checkBtn: BUTTON_STATE_IMAGE[1],
color: TEXT_COLOR[1],
showTag: TAG_STATE[1],
tag: EVENT_LEVEL[1],
},
{
id: 'id-2',
event: '饭后午休',
time: '01:30',
checkBtn: BUTTON_STATE_IMAGE[0],
color: TEXT_COLOR[0],
showTag: TAG_STATE[0],
tag: EVENT_LEVEL[0],
},
{
id: 'id-3',
event: '认真学习',
time: '19:30',
checkBtn: BUTTON_STATE_IMAGE[0],
color: TEXT_COLOR[0],
showTag: TAG_STATE[0],
tag: EVENT_LEVEL[2],
},
{
id: 'id-4',
event: '洗漱睡觉',
time: '22:30',
checkBtn: BUTTON_STATE_IMAGE[0],
color: TEXT_COLOR[0],
showTag: TAG_STATE[0],
tag: EVENT_LEVEL[3],
},
};
Css
.container {
flex-direction: column;
background-color: rgb(107, 134, 156);
}
.title {
font-weight: 600;
color: rgb(241, 239, 239);
background-color: rgb(6, 152, 236);
opacity: 1;
}
.tag-list {
width: 100%;
margin-top: 10px;
padding: 20px;
}
.todo-list-item {
width: 100%;
}
.todo-item {
width: 100%;
border-radius: 2px;
align-items: center;
}
.flex-row {
display: flex;
flex-direction: row;
align-items: center;
}
.todo-name-mark {
padding-left: 20px;
width: 100%;
height: 100%;
align-items: center;
}
.todo-name {
font-size: 15px;
color: white;
margin-right: 2px;
max-lines: 1;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
display: inline-block;
vertical-align: middle;
padding-top: 5px;
}
.text-default {
color: white;
}
.text-gray {
color: rgb(6, 6, 6);
}
.todo-mark {
width: 10px;
height: 10px;
margin-left: 8px;
border-radius: 25px;
background-color: lightslategrey;
}
.todo-time {
font-size: 20px;
width: 100%;
height: 100%;
text-align: left;
color: rgb(249, 247, 247);
margin-top:1px;
padding-left: 18px;
}
.urgent {
background-color: firebrick;
}
.senior {
background-color: gold;
}
.middle {
background-color: mediumaquamarine;
}
.low {
background-color: #0D9FFB;
}
.hide {
display: none;
}
.show {
display: inline-block;
}
.todo-image {
width: 30px;
height: 30px;
object-fit: contain;
margin-top: 1px;
}
.todo-text-wrapper {
height: 100%;
flex-grow: 1;
margin: 0px 26px;
flex-direction: column;
}
@MEDIA (device-type: tv) {
.title {
font-size: 22px;
padding: 10px;
}
.tag-list {
padding-top:30px;
padding-left:12px;
}
.todo-list-item {
margin-top: 20px;
}
.todo-image {
width: 20px;
height: 20px;
}
.todo-name {
font-size: 18px;
max-width: 460px
}
}
@media (device-type: phone) {
.title {
font-size: 21px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
.tag-list {
padding-top:48px;
}
.todo-list-item {
margin: 2px 8px;
}
.todo-name-mark {
margin: 5px 0px;
}
.todo-name {
max-width: 180px;
}
}
@media (device-type: wearable) {
.title {
font-size: 26px;
width: 100%;
height: 54px;
text-align: center;
}
.tag-list {
padding-top:54px;
}
.todo-list-item {
padding-left: 50px;
padding-right: 25px;
}
.todo-name-mark {
margin: 3px 0px;
}
.todo-name {
max-width: 106px
}
}
Hml
<div class="container">
<text class="title">
{{title}}
</text>
<list class="tag-list">
<list-item for="{{taskList}}" class="todo-list-item" focusable="false">
<div class="todo-item flex-row">
<image class="todo-image" src="{{$item.checkBtn}}" onclick="completeEvent({{$item.id}})"></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>
可以讨论的地方：
在本应该是纵向布局的情况下变成了横向布局，主要原因是什么？
附件：
回帖高级模式
声明：本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人，不代表电子发烧友网立场。文章及其配图仅供工程师学习之用，如有内容图片侵权或者其他问题，请联系本站作侵删。 侵权投诉