|
|
|
|
公众号矩阵

在ArkUI的ETS中实现【插槽】的功能

插槽是一套内容分发的API,当组件渲染的时候,将会被替换为“Your Profile”。插槽内可以包含任何模板代码。

作者:panda_coder来源:鸿蒙社区|2021-11-26 10:08

想了解更多内容,请访问:

51CTO和华为官方战略合作共建的鸿蒙技术社区

https://harmonyos.51cto.com

距离ETS的发布也有一段时间,也有不少小伙伴通过ETS制作出很多精美的页面,但在我查阅ETS的组件和API中发现,现有版本的ETS并没有插槽的功能。经过一段时间的探索终于找到曲线救国方式实现插槽功能,得以让组件之间进行解耦。

什么是插槽

了解插槽的小伙伴可以跳过

vue官方定义是:插槽是一套内容分发的API,当组件渲染的时候, 将会被替换为“Your Profile”。插槽内可以包含任何模板代码。

通俗一点就是插槽就像一个占位符,将组件外的内容通过API分发至组件内。

实现步骤

定义一个slot类

旨在提供一个具名的插槽,故定义一个slot类做后续委托。这不是实现的关键点,也可不定义。

  1. class Slot{ 
  2.   name:string="default" 
  3.   builder:any 
  4.  
  5.   constructor (name:string,builder:any){ 
  6.     this.name=name
  7.     this.builder=builder 
  8.   } 

创建一个组件CompA

创建一个自定义组件CompA,并提供两个具名插槽的处理,一个defualt,一个slot2。

  1. @Component 
  2. struct CompA{ 
  3.   @State text:string="" 
  4.   @State data:string[]=[] 
  5.   @State slot:Slot=new Slot(null
  6.   build(){ 
  7.     Column(){ 
  8.       Column(){ 
  9.         Text("CompA组件内的内容"
  10.         .fontColor("#00F"
  11.         .fontSize(16) 
  12.         .margin(10) 
  13.       } 
  14.       Column(){ 
  15.         Row(){ 
  16.           if(this.slot.name=="default"){ 
  17.             ForEach(["这是默认插槽【default】"], 
  18.               this.slot.builder) 
  19.           } 
  20.           if(this.slot.name=="slot2"){ 
  21.             ForEach(this.data, 
  22.               this.slot.builder) 
  23.           } 
  24.         } 
  25.       } 
  26.     } 
  27.   } 

构建页面的组件

构建一个Index的页面,在页面内创建两个Buider bulder1 ,builder2,并实例化两个Slot类slot1、slot2,将builder1,builder2分别给到slot1,slot2。

builder1内通过Text组件显示一段文字。

builder2内通构建稍微复杂一点的模型,设置一个文字和二维码。

  1. @Entry 
  2. @Component 
  3. struct Index { 
  4.   @Builder builder1(str:string){ 
  5.     Text(str).fontSize(18).fontColor("#f00"
  6.   } 
  7.  
  8.   @Builder builder2(obj:any){ 
  9.     Column(){ 
  10.       Row(){ 
  11.         Text(obj.title).fontSize(16) 
  12.       } 
  13.       Row(){ 
  14.         QRCode(obj.title).width(100).height(100) 
  15.       }.margin(10) 
  16.     }.margin(10) 
  17.   } 
  18.  
  19.    slot1:Slot=new Slot(this.builder1) 
  20.    slot2:Slot=new Slot(this.builder2,"slot2"
  21.  
  22.   build() { 
  23.     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 
  24.       Column(){ 
  25.          CompA(){ 
  26.            Text("这样是不会显示的").fontSize(24) 
  27.          } 
  28.         CompA({slot:this.slot1}) 
  29.         CompA({slot:this.slot2,data:[{title:"这是第二个插槽"},{title:"http://www.baidu.com"}]}) 
  30.       } 
  31.     } 
  32.     .width('100%'
  33.     .height('100%'
  34.   } 

显示效果:

在ArkUI的ETS中实现【插槽】的功能-鸿蒙HarmonyOS技术社区

通过图片可以看到,builder1,builder2真实位置是在了CompA的slot处。

重点

上面就提到Slot类可以不用创建,因为实现原理是通过ForEach+Builder实现,也可以将Builder通过函数绑定到组件内。

再看一下官方文档中ForEach:

在ArkUI的ETS中实现【插槽】的功能-鸿蒙HarmonyOS技术社区

全部代码供参考

  1. @Entry 
  2. @Component 
  3. struct Index { 
  4.   @Builder builder1(str:string){ 
  5.     Text(str).fontSize(18).fontColor("#f00"
  6.   } 
  7.   @Builder builder2(obj:any){ 
  8.     Column(){ 
  9.       Row(){ 
  10.         Text(obj.title).fontSize(16) 
  11.       } 
  12.       Row(){ 
  13.         QRCode(obj.title).width(100).height(100) 
  14.       }.margin(10) 
  15.     }.margin(10) 
  16.   } 
  17.  slot1:Slot=new Slot(this.builder1) 
  18.  slot2:Slot=new Slot(this.builder2,"slot2"
  19.   build() { 
  20.     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 
  21.       Column(){ 
  22.          CompA(){ 
  23.            Text("这样是不会显示的").fontSize(24) 
  24.          } 
  25.         CompA({slot:this.slot1}) 
  26.         CompA({slot:this.slot2,data:[{title:"这是第二个插槽"},{title:"http://www.baidu.com"}]}) 
  27.       } 
  28.     } 
  29.     .width('100%'
  30.     .height('100%'
  31.   } 
  32.  
  33. @Component 
  34. struct CompA{ 
  35.   @State text:string="" 
  36.   @State data:string[]=[] 
  37.   @State slot:Slot=new Slot(null
  38.   build(){ 
  39.     Column(){ 
  40.       Column(){ 
  41.         Text("CompA组件内的内容"
  42.         .fontColor("#00F"
  43.         .fontSize(16) 
  44.         .margin(10) 
  45.       } 
  46.       Column(){ 
  47.         Row(){ 
  48.           if(this.slot.name=="default"){ 
  49.             ForEach(["这是默认插槽【default】"], 
  50.               this.slot.builder) 
  51.           } 
  52.           if(this.slot.name=="slot2"){ 
  53.             ForEach(this.data, 
  54.               this.slot.builder) 
  55.           } 
  56.         } 
  57.       } 
  58.     } 
  59.   } 
  60. class Slot{ 
  61.   name:string="default" 
  62.   builder:any 
  63.   constructor (builder:any,name?:string){ 
  64.     name && (this.name=name); 
  65.     this.builder=builder 
  66.   } 

想了解更多内容,请访问:

51CTO和华为官方战略合作共建的鸿蒙技术社区

https://harmonyos.51cto.com

【编辑推荐】

  1. 鸿蒙官方战略合作共建——HarmonyOS技术社区
  2. 打造一款定制化鸿蒙发行版
  3. 鸿蒙开源第三方组件—SwipeCaptcha_ohos3.0旋转验证组件
  4. OpenHarmony源码解析之安全子系统 (应用权限管理)
  5. HarmonyOS Sample之AI能力之NLU引擎服务
  6. HarmonyOS ArkUI之自定义组件侧滑菜单(JS)
【责任编辑:jianghua TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

订阅专栏+更多

带你轻松入门 RabbitMQ

带你轻松入门 RabbitMQ

轻松入门RabbitMQ
共4章 | loong576

58人订阅学习

数据湖与数据仓库的分析实践攻略

数据湖与数据仓库的分析实践攻略

助力现代化数据管理:数据湖与数据仓库的分析实践攻略
共3章 | 创世达人

14人订阅学习

云原生架构实践

云原生架构实践

新技术引领移动互联网进入急速赛道
共3章 | KaliArch

42人订阅学习

视频课程+更多

linux基础知识和项目实战部署课程

linux基础知识和项目实战部署课程

讲师:陈槐15500人学习过

AD活动目录管理 - 理论与实战

AD活动目录管理 - 理论与实战

讲师:杰森洋64599人学习过

汇编语言教程

汇编语言教程

讲师:杨大毛769人学习过

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊

51CTO服务号

51CTO官微