鸿蒙应用开发-组件构建函数

最新推荐文章于 2024-08-13 22:07:19 发布
最新推荐文章于 2024-08-13 22:07:19 发布
阅读量1k 收藏 21
点赞数 10
文章标签： harmonyos 华为 鸿蒙 鸿蒙系统
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_56255097/article/details/136379613
版权

自定义构建函数

1. 构建函数-@Builder

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

  • 组件内定义
  • 全局定义

1）组件内定义

@Builder MyBuilderFunction() {}


this.MyBuilderFunction()

2）全局定义

@Builder function MyGlobalBuilderFunction() {}


MyGlobalBuilderFunction()

📕📕📕 练习案例→商品详情-更多按钮

@Entry
@Component
struct Index {
  build() {
    Column() {
      GridRow({ columns: 2, gutter: 15 }) {
        GridCol({ span: 2 }) {
          Column() {
            Row() {
              Text('评价（2000+）')
                .layoutWeight(1)
                .fontWeight(600)
              // TODO
            }
            .padding(10)

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

        GridCol() {
          Column() {
            Row() {
              Text('推荐')
                .layoutWeight(1)
                .fontWeight(600)
              // TODO
            }
            .padding(10)

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

        GridCol() {
          Column() {
            Row() {
              Text('体验')
                .layoutWeight(1)
                .fontWeight(600)
              // TODO
            }
            .padding(10)

            Row()
              .height(100)
          }
          .borderRadius(12)
          .backgroundColor('#fff')
        }
      }
    }
    .height('100%')
    .padding(15)
    .backgroundColor('#f5f5f5')
  }
}

使用 @Builder 提取UI结构

@Entry
@Component
struct Index {

  @Builder
  MoreBuilder () {
    Row() {
      Text('查看更多')
        .fontSize(14)
        .fontColor('#666666')
      Image($r('app.media.ic_public_arrow_right'))
        .width(16)
        .fillColor('#666666')
    }
  }

  build() {
    Column() {
      GridRow({ columns: 2, gutter: 15 }) {
        GridCol({ span: 2 }) {
          Column() {
            Row() {
              Text('评价（2000+）')
                .layoutWeight(1)
                .fontWeight(600)
              this.MoreBuilder()
            }
            .padding(10)

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

        GridCol() {
          Column() {
            Row() {
              Text('推荐')
                .layoutWeight(1)
                .fontWeight(600)
              this.MoreBuilder()
            }
            .padding(10)

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

        GridCol() {
          Column() {
            Row() {
              Text('体验')
                .layoutWeight(1)
                .fontWeight(600)
              this.MoreBuilder()
            }
            .padding(10)

            Row()
              .height(100)
          }
          .borderRadius(12)
          .backgroundColor('#fff')
        }
      }
    }
    .height('100%')
    .padding(15)
    .backgroundColor('#f5f5f5')
  }
}

小结：

  • 遇到非遍历情况下，一个组件分散着相同的UI结构，可以使用 @Builder 更轻量
    其他：

  • GridRow GridCol 栅格布局

2. 构建函数-传参传递

1）按值传递（场景：构建不同的UI）

@Builder MyBuilderFunction( title: string ) {}


this.MyBuilderFunction('Title')

需求：不同板块查看更多文案不一样

  • 评价 好评率 98%

  • 推荐 查看全部

  • 体验 4 条测评

@Builder
  MoreBuilder (title: string) {
    Row() {
      Text(title)
        .fontSize(14)
        .fontColor('#666666')
      Image($r('app.media.ic_public_arrow_right'))
        .width(16)
        .fillColor('#666666')
    }
  }


this.MoreBuilder('好评率 98%')
this.MoreBuilder('查看全部')
this.MoreBuilder('4 条测评')

2）引用传递（场景：当传递的数据更新，需要更新UI）
需求：

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

@Entry
@Component
struct Index {
  @State
  rate: number = 0

  @Builder
  MoreBuilder(params: { title: string }) {
    Row() {
      Text(params.title)
        .fontSize(14)
        .fontColor('#666666')
      Image($r('app.media.ic_public_arrow_right'))
        .width(16)
        .fillColor('#666666')
    }
  }

  build() {
    Column() {
      Button('获取数据')
        .margin({ bottom: 15 })
        .onClick(() => {
          this.rate = 99
        })
      GridRow({ columns: 2, gutter: 15 }) {
        GridCol({ span: 2 }) {
          Column() {
            Row() {
              Text('评价（2000+）')
                .layoutWeight(1)
                .fontWeight(600)
              this.MoreBuilder({ title: `好评率 ${this.rate} %` })
            }
            .padding(10)

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

        GridCol() {
          Column() {
            Row() {
              Text('推荐')
                .layoutWeight(1)
                .fontWeight(600)
              this.MoreBuilder({ title: '查看全部' })
            }
            .padding(10)

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

        GridCol() {
          Column() {
            Row() {
              Text('体验')
                .layoutWeight(1)
                .fontWeight(600)
              this.MoreBuilder({ title: '4 条测评' })
            }
            .padding(10)

            Row()
              .height(100)
          }
          .borderRadius(12)
          .backgroundColor('#fff')
        }
      }
    }
    .height('100%')
    .padding(15)
    .backgroundColor('#f5f5f5')
  }
}
  • 使用** @Builder** 复用逻辑的时候，支持传参可以更灵活的渲染UI
  • 参数可以使用状态数据，不过建议通过对象的方式传入 @Builder
  1. 构建函数-@BuilderParam 传递UI
    @BuilderParam 该装饰器用于声明任意UI描述的一个元素，类似 slot 占位符

前置知识
组件属性初始化：

  • 定义组件声明属性 title: string
  • 使用组件初始化属性 Comp({ title: string })

  • 尾随闭包初始化组件

    • 组件内有且仅有一个使用 @BuilderParam 装饰的属性

  • 参数初始化组件

    • 组件内有多个使用 @BuilderParam 装饰器属性

1）尾随闭包初始化组件(默认插槽)

需求：

  • 标题文字和更多文案通过属性传入

  • 内容结构需要传入

@Component
struct PanelComp {
  title: string
  more: string
  @BuilderParam
  panelContent: () => void = this.DefaultPanelContent

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

  build() {
    Column() {
      Row() {
        Text(this.title)
          .layoutWeight(1)
          .fontWeight(600)
        Row() {
          Text(this.more)
            .fontSize(14)
            .fontColor('#666666')
          Image($r('app.media.ic_public_arrow_right'))
            .width(16)
            .fillColor('#666666')
        }
      }
      .padding(10)

      Row() {
        this.panelContent()
      }
      .height(100)
    }
    .borderRadius(12)
    .backgroundColor('#fff')
  }
}

@Entry
@Component
struct Index {
  build() {
    Column() {
      GridRow({ columns: 2, gutter: 15 }) {
        GridCol({ span: 2 }) {
          PanelComp({ title: '评价（2000+）', more: '好评率98%' })
        }

        GridCol() {
          PanelComp({ title: '推荐', more: '查看全部' }){
            Text('推荐内容')
          }
        }

        GridCol() {
          PanelComp({ title: '体验', more: '4 条测评' }){
            Text('体验内容')
          }
        }
      }
    }
    .height('100%')
    .padding(15)
    .backgroundColor('#f5f5f5')
  }
}

2）参数初始化组件（具名插槽）

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

@Component
struct PanelComp {
  title: string
  more: string
  @BuilderParam
  panelContent: () => void
  @BuilderParam
  panelFooter: () => void

  build() {
    Column() {
      Row() {
        Text(this.title)
          .layoutWeight(1)
          .fontWeight(600)
        Row() {
          Text(this.more)
            .fontSize(14)
            .fontColor('#666666')
          Image($r('app.media.ic_public_arrow_right'))
            .width(16)
            .fillColor('#666666')
        }
      }
      .padding(10)

      Row() {
        this.panelContent()
      }
      .height(100)
      Row() {
        this.panelFooter()
      }
      .height(50)
    }
    .borderRadius(12)
    .backgroundColor('#fff')
  }
}

@Entry
@Component
struct Index {
  @Builder
  ContentBuilderA() {
    Text('评价内容')
  }
  @Builder
  FooterBuilderA() {
    Text('评价底部')
  }

  build() {
    Column() {
      GridRow({ columns: 2, gutter: 15 }) {
        GridCol({ span: 2 }) {
          PanelComp({
            title: '评价（2000+）',
            more: '好评率98%',
            panelFooter: this.FooterBuilderA,
            panelContent: this.ContentBuilderA
          })
        }

        // GridCol() {
        //   PanelComp({ title: '推荐', more: '查看全部' }){
        //     Text('推荐内容')
        //   }
        // }
        //
        // GridCol() {
        //   PanelComp({ title: '体验', more: '4 条测评' }){
        //     Text('体验内容')
        //   }
        // }
      }
    }
    .height('100%')
    .padding(15)
    .backgroundColor('#f5f5f5')
  }
}
  • 当子组件使用一个 @BuilderParam 的时候，使用组件的时候在尾随 {} 插入UI结构
  • 当子组件使用多个 @BuilderParam 的时候，使用组件的时候 Comp({ xxx: this.builderFn }) 传入
  • 子组件本身可以提供一个默认的 @Builder 函数作为 @BuilderParam 备用函数，当做备用内容使用

4. 构建函数-系统组件自定义UI

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

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

需求：自定义 Tabs 组件的 TabBar UI结构

class ToolBarItem {
  defaultIcon: string | Resource
  activeIcon: string | Resource
  label: string
}

@Entry
@Component
struct Index {
  @State
  activeIndex: number = 0
  toolBars: 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)
      Text(item.label)
        .fontSize(12)
        .margin({ top: 4 })
        .lineHeight(12)
        .fontColor(this.activeIndex === index ? '#000' : '#aaa')
    }
  }

  build() {
    Tabs({
      index: this.activeIndex
    }) {
      ForEach(this.toolBars, (item: ToolBarItem, index: number) => {
        TabContent() {
          Text(index.toString())
        }
        .tabBar(this.TabBarBuilder(item, index))
      })
    }
    .barPosition(BarPosition.End)
    .onChange(index => this.activeIndex = index)
  }
}

最后资料分享

如果你还没有掌握鸿蒙，现在想要在最短的时间吃透它，大家可以参考一下这份鸿蒙学习路线图以及《鸿蒙（HarmonyOS）开发学习笔记》，内容包含ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

【扫描下方二维码即可免费领取！！】

在这里插入图片描述

快速入门

  • 开发准备
  • 构建第一个ArkTS应用（Stage模型）
  • 构建第一个ArkTS应用（FA模型）
  • 构建第一个JS应用（FA模型）
    在这里插入图片描述

开发基础知识

  • 应用程序包基础知识
  • 应用配置文件（Stage模型）
  • 应用配置文件概述（FA模型）
    在这里插入图片描述

资源分类与访问

  • 资源分类与访问
  • 创建资源目录和资源文件
  • 资源访问
    在这里插入图片描述

学习ArkTs语言

  • 初识ArkTS语言
  • 基本语法
  • 状态管理
  • 其他状态管理
  • 渲染控制
    在这里插入图片描述

基于ArkTS声明式开发范式

  • UI开发（ArkTS声明式开发范式）概述
  • 开发布局
  • 添加组件
  • 显示图片
  • 使用动画
  • 支持交互事件
  • 性能提升的推荐方法

在这里插入图片描述

兼容JS的类Web开发范式

  • 概述
  • 框架说明
  • 构建用户界面
  • 常见组件开发指导
  • 动效开发指导
  • 自定义组件
    在这里插入图片描述

Web组件

  • 概述
  • 设置基本属性和事件
  • 并发
  • 窗口管理
  • WebGL
  • 媒体
  • 安全
  • 网络与连接
  • 电话服务
  • 数据管理
  • …
    在这里插入图片描述

应用模型

  • 概述
  • Stage模型开发指导
  • FA模型开发指导
    在这里插入图片描述
有需要完整鸿蒙学习资料的朋友，扫描下方二维码即可免费领取！！！
AI女王
关注
「前端+鸿蒙」鸿蒙应用开发-组件编程技巧-样式复用
AIGC大前端小王子
06-19 123
在鸿蒙应用开发中，组件编程技巧是提高开发效率和代码复用性的重要方式。以下是一些常用的组件编程技巧，包括样式复用、UI结构复用等，并提供相应的示例代码。
「前端+鸿蒙」鸿蒙应用开发-UI组件
AIGC大前端小王子
06-18 348
鸿蒙应用开发 - UI组件详解
零基础开始学习鸿蒙开发-继页面跳转后，页面参数的传递与接收。
qq_36973384的博客
12-07 1784
【代码】零基础开始学习鸿蒙开发-继页面跳转后，页面参数的传递与接收。
鸿蒙应用开发-第二章-函数(上)
weixin_50991227的博客
03-20 1402
function 函数名(){代码段for (a = 1;a <= n;a++) {console.log('靓仔正');fn(2)当我们定义好函数，并在页面中刷新的时候，会发现这段代码并没有被执行。因为函数定义好后，是不会自动执行的，需要我们进行调用。function 函数名(){代码段# function是一个关键字，函数名自定义，定义规则和变量的定义规则相同。
鸿蒙HarmonyOS开发：ArkTS编译-函数命名规则
最新发布
weixin_55362248的博客
08-13 876
模块加载时被执行的函数，名称固定为func_main_0。
鸿蒙：自定义组件、自定义函数、自定义样式
SOOOOOF的博客
06-27 253
1.自定义函数，注意：内部自定义函数不能有fuction关键字// 外部自定义函数@Builder function cardList( 参数){//函数体自定义// 内部自定义函数@Builder cardList( 参数){//函数体自定义2.使用自定义函数cardList(参数)//外部自定义函数使用this.cardList(参数)//内部自定义函数定义方式和自定义函数差不多只需将注解换为@Styles。
鸿蒙ArkTS基础知识-自定义组件生命周期函数onBackPress的调用。
m0_70749039的博客
03-29 1983
本课程使用声明式语法和组件化基础知识，搭建一个可刷新的排行榜页面。在排行榜页面中，使用循环渲染控制语法来实现列表数据渲染，使用@Builder创建排行列表布局内容，使用装饰器@State、@Prop、@Link来管理组件状态。最后我们点击系统返回按键，来学习自定义组件生命周期函数。效果如图所示：
【鸿蒙实战开发】HarmonyOS开发自定义组件和自定义函数
HarmonyOS_001的博客
06-23 535
① 定义头部组件② 引入定义的组件鸿蒙全栈开发学习资料这个就比较简单了，直接把function去掉就可以了道理都是一样的，都是放进去的把function去掉，但是调用不变，并不用加this，原封不动就行了注意事项如果你写Styles全局样式的时候写组件特有属性的时候你会发现报错了，说你写的属性不是通用属性有很多小伙伴不知道该从哪里开始学习鸿蒙开发技术？也不知道鸿蒙开发的知识点重点掌握的又有哪些？自学时频繁踩坑，导致浪费大量时间。结果还是一知半解。所以有一份实用的。
HarmonyOS应用开发-常用组件与布局
11-05
2. **应用框架（App Framework）**：HarmonyOS 的应用框架提供了丰富的 UI 组件和事件处理机制，开发者可以基于这些组件构建用户界面。在这个简单的登录页面中，我们可能需要用到 `Button`（用于提交登录）、`...
HarmonyOS应用开发-Search实现
04-19
### HarmonyOS应用开发-Search实现 #### 概述 在HarmonyOS的应用开发过程中，为了增强用户体验并提高应用的功能性，搜索功能是非常重要的一个组成部分。本文将详细介绍如何在HarmonyOS应用中实现搜索框组件，并...
HarmonyOS应用开发-eTS-媒体查询.docx
05-27
### HarmonyOS应用开发-eTS-媒体查询 #### 一、概述 HarmonyOS是华为推出的一款面向全场景的分布式操作系统，旨在提供一个统一的操作环境，适用于各种设备。随着HarmonyOS的发展，其API版本也在不断更新，以满足更...
HarmonyOS应用开发-@Builder装饰器详解
HarmonyOS_002的博客
07-04 1244
定义的语法调用方法●允许在自定义组件内定义一个或多个自定义构建函数，该函数被认为是该组件的私有、特殊类型的成员函数。●自定义构建函数可以在所属组件的build方法和其他自定义构建函数中调用，但不允许在组件外调用。●在自定义函数体中，this指代当前所属组件，组件的状态变量可以在自定义构建函数内访问。建议通过this访问自定义组件的状态变量而不是参数传递。定义的语法调用方法●全局的自定义构建函数可以被整个应用获取，不允许使用this和bind方法。
HarmonyOS NEXT - ArkTS语言 - 函数篇
u011143672的博客
06-17 2512
在下例中，z是执行f时创建的g箭头函数实例的引用。函数的最后一个参数可以是rest参数。具体方法为，为同一个函数写入多个同名但签名不同的函数头，函数实现紧随其后。闭包是由函数及声明该函数的环境组合而成的。不需要返回值的函数的返回类型可以显式指定为void或省略标注。如果函数中定义的变量与外部作用域中已有实例同名，则函数内的局部变量定义将覆盖外部定义。如果可以从函数体内推断出函数返回类型，则可在函数声明中省略标注返回类型。函数中定义的变量和其他实例仅可以在函数内部访问，不能从外部访问。
鸿蒙HarmonyOS开发：@Builder装饰器，自定义构建函数——UI结构复用
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
05-16 1971
ArkUI还提供了一种更轻量的UI元素复用机制@Builder，@Builder所装饰的函数遵循build()函数语法规则，开发者可以将重复使用的UI元素抽象成一个方法，在build方法里调用。为了简化语言，我们将@Builder装饰的函数也称为“自定义构建函数”。允许在自定义组件内定义一个或多个@Builder方法，该方法被认为是该组件的私有、特殊类型的成员函数。自定义构建函数可以在所属组件的build方法和其他自定义构建函数中调用，但不允许在组件外调用。
鸿蒙开发相关知识（一）【自定义构建函数@Builder、公共样式函数@Styles@Extend】
sjp991012的博客
02-23 861
Builder定义：全局需要function@Builder function 函数名(){ }示例代码中有传参，根据实际需要调整...局部不需要function@Builder 函数名(){ }示例代码中有传参，根据实际需要调整...定义：全局需要function@Styles function 函数名((){ }仅可封装组件通用属性局部不需要function@Styles 函数名((){ }仅可封装组件通用属性@Extend(组件名) function 函数名() {
鸿蒙HarmonyOS实战开发：TypeScript-函数【基础篇】
2401_84194030的博客
04-08 947
函数是JavaScript应用程序的基础
【鸿蒙实战开发】组件间的数据传递
HarmonyOS_002的博客
07-09 1796
这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。
鸿蒙开发-UI-渲染控制
中年程序员
01-11 1654
前文详细学习了鸿蒙开发中的状态管理，理解了组件状态和应用状态区别，以及ArkUI框架对状态变量与UI渲染交互的底层支撑。本文继续学习渲染控制。ArkUI通过自定义组件的build()函数和@Builder装饰器中的声明式UI描述语句构建相应的UI。在声明式描述语句中，除了使用系统组件外，还可以使用渲染控制语句来辅助UI的构建，这些渲染控制语句包括控制组件是否显示的条件渲染语句，基于数组数据快速生成组件的循环渲染语句以及针对大数据量场景的数据懒加载语句。
鸿蒙ArkUI-X跨语言调用说明：【平台桥接(@arkui-x.bridge)】
m0_62167422的博客
05-21 1318
鸿蒙—作为国家主力推送的国产操作系统。部分的高校已经取消了安卓课程，从而开设鸿蒙课程；企业纷纷跟进启动了鸿蒙研发。并且鸿蒙是完全具备无与伦比的机遇和潜力的；预计到年底将有 5,000 款的应用完成原生鸿蒙开发，未来将会支持 50 万款的应用。那么这么多的应用需要开发，也就意味着需要有更多的鸿蒙人才。鸿蒙开发工程师也将会迎来爆发式的增长，学习鸿蒙势在必行！
HarmonyOS应用开发：构建搜索框组件实战
" HarmonyOS应用开发中的Search组件用于构建用户界面，允许用户输入搜索内容，并提供了搜索按钮功能。本文将详细介绍如何在HarmonyOS应用中实现Search组件的创建与使用。" 在HarmonyOS应用开发中，Search组件是构建...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值