ArkTS中的自定义构建函数、Tab栏和组件状态共享

🕗 发布于 2024-11-09 08:21 鸿蒙

一、自定义构建函数

1.构建函数 `@Builder`

1.1 介绍

文档地址：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-builder-V5?catalogVersion=V5

概念：ArkUI提供了一种轻量的UI元素复用机制@Builder，可以将重复使用的UI元素抽象成一个方法。在builder里调用。

1.2 定义的位置

组件内定义

@Builder  MyBuilderFcuntion(){
    
}

//调用
this.MyBuilderFcuntion()

全局定义

@Builder function  MyBuilderFcuntion(){
    
}

//调用
MyBuilderFcuntion()

案例

在这里插入图片描述

鸿蒙页面布局，此处我们会用到栅格布局：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-layout-development-grid-layout-V5

待实现的页面结构

@Entry
@Component
struct BuilderDemo1Page {

  build() {
    Column(){ //垂直方向布局
      //columns:分为几列,columns默认值为12
      //gutter:设置子元素在水平和垂直方向的间距。
      GridRow({columns:3,gutter:15}){
        GridCol(){
          Column(){
            Row(){
              Text('评价(200+)')
                .layoutWeight(1)
                //.fontWeight(FontWeight.Bold)
                .fontWeight(600)
            }
            Row(){

            }
            .height(100)
          }
          .backgroundColor('#fff')
          .borderRadius(12)
          .padding(10)
        }

        GridCol(){
          Column(){
            Row(){
              Text('推荐')
                .layoutWeight(1)
                  //.fontWeight(FontWeight.Bold)
                .fontWeight(600)
            }
            Row(){

            }
            .height(100)
          }
          .backgroundColor('#fff')
          .borderRadius(12)
          .padding(10)
        }

        GridCol(){
          Column(){
            Row(){
              Text('体验')
                .layoutWeight(1)
                  //.fontWeight(FontWeight.Bold)
                .fontWeight(600)
            }
            Row(){

            }
            .height(100)
          }
          .backgroundColor('#fff')
          .borderRadius(12)
          .padding(10)
        }

      }
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#f5f5f5')
    .padding(15)
  }
}

使用@Builder提取UI结构

@Entry
@Component
struct BuilderDemo1Page {

  @Builder
  MyBuilder(){
    Row(){
      Text('查看更多')
      Image($r('app.media.chevron_right'))
        .width(16)
        .aspectRatio(1)
    }
  }

  build() {
    Column(){ //垂直方向布局
      //columns:分为几列,columns默认值为12
      //gutter:设置子元素在水平和垂直方向的间距。
      GridRow({columns:2,gutter:15}){
        GridCol({span:2}){  //span:将几个合并成一个
          Column(){
            Row(){
              Text('评价(200+)')
                .layoutWeight(1)
                //.fontWeight(FontWeight.Bold)
                .fontWeight(600)
              // 查看更多
              this.MyBuilder()
            }
            Row(){

            }
            .height(100)
          }
          .backgroundColor('#fff')
          .borderRadius(12)
          .padding(10)
        }

        GridCol(){
          Column(){
            Row(){
              Text('推荐')
                .layoutWeight(1)
                  //.fontWeight(FontWeight.Bold)
                .fontWeight(600)
              // 查看更多
              this.MyBuilder()
            }
            Row(){

            }
            .height(100)
          }
          .backgroundColor('#fff')
          .borderRadius(12)
          .padding(10)
        }

        GridCol(){
          Column(){
            Row(){
              Text('体验')
                .layoutWeight(1)
                  //.fontWeight(FontWeight.Bold)
                .fontWeight(600)

              // 查看更多
              this.MyBuilder()
            }
            Row(){

            }
            .height(100)
          }
          .backgroundColor('#fff')
          .borderRadius(12)
          .padding(10)
        }

      }
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#f5f5f5')
    .padding(15)
  }
}

小结

遇到非遍历情况下，一个组件分散着相同的ui结构，可以使用@Builder加上更轻量级的GridRow和GirdCol栅格布局

1.3 参数传递

场景：构建不同的UI

@Builder  MyBuilderFcuntion(title:string){
    
}

//调用
this.MyBuilderFcuntion('Title')

在这里插入图片描述

//两个位置变动
@Builder
MyBuilder(title:string){
    Row(){
        Text(title)
        Image($r('app.media.chevron_right'))
            .width(16)
            .aspectRatio(1)
    }
}

// 查看更多
this.MyBuilder('好频率98%')
this.MyBuilder('查看全部')
this.MyBuilder('4条测评')

1.4 引用传递

场景：当传递的数据更新，需要更新ui

需求：

点击按钮后，模拟加载好评率数据

在这里插入图片描述

import promptAction from '@ohos.promptAction';
class Params{
  title:string = ''
}
@Entry
@Component
struct BuilderDemo1Page {
  @State rate:number = 0;
  @Builder
  MyBuilder(params:Params){
    Row(){
      Text(params.title)
      Image($r('app.media.chevron_right'))
        .width(16)
        .aspectRatio(1)
    }
  }

  build() {
    Column(){ //垂直方向布局
      Button('获取数据')
        .onClick( () => {
            this.rate = 98;
            promptAction.showToast({message:this.rate.toString()})
        })

      //columns:分为几列,columns默认值为12
      //gutter:设置子元素在水平和垂直方向的间距。
      GridRow({columns:2,gutter:15}){
        GridCol({span:2}){  //span:将几个合并成一个
          Column(){
            Row(){
              Text('评价(200+)')
                .layoutWeight(1)
                //.fontWeight(FontWeight.Bold)
                .fontWeight(600)
              // 查看更多
              this.MyBuilder({title:`好频率${this.rate}%`})
            }
            Row(){

            }
            .height(100)
          }
        }
        .backgroundColor('#fff')
        .borderRadius(12)
        .padding(10)

        GridCol(){
          Column(){
            Row(){
              Text('推荐')
                .layoutWeight(1)
                  //.fontWeight(FontWeight.Bold)
                .fontWeight(600)
              // 查看更多
              this.MyBuilder({title:'查看全部'})
            }
            Row(){

            }
            .height(100)
          }
        }
        .backgroundColor('#fff')
        .borderRadius(12)
        .padding(10)

        GridCol(){
          Column(){
            Row(){
              Text('体验')
                .layoutWeight(1)
                  //.fontWeight(FontWeight.Bold)
                .fontWeight(600)

              // 查看更多
              this.MyBuilder({title:'4条测评'})
            }
            Row(){

            }
            .height(100)
          }
        }
        .backgroundColor('#fff')
        .borderRadius(12)
        .padding(10)

      }
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#f5f5f5')
    .padding(15)
  }
}

使用Builder复用逻辑的时候，支持参数可以更灵活渲染UI

参数可以使用状态数据，不过建议通过对象的方式传递@Builder

2.构建函数 `@BuilderParam`

@BuilderParam该装饰器用于声明任意UI描述一个元素，类似于slot占位符

前置知识：
组件属性初始化
1.定义组件声明属性： title:string
2.使用组件的初始化属性：Comp({title:string})

尾随闭包初始化组件
- 组件内有且仅有一个@BuilderParam装饰器的属性
参数初始化组件
- 组件内有多个@BuilderParam装饰器属性

2.1 尾随闭包初始化组件

需求：

标题文件和更多文件通过属性传入
内容结构需要传入

在这里插入图片描述

@Entry
@Component
struct BuilderParamPage {

  build() {
    Column(){
      GridRow({columns:2,gutter:15}){
        GridCol({span:2}){
          PanelComp({title:'评价(200+)',more:'好评率98%'});
        }
        GridCol(){
          PanelComp({title:'推荐',more:'查看全部'}){
            Text('推荐内容')
          };
        }
        GridCol(){
          PanelComp({title:'体验',more:'4 条测评'}){
            Text('体验内容')
          };
        }
      }
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#f5f5f5')
    .padding(15)
  }
}

@Component
struct PanelComp {
  title:string = ''
  more:string = ''

  @Builder
  DefaultPanelContent(){
    Text('默认内容')
  }

  @BuilderParam
  panelContent: () => void = this.DefaultPanelContent

  build() {
    Column(){
      Row(){
        Text(this.title)
          .layoutWeight(1)
          .fontWeight(600)
        Row(){
          Text(this.more)
            .fontSize(14)
            .fontColor('#666')
          Image($r('app.media.chevron_right'))
            .width(16)
            .aspectRatio(1)
            .fillColor('#666')
        }
      }
      Row(){
        this.panelContent();
      }
      .height(100)
    }
    .backgroundColor('#fff')
    .padding(10)
    .borderRadius(12)

  }
}

2.2 参数初始化组件 (具名插槽)

需求：

需要传入内容结构和底部结构

在这里插入图片描述

@Entry
@Component
struct BuilderParam2Page {

  @Builder
  ContentBuilderA(){
    Text('评论内容1111')
  }
  @Builder
  ContentBuilderB(){
    Text('评论底部')
  }
  build() {
    Column(){
      GridRow({columns:2,gutter:15}){
        GridCol({span:2}){
          PanelComp2({
            title:'评价(2000+)',
            more:'好评率98%',
            panelContent: this.ContentBuilderA,
            panelFooter:this.ContentBuilderB
          })
        }
      }
    }
    .width('100%')
    .height('100%')
    .padding(15)
    .backgroundColor('#f5f5f5')
  }
}

@Component
struct PanelComp2 {
  title:string = '';
  more:string = '';
  @Builder
  DefaultPanelContent(){
    Text('默认内容')
  }
  @BuilderParam
  panelContent: () => void = this.DefaultPanelContent
  @BuilderParam
  panelFooter: () => void = this.DefaultPanelContent

  build() {
    Column(){
      Row(){
        Text(this.title)
          .layoutWeight(1)
          .fontWeight(600)
          .fontSize(14)
          .fontColor('#666')
        Row(){
          Text(this.more)
          Image($r('app.media.chevron_right'))
            .width(16)
            .aspectRatio(1)
            .fillColor('#666')
        }
      }
      Row(){
        this.panelContent()
      }
      .height(100)
      Row(){
        this.panelFooter()
      }
      .height(100)
    }
    .backgroundColor('#fff')
    .padding(10)
    .borderRadius(16)


  }
}

3.总结

当子组件使用一个@BuilderParam的时候，使用组件的时候尾随 {}，插入UI结构
当子组件有多个@BuilderParam的时候，使用组件的时候Comp({xxx:xxxxx})传入
子组件本身提供一个默认的@Builder函数作为@BuilderParam备用函数，当作准用内容使用(默认内容)

4.系统组件自定义UI

在一些系统组件中，根据配置无法达到预期的UI，就可以使用@Builder构建函数自定义UI，前提是该组件要支持自定义UI

Tabs：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-navigation-tabs-V5

4.1 基本Tab结构

@Entry
@Component
struct TabsPage {

  build() {
    Column(){
      //barPosition：控制显示的位置
      Tabs({barPosition:BarPosition.End}){
        TabContent(){
          Text('首页')
        }.tabBar('首页')
        TabContent(){
          Text('项目')
        }
        .tabBar('项目')
        TabContent(){
          Text('面试')
        }.tabBar('面试')
        TabContent() {
          Text('我的')
        }.tabBar('我的')
      }
    }
    .width('100%')
    .height('100%')
  }
}

4.2 自定义Tab结构

在这里插入图片描述

import promptAction from '@ohos.promptAction'

@Entry
@Component
struct TabsPage {
  @State activeIndex:number = 0; //默认激活的是第一个索引
  //定义个对象数组，用来存储图标相关信息
  toolBarItems:ToolBarItem[] = [
    {defaultIcon:$r('app.media.home'),activeIcon:$r('app.media.home_select'),label:'首页'},
    {defaultIcon:$r('app.media.project'),activeIcon:$r('app.media.project_select'),label:'项目'},
    {defaultIcon:$r('app.media.interview'),activeIcon:$r('app.media.interview_select'),label:'面试'},
    {defaultIcon:$r('app.media.mine'),activeIcon:$r('app.media.mine_select'),label:'我的'},
  ]
  @Builder
  TabBarBuilder(item:ToolBarItem,index:number){
    Column(){
      Image(this.activeIndex === index?item.activeIcon:item.defaultIcon)
        .width(24)
        .aspectRatio(1)
      Text(item.label)
        .lineHeight(12)
        .margin({top:4})
        .fontColor(this.activeIndex === index?'#000':'#aaa')
    }
  }
  build() {
    Column(){
      //barPosition：控制显示的位置
      Tabs({barPosition:BarPosition.End}){
        //循环遍历
        ForEach(this.toolBarItems,(item:ToolBarItem,index:number)=>{
          TabContent(){
            Text(item.label)
          }.tabBar(this.TabBarBuilder(item,index))

        })

      }
      .onChange( (index:number) => {
        //获取到点击的索引
        // promptAction.showToast({message:index.toString()})
        this.activeIndex = index;//获取到当前激活的索引
      })
    }
    .width('100%')
    .height('100%')
  }
}

//类：描述ToolBar
class ToolBarItem{
  defaultIcon:string | Resource = '' //默认图标
  activeIcon:string | Resource = ''  //激活图标
  label: string = ''                //文字
}

二、组件状态共享

1.父子单向

@Prop 装饰的变量可以和父组件建立单向的同步关系

@Prop装饰的变量是可变的，但是变化不同同步回到父组件

@Entry
@Component
struct PropPage {
  @State money:number = 0;
  build() {
    Column({space:20}){
      Text('父组件:' + this.money)
        .fontSize(20)
        .onClick(() => {
          this.money++
        })

      //引入子组件
      Child1({money: this.money});
    }
  }
}

@Component
struct Child1 {
  //@Prop是父子单向
  @Prop money:number;
  // @Prop money:number = 10;
  build() {
    Text('子组件:' + this.money)
      .fontSize(20)
      .onClick(() => {
        this.money++
      })
  }
}

支持的类型：

string
number
boolean
enum

子组件可以修改Prop的数据值，父组件更新后覆盖子组件Prop的数据

子组件可以有初始化的默认值，注意：目前的编译器是已经修复bug，不会报错

2.父子双向

子组件中用@Link装饰的变量与父组件中对应的数据建立双向数据绑定

2.1 简单类型

string、number、boolean、enum

@Entry
@Component
struct Link1Page {
  @State money:number = 0;
  build() {
    Column({space:20}){
      Text('父组件:' + this.money)
        .fontSize(20)
        .onClick(() => {
          this.money++
        })

      //引入子组件
      Child2({money: this.money});
    }
  }
}

@Component
struct Child2 {
  //@Link父子双向
  @Link money:number;
  build() {
    Text('子组件:' + this.money)
      .fontSize(20)
      .onClick(() => {
        this.money++
      })
  }
}

2.2 复杂类型

object、class

@Entry
@Component
struct Link2Page {
  @State person:Person = {name:'kunkun',age:26};
  build() {
    Column({space:20}){
      Text(`父组件: + ${this.person.name}，今年${this.person.age}岁了`)
        .fontSize(20)
        .onClick(() => {
          this.person.age++
        })

      //引入子组件
      Child3({person:$person});
      // Child3({person:this.person});
    }
  }
}

@Component
struct Child3 {
  //@Link父子双向
  @Link person:Person;
  build() {
    Text(`子组件: + ${this.person.name}，今年${this.person.age}岁了`)
      .fontSize(20)
      .onClick(() => {
        this.person.age++
      })
  }
}
//自定义类型
class Person{
  name:string = ''
  age:number = 0
}

父组件传值的时候，需要this. 改写成$

子组件@Link装饰数据

3.后代组件

@Provide和consume ，应用于与后代组件的双向数据同步，应用于状态的数据的多个层级之间传递场景

3.1 通过相同的变量名绑定

必须保证变量名是相同

@Entry
@Component
struct ProvidePage {
  @Provide money:number = 0;

  build() {
    Column({space:25}){
      Text('父组件:' + this.money)
        .onClick(() => {
          this.money++
        })
      Child4()
    }
  }
}

@Component
struct Child4 {
  //不可以给初始值
  @Consume money:number;
  build() {
    Text('子组件:' + this.money)
      .onClick(() => {
        this.money++
      })
  }
}

Tip ⏲

Object、class、string、number、boolean、enum类型都支持
通过相同的变量名绑定@Provide 和@Consume的变量名一致

3.2 状态监听

如果开发者需要关注某个变量的值是否发生变化，可以使用@watch为状态变量设置回调函数

@State 、@Prop 和@Link等装饰器在@Watch装饰之前

import promptAction from '@ohos.promptAction'

@Entry
@Component
struct WatchPage {
  @State activeIndex:number = 0;

  build() {
    Column(){

      Button('按钮1')
        .onClick(()=>{
          this.activeIndex = 1;
          promptAction.showToast({message:this.activeIndex.toString()})
        })
      Button('按钮2')
        .onClick(()=>{
          this.activeIndex = 2;
          promptAction.showToast({message:this.activeIndex.toString()})
        })


      Child5({activeIndex:this.activeIndex});
    }
  }
}


@Component
struct Child5 {
  @Prop @Watch('onActionIndex') activeIndex:number = 0

  onActionIndex(){
    promptAction.showToast({message:'监听到了变化 -->' + this.activeIndex})
  }

  build() {
    Text('Child5---->'  + this.activeIndex)
  }
}

TIP：

在第一次初始化的时候,@Watch装饰器的方法是不会被调用的

3.2 @Observed 与@ObjectLink

之前我们通过赋值的方式修改嵌套对象或对象数组这类复杂数据来更新UI的

使用步骤：

类class数据模拟需要定义通过构造函数，使用@Observed修改这个类
初始化数据：需要通过初始化构造方式添加
通过@ObjectLink关联对象，可以直接修改被关联对象来更新UI

在这里插入图片描述

//创建接口
interface ReplyItemInterface{
  id?:number
  avatar?:string | Resource
  author?:string
  content?:string
  time?:string
  area?:string
  linkNum?:number
  likeFlag?:boolean
}
@Observed
export class ReplyItem{
  id?:number
  avatar?:string | Resource
  author?:string
  content?:string
  time?:string
  area?:string
  linkNum?:number
  likeFlag?:boolean

  //构造函数中要求使用接口类型
  constructor(item:ReplyItemInterface) {
    this.id = item.id
    this.avatar = item.avatar
    this.author = item.author
    this.content = item.content
    this.time = item.time
    this.area = item.area
    this.linkNum = item.linkNum
    this.likeFlag = item.likeFlag
  }
}
//创建对象数组
export const replyList:ReplyItem[] = [
  new ReplyItem({id:1,avatar:$r('app.media.kun'),author:'金庸',content:'倚天屠龙记',time:'16:54',area:'武汉',linkNum:30,likeFlag:true}),
  new ReplyItem({id:1,avatar:$r('app.media.kun'),author:'金庸',content:'倚天屠龙记',time:'16:54',area:'武汉',linkNum:30,likeFlag:true}),
  new ReplyItem({id:1,avatar:$r('app.media.kun'),author:'金庸',content:'倚天屠龙记',time:'16:54',area:'武汉',linkNum:30,likeFlag:true})
]

import {ReplyItem,replyList} from '../model/common'
import promptAction from '@ohos.promptAction'

@Entry
@Component
struct ZhihuPage {
  @State content:string = ''
  //评论对象数组
  @State replyList:ReplyItem[] = replyList
  //回复消息
  onReply(){
    const reply:ReplyItem = new ReplyItem({id:1,avatar:$r('app.media.kun'),author:'蔡徐坤',content:this.content,time:'16:54',area:'武汉',linkNum:30,likeFlag:true})
    //添加到对象数组中
    // this.replyList.push(reply) //添加到数组的最后一个
    this.replyList.unshift(reply) //添加到对象数组中的第一个
    this.content = ''
    promptAction.showToast({message:'回复成功'})
  }
  build() {
    Column(){
      TextInput({placeholder:'回复'})
        .layoutWeight(1)
        .onChange((value:string) => {
          this.content = value; //获取到输入框中输入的值
        })
      
      ForEach(this.replyList,(item:ReplyItem) => {
        ReplyComp({item:item})
      })
      Button('发布')
        .onClick(()=> {
          this.onReply();//发布消息
        })
    }
  }
}

@Component
struct ReplyComp {
  @ObjectLink item:ReplyItem
  build() {
    Column(){
      Image(this.item.avatar)
        .width(32)
        .aspectRatio(1)
        .borderRadius(16)
      Column(){
        Text(this.item.author)
          .fontSize(15)
          .fontWeight(100)
          .margin({top:5})
        Text(this.item.content)
          .margin({top:5})
          .fontColor('blue')
          .lineHeight(20)
      }
    }
  }
}

原文地址：https://blog.csdn.net/qq_63946637/article/details/143635083

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：SCI论文数据可视化的在线网址
下一篇：IDEA打开项目后，所有文件都在报错(包括JDK自带的类也报错)

Win10下完全卸载Anaconda
在数据科学和机器学习的世界中，Anaconda是一款非常受欢迎的工具，它提供了一个方便的包管理系统和预装的科学计算库。然而，有时我们可能需要从系统中卸载Anaconda。本文将介绍在Windows 1
阅读更多2024-11-17
2025 年请假攻略！
今日面试题：什么是 Java 内部类？它有什么作用？
阅读更多2024-11-16
UDP协议
源端口：发送方进程bind的端口目的端口：接受方进程bind的端口udp的长度：包括报头和有效载荷最大为216（65535byte) 这就要求应用层将超过udp最大长度的数据，进行分割，分割为小于等
阅读更多2024-11-16
项目风险管理的3大要素
在项目管理领域，风险是一个具有双重性质的概念，它既包含可能带来积极影响的机会，也包含可能产生消极影响的威胁，然而，在日常交流中，人们往往只关注风险的负面方面，这种偏见可能导致错失利用潜在机会的可能性。
阅读更多2024-11-16
第3关 Java分支结构之多重if
多重 if 结构在 Java 编程中非常实用，可以根据不同的情况执行不同的代码，使程序更加灵活。但在使用时，要注意条件的顺序和合理性，以确保程序的正确性。在 Java 编程中，分支结构是控制程序流程的
阅读更多2024-11-16
用户态协议栈与内核模块通信机制
在传统的操作系统架构中，网络协议栈通常运行在内核态中，而应用程序则运行在用户态中。随着一些现代操作系统架构的变化，用户态协议栈逐渐成为一种趋势，尤其是对于高性能网络应用和定制协议栈的开发（例如：DPD
阅读更多2024-11-16
生成模型——PixelRNN与PixelCNN
PixelRNN 是一种基于循环神经网络（RNN）的像素级生成模型，通过逐个像素地生成图像来构建完整的图像，其核心思想是将图像中的像素视为序列，并利用 RNN 的能力来捕捉像素之间的依赖关系。Pixe
阅读更多2024-11-16
C/C++静态库引用过程中出现符号未定义的处理方式
【代码】静态库引用出现符号未定义的处理方式。
阅读更多2024-11-16
Docker compose部署Activemq
整个工具的代码都在Gitee或者Github地址内。
阅读更多2024-11-16
安全见闻8
声明：学习视频来自b站up主泷羽sec，如涉及侵权马上删除文章声明：本文主要用作技术分享，所有内容仅供参考。任何使用或依赖于本文信息所造成的法律后果均与本人无关。请读者自行判断风险，并遵循相关法律法
阅读更多2024-11-16

ArkTS中的自定义构建函数、Tab栏和组件状态共享

一、自定义构建函数

1.构建函数 @Builder

1.1 介绍

1.2 定义的位置

组件内定义

全局定义

案例

待实现的页面结构

使用@Builder提取UI结构

小结

1.3 参数传递

1.4 引用传递

2.构建函数 @BuilderParam

2.1 尾随闭包初始化组件

2.2 参数初始化组件 (具名插槽)

3.总结

4.系统组件自定义UI

4.1 基本Tab结构

4.2 自定义Tab结构

二、组件状态共享

1.父子单向

2.父子双向

2.1 简单类型

2.2 复杂类型

3.后代组件

3.1 通过相同的变量名绑定

3.2 状态监听

3.2 @Observed 与@ObjectLink

相关文章

1.构建函数 `@Builder`

2.构建函数 `@BuilderParam`