HarmonyOSAPP开发-SettingsAbilitty体验分享 原创

发布于 2021-8-9 09:32
浏览
1收藏

一、技术相关

项目名称: jltf-SettingsAbilitty

项目语言: js

体验模板: SettingsAbilitty

工具:deveco studio

二、效果如下:

HarmonyOSAPP开发-SettingsAbilitty体验分享-开源基础软件社区

三、开发体验过程

第一步 建立项目

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

HarmonyOSAPP开发-SettingsAbilitty体验分享-开源基础软件社区

HarmonyOSAPP开发-SettingsAbilitty体验分享-开源基础软件社区

第二步 修改部分代码

主要部分:

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

    });

}

}

第三步

登录你的账号然后启动模拟器即可实现效果

完整代码地址:

https://gitee.com/jltfcloudcn/jump_to/tree/master/SettingsAbility

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
标签
HarmonyOSAPP开发-SettingsAbilitty体验分.docx 152.47K 22次下载
收藏 1
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐