HarmonyOS 应用开发在线体验-to do list

一、技术相关

使用语言: 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>

可以讨论的地方：

在本应该是纵向布局的情况下变成了横向布局，主要原因是什么？