HarmonyOS 应用开发体验-to do list

一、技术相关

使用语言: Js

体验内容： to do list

鸿蒙工具：在线开发

https://playground.harmonyos.com/#/cn/onlineDemo?ha_source=harmonyos&ha_sourceid=9011

2、 效果如下

三、因为在线体验模式，所以无文件，全部代码参考如下；

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
    }
}

HTML頁面如下：

<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>

有興趣的朋友可以在上述代碼基礎上做擴展或變更！