0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

HarmonyOS自定义列表组件封装

OpenHarmony技术社区 来源:OpenHarmony技术社区 作者:韦海 2022-04-26 10:57 次阅读

根据OpenHarmony官网组件,结合相关技术,尝试列表组件的封装,提高开发的效率。

效果展示:

f565c3a8-c480-11ec-bce3-dac502259ad0.gif  

实现步骤

①封装组件代码

hml 代码:

<divclass="container{{start?'background':''}}">

<divclass="underline">

<divclass="list-left">
<div>
<textclass="title">{{title}}text>
div>

<divclass="list-des"
if="{{subheading}}">
<textclass="list">
<span>{{subheading}}span>
text>
div>
div>

<divclass="list-right">
<switchclass="switch-list"
if="{{whether}}"
@change="switchHandle">
switch>

<imageelse@click="launch()"class="list-icon"src="../images/right.png">
image>
div>
div>
div>

css 代码:

.container{
justify-content:center;
align-items:center;
padding-left:48px;
padding-right:35px;
overscroll-effect:spring;
}

.background:active{
background-color:#f6f6f6;
}

.underline{
border-bottom:1pxsolid#ccc;
}

/*标题样式代码*/
.list-left{
flex:1;
flex-direction:column;
justify-content:center;
}

.title{
font-family:FZLTHJW--GB1-0;
font-size:32px;
color:rgba(0,0,0,0.9);
letter-spacing:0;
font-weight:400;
height:70px;
}

.list-des{
width:530px;
flex-wrap:wrap;
margin-bottom:10px;
}

.list{
font-family:HarmonyOS_Sans;
font-size:28px;
color:rgba(0,0,0,0.6);
letter-spacing:0;
line-height:35px;
font-weight:400;
padding-bottom:2px;
}

/*switch开关样式代码*/
.list-right{
justify-content:flex-end;
width:115px;
min-height:100px;
align-items:center;
}

.switch-list{
width:115px;
height:120px;
}

.list-icon{
width:14px;
height:26px;
right:20px;
}

js 代码:

exportdefault{
props:{
//数据绑定
title:{
default:''
},
//数据绑定
subheading:{
default:''
},

//true是switch开关,false是图标
whether:{
default:true,
type:Boolean
},

//判断是不是switch开关列表,不是就加点击阴影事件
start:{
default:true,
type:Boolean
},

},

computed:{
//判断是不是switch开关列表,不是就加点击阴影事件
start(){
return!this.whether
},
},

/**
*切换开关
*/
switchHandle({checked:checkedValue}){
this.$emit('switchHandle',checkedValue);
this.checkStatus=checkedValue;
},

};

②引入组件代码,实现列表功能

hml 代码:

<elementname="list-page"src="../../common/listitem/listitem.hml">element>
<divclass="container">
<list-pagewhether="{{true}}"
@switch-handle="showDialog"
title="标题1"
subheading="副文本">
list-page>
<list-pagewhether="{{true}}"
title="标题2">
list-page>

<list-pagewhether="{{false}}"
title="标题3">
list-page>

<list-pagewhether="{{false}}"
title="标题4"
subheading="副文本">
list-page>

div>

css 代码:

.container{
flex-direction:column;
color:#fff;
background-color:#fff;
overscroll-effect:spring;
}

效果图为:

f577f456-c480-11ec-bce3-dac502259ad0.png③在标题 1 加弹窗

hml 代码:


<dialogid="dataRoamDialog"class="dialog-main">
<divclass="dialog-divroaming">
<textclass="text">什么弹窗text>
<divclass="inner-txt">
<textclass="txtdistance">弹窗text>
div>

<divclass="inner-btn">
<buttontype="capsule"
value="确定"
onclick="setList"
class="btn-txt">
button>
<divclass="btn-l">div>
<buttontype="capsule"
value="取消"
onclick="setList"
class="btn-txt">
button>
div>
div>
dialog>

css 代码:

/*弹窗样式*/
.dialog-main{
width:95%;
}

.dialog-div{
flex-direction:column;
align-items:flex-start;
}

.roaming{
height:340px;
}

.text{
font-family:HarmonyOS_Sans_Medium;
font-size:36px;
color:rgba(0,0,0,0.9);
letter-spacing:0;
line-height:38px;
font-weight:bold;
height:112px;
padding:40px0040px;
}

.inner-txt{
width:90%;
}

.txt{
font-family:HarmonyOS_Sans;
font-size:32px;
color:rgba(0,0,0,0.9);
letter-spacing:0;
line-height:38px;
font-weight:400;
flex:1;
height:75px;
justify-content:space-between;
font-family:PingFangSC-Regular;
}

.distance{
padding-left:40px;
margin-top:20px;
}

.inner-btn{
width:100%;
height:120px;
line-height:80px;
justify-content:center;
align-items:center;
margin:10px20px020px;
}

.btn-txt{
width:230px;
height:80px;
font-size:32px;
text-color:#1e90ff;
background-color:#fff;
text-align:left;
align-items:center;
flex:1;
text-align:center;
}

.btn-l{
width:2px;
height:50px;
background-color:#ccc;
margin:010px;
}

js 代码:

exportdefault{
/**
*标题1弹窗开启
*/
showDialog(){
this.$element('dataRoamDialog').show();
},

/**
*标题1弹窗取消
*/
setList(){
this.$element('dataRoamDialog').close();
},
}

效果图:

f586f410-c480-11ec-bce3-dac502259ad0.png  

总结

以上是所有的代码,写这个不难。主要用到了数据绑定跟三元运算和弹窗组件。相当于学习了OpenHarmony的开发,自己尝试封装,让自己更加了解OpenHarmony开发。欢迎各位开发者一起讨论与研究,本次分享希望对大家的学习有所帮助。

审核编辑 :李倩

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • 代码
    +关注

    关注

    30

    文章

    4536

    浏览量

    66496
  • 封装组件
    +关注

    关注

    0

    文章

    2

    浏览量

    5190
  • HarmonyOS
    +关注

    关注

    79

    文章

    1686

    浏览量

    29150

原文标题:HarmonyOS自定义列表组件封装

文章出处:【微信号:gh_834c4b3d87fe,微信公众号:OpenHarmony技术社区】欢迎添加关注!文章转载请注明出处。

收藏 人收藏

    评论

    相关推荐

    基于YOLOv8实现自定义姿态评估模型训练

    Hello大家好,今天给大家分享一下如何基于YOLOv8姿态评估模型,实现在自定义数据集上,完成自定义姿态评估模型的训练与推理。
    的头像 发表于 12-25 11:29 1021次阅读
    基于YOLOv8实现<b class='flag-5'>自定义</b>姿态评估模型训练

    博途用户自定义库的使用

    博途官方提供了很多库,比如:基本函数库、通信库、安全库、驱动库等等,用户可以使用库中的函数/函数块来完成具体的控制任务。除了官方的库,我们也可以创建自己的库(用户自定义库)。比如,把项目
    的头像 发表于 12-25 10:08 246次阅读
    博途用户<b class='flag-5'>自定义</b>库的使用

    Android端自定义铃声 MobPush对安卓端自定义铃声的教程

    如何为APP推送设置独特的通知铃声呢?本次带来的是MobPush对安卓端自定义铃声的教程,快来看看吧~
    的头像 发表于 10-21 15:34 783次阅读
    Android端<b class='flag-5'>自定义</b>铃声 MobPush对安卓端<b class='flag-5'>自定义</b>铃声的教程

    OpenHarmony装饰指定自定义组件:@BuilderParam装饰器

    当开发者创建了自定义组件,并想对该组件添加特定功能时,例如在自定义组件中添加一个点击跳转操作。若直接在
    发表于 09-27 16:02

    OpenHarmony自定义构建函数:@Builder装饰器

    前面章节介绍了如何创建一个自定义组件。该自定义组件内部UI结构固定,仅与使用方进行数据传递。ArkUI还提供了一种更轻量的UI元素复用机制@Builder,@Builder所装饰的函数
    发表于 09-26 16:36

    OpenHarmony自定义组件介绍

    代码可复用性、业务逻辑与UI分离,后续版本演进等因素。因此,将UI和部分业务逻辑封装自定义组件是不可或缺的能力。 自定义组件具有以下特点:
    发表于 09-25 15:36

    OpenHarmony应用开发之自定义弹窗

    。 aboutToAppear参考文档:​​自定义组件的生命周期-组件参考(基于ArkTS的声明式开发范式)-ArkTS API参考-HarmonyOS应用开发​​ 实现builder
    发表于 09-06 14:40

    labview超快自定义控件制作和普通自定义控件制作

    labview超快自定义控件制作和普通自定义控件制作
    发表于 08-21 10:32 5次下载

    教程 3:构建自定义配置文件

    教程 3:构建自定义配置文件
    发表于 07-06 18:49 0次下载
    教程 3:构建<b class='flag-5'>自定义</b>配置文件

    教程 2:自定义配置文件示例

    教程 2:自定义配置文件示例
    发表于 07-04 20:50 0次下载
    教程 2:<b class='flag-5'>自定义</b>配置文件示例

    Android自定义Toast Kotlin

    电子发烧友网站提供《Android自定义Toast Kotlin.zip》资料免费下载
    发表于 06-16 11:43 0次下载
    Android<b class='flag-5'>自定义</b>Toast Kotlin

    带计时器的自定义锻炼

    电子发烧友网站提供《带计时器的自定义锻炼.zip》资料免费下载
    发表于 06-16 10:29 0次下载
    带计时器的<b class='flag-5'>自定义</b>锻炼

    PyTorch教程6.5之自定义图层

    电子发烧友网站提供《PyTorch教程6.5之自定义图层.pdf》资料免费下载
    发表于 06-05 15:17 0次下载
    PyTorch教程6.5之<b class='flag-5'>自定义</b>图层

    HarmonyOS/OpenHarmony应用开发-ArkTS语言@Builder自定义构建函数

    。 为了简化语言,我们将@Builder装饰的函数也称为“自定义构建函数”。 说明,从API version 9开始,该装饰器支持在ArkTS卡片中使用。 一、装饰器使用说明 1.自定义组件
    发表于 05-31 15:15

    labview自定义控件

    labview自定义精美控件
    发表于 05-15 16:46 9次下载