HarmonyOS开发-SettingsAbilitty体验

技术效果

项目语言:  js

体验模板： SettingsAbilitty

工具：deveco

开发体验过程

第一步 建立项目

新建一个js的应用项目，直接点击next进行下一步

第二步  修改部分代码

主要部分：

Hml部分

<element name="action_bar" src="../../common/component/action_bar.hml"></element>
<element name="card" src="../../common/card/card.hml"></element>
<div class="all">
    <div class="bar_container">
        <action_bar class="bar" bar-title="{{ title }}"></action_bar>
    </div>

<!-- phone and tablet   -->
    <div class="list_container">
        <list initialindex="0">
            <block for="{{ array }}">
                <list-item class="content" clickeffect="false">
                    <card class="card"
                          setting-title="{{ list[$idx].value }}"
                          num-of-top-item="{{ $item[0] }}"
                          num-of-bot-item="{{ $item[1] }}"
                            ></card>
                </list-item>
            </block>
        </list>
    </div>

<!--  tv and wearable  -->
    <div class="container_tv">
        <div class="title_container">
            <text class="title">{{ title }}</text>
        </div>
        <div class="list_tv_container">
            <list class="list_tv">
                <list-item-group for="list_group in list" id="{{ list_group.value }}">
                    <list-item type="item"
                               class="content_tv"
                               primary="true"
                               onclick="changeList($idx)"
                               id="{{ $idx }}">

                    <!-- only wearable  -->
                        <div class="wearable_item">
                            <image src="/common/bar.png"
                                   class="wearable_item_img"></image>
                            <div class="wearable_item_text">
                                <text class="wearable_item_text_content">
                                    {{ list_group.value }}
                                </text>
                            </div>
                        </div>

                    <!-- only tv -->
                        <text class="content_tv_text">
                            {{ list_group.value }}
                        </text>

                    </list-item>
                    <list-item type="item" class="sub_item" clickeffect="false">
                        <card class="card"
                              setting-title="Setting{{ $idx }}"
                              num-of-top-item="{{ array[$idx][0] }}"
                              num-of-bot-item="{{ array[$idx][1] }}">
                        </card>
                    </list-item>
                </list-item-group>
            </list>

        <!-- tv right   -->
            <div class="content_img">
                <div class="img_box">
                    <image class="img_img" src="{{ tv_img_add }}"></image>
                </div>
                <div class="text_box">
                    <text class="img_text">{{ tv_img_text }}</text>
                </div>
            </div>
        </div>
    </div>
</div>

css样式部分

.all {
    flex-direction: column;
    background-color: #f1f3f5;
}

.list_container {
    flex-direction: column;
}

.container_tv {
    display: none;
}

.content {
    justify-content: center;
}

@media screen and (device-type: tv) {
    .bar_container {
        display: none;
    }

    .title_container {
        width: 100%;
        text-align: left;
        margin: 24px 45px;
        height: 100px;
    }

    .title {
        font-weight: bold;
        font-size: 45px;
    }

    /** left */

    .list_container {
        display: none;
    }

    .container_tv {
        display: flex;
        flex-direction: column;
        background-image: url("/common/Wallpaper.png");
    }

    .list_tv_container {
        width: 100%;
    }

    .list_tv {
        margin-left: 24px;
    }

    .wearable_item {
        display: none;
    }

    .content_tv {
        height: 48px;
        background-color: #33f1f3f5;
        border-radius: 12px;
        margin: 6px 0;
        padding-left: 12px;
    }

    .content_tv_text {
        font-size: 18px;
        color: #E5FFFFFF;
    }

    /** right */

    .content_img {
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
    }

    .img_box {
        margin-top: 76px;
        background-color: #808080;
        width: 180px;
        height: 180px;
    }

    .img_img {
        object-fit: contain;
        width: 180px;
        height: 180px;
    }

    .text_box {
        width: 100%;
        margin-top: 20px;
        justify-content: center;
    }

    .img_text {
        width: 280px;
        font-size: 18px;
        color: #99FFFFFF;
        text-align: center;
    }
}

@media screen and (device-type: wearable) {
    .bar_container {
        display: none;
    }

    .title_container {
        justify-content: center;
        height: 20%;
    }

    .title {
        font-size: 19px;
        font-weight: bold;
    }

    .content_img {
        display: none;
    }

    .list_container {
        display: none;
    }

    .container_tv {
        display: flex;
        flex-direction: column;
        background-color: black;
    }

    .list_tv_container {
        width: 100%;
        justify-content: center;
    }

    .list_tv {
        width: 90%;
    }

    .sub_item {
        justify-content: center;
        align-items: center;
    }

    .content_tv {
        justify-content: center;
    }

    .content_tv_text {
        display: none;
    }

    .wearable_item {
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .wearable_item_img {
        height: 5px;
    }

    .wearable_item_text {
        height: 48px;
        padding-bottom: 6px;
        justify-content: center;
    }

    .wearable_item_text_content {
        font-size: 19px;
        text-align: center;
    }
}

js代码部分

const TAG = '[fragment_main]';

export default {
    data: {
        title: "",
        array: [[1, 0], [1, 1], [1, 2], [2, 2], [2, 2], [2, 3], [3, 3], [3, 5]],
        list: [],
        tv_img_add: "common/profile.png",
        tv_img_text: "",
        file_data: [
            {
                "image_add": "common/profile.png",
            },
            {
                "image_add": "common/ic.png",
            },
            {
                "image_add": "common/more.png",
            },
            {
                "image_add": "common/add64.png",
            },
            {
                "image_add": "common/add64.png",
            },
            {
                "image_add": "common/add64.png",
            },
            {
                "image_add": "common/add64.png",
            },
            {
                "image_add": "common/add64.png",
            }
        ]
    },
    onInit() {
        this.title = this.$t('strings.title');
        this.list = [];
        this.tv_img_text = this.$t('strings.img_text_0');
        var str = 'strings.Setting';
        for (var i = 0; i < this.array.length; i++) {
            var resource = str + i;
            var dataItem = {
                value: this.$t(resource)
            };
            this.list.push(dataItem);
        }
    },
    changeList($idx) {
        console.log(TAG + $idx);
        this.tv_img_add = this.file_data[$idx].image_add;
        this.tv_img_text = this.$t('strings.img_text_' + $idx);
        this.$element($idx).focus({
            focus: true
        });
    }
}

效果：