回复
HarmonyOSAPP开发-SettingsAbilitty体验分享 原创
鸿蒙时代
发布于 2021-8-9 09:32
浏览
0收藏
一、技术相关
项目名称: jltf-SettingsAbilitty
项目语言: js
体验模板： SettingsAbilitty
工具：deveco studio
二、效果如下：
三、开发体验过程
第一步 建立项目
新建一个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
});
}
}
第三步
登录你的账号然后启动模拟器即可实现效果
完整代码地址：
https://gitee.com/jltfcloudcn/jump_to/tree/master/SettingsAbility
©著作权归作者所有，如需转载，请注明出处，否则将追究法律责任
分类
标签
HarmonyOSAPP开发-SettingsAbilitty体验分.docx 152.47K 25次下载
赞
收藏
回复
相关推荐
