当前位置：首页 > news >正文

十一、动态构建UI元素

news 来源：原创 2025/6/24 14:32:42

装饰器@Builder

装饰器@BuilderParam

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

链接

简而言之：就是自定义组件允许外部传递 UI

// SonCom 的实现略@Entry
@Component
struct Index {build() {Column({ space: 15 }) {SonCom() {// 直接传递进来(尾随闭包)Button('传入的结构').onClick(() => {AlertDialog.show({ message: '点了 Button' })})}}}
}

2.1单个@BuilderParam参数

:::info
使用尾随闭包的方式传入：

组件内有且仅有一个使用 @BuilderParam 装饰的属性，即可使用尾随闭包
内容直接在 {} 传入即可

注意：

此场景下自定义组件不支持使用通用属性。

:::

@Component
struct SonCom {// 1.设置默认 的 Builder，避免外部不传入@BuilderdefaultBuilder() {Text('默认的内容')}// 2.定义 BuilderParam 接受外部传入的 ui,并设置默认值@BuilderParam ContentBuilder: () => void = this.defaultBuilderbuild() {Column() {// 3. 使用 @BuilderParam 装饰的成员变量this.ContentBuilder()}.width(300).height(200).border({ width: .5 })}
}// 使用自定义组件时，就可以使用如下方式传递 UI
// 不传递时会使用默认值
SonCom(){// 传入的 UI
}

:::info

添加自定义组件：
1. 定义默认的 Builder
2. 添加BuilderParam，添加类型，并设置默认的 Builder
3. 组件内部使用 BuilderParam
外部使用自定义组件，分别测试传递，不传递 UI 的情况

:::

@Component
struct SonCom {// 由外部传入 UI@BuilderParam ContentBuilder: () => void = this.defaultBuilder// 设置默认 的 Builder，避免外部不传入@BuilderdefaultBuilder() {Text('默认的内容')}//自定义组件的build,build() {Column() {//自定义组件通过@BuilderParam接收到的参数, 放在这里了this.ContentBuilder()}.width(300).height(200).border({ width: .5 })}
}@Entry
@Component
struct Index {build() {Column({ space: 15 }) {//自定义组件的单个组件参数通过尾随闭包传入SonCom() {// 直接传递进来Button('传入的结构').onClick(() => {AlertDialog.show({ message: '点了 Button' })})}}}
}

import text from '@ohos.graphics.text';@Entry
@Component
struct Index {@State message: string = 'Hello World';build() {Column() {//4.1调用自定义组件, 什么也不传myCom()//4.2调用自定义组件, 传一个textmyCom(){Text('新传入的text')}//4.3调用自定义组件, 传一个textmyCom(){Button('新传入的button')}}}
}@Component
struct myCom {//1.先写默认的构造器, 防止外部不传入@BuilderdefultBuilder(){Text('默认的组件')}//2.定义可以接受组件参数的Builderparam@BuilderParamnewBuider:()=>void     = this.defultBuilderbuild() {Column(){//3.在自定义组件中使用Builderparamthis.newBuider()}}
}

2.2多个@BuilderParam参数

子组件有多个BuilderParam，必须通过参数的方式来传入

:::info
核心步骤：

自定义组件-定义：
1. 添加多个 @BuilderParam ，并定义默认值
自定义组件-使用
1. 通过参数的形式传入多个 Builder,比如

SonCom({ titleBuilder: this.fTitleBuilder, contentBuilder: this.fContentBuilder })

:::

@Component
struct SonCom {// 由外部传入 UI@BuilderParam titleBuilder: () => void = this.titleDefaultBuilder@BuilderParam contentBuilder: () => void = this.contentDefaultBuilder// 设置默认 的 Builder，避免外部不传入@BuildertitleDefaultBuilder() {Text('默认标题')}@BuildercontentDefaultBuilder() {Text('默认内容')}build() {Column() {Row() {this.titleBuilder()}.layoutWeight(1)Divider()Row() {this.contentBuilder()}.layoutWeight(1)}.width(300).height(200).border({ width: .5 })}
}@Entry
@Component
struct Index {@BuilderfTitleBuilder() {Text('传入的标题').fontSize(20).fontWeight(600).fontColor(Color.White).backgroundColor(Color.Blue).padding(10)}@BuilderfContentBuilder() {Text('传入的标题').fontSize(20).fontWeight(600).fontColor(Color.White).backgroundColor(Color.Blue).padding(10)}build() {Column({ space: 15 }) {//{@BuilderParam的参数名:自己组件内的@Builder构建函数名}SonCom({ titleBuilder: this.fTitleBuilder, contentBuilder: this.fContentBuilder })}}
}

装饰器@Styles

装饰器@Extend

装饰器@CustomDialog

自定义组件@Component

自定义组件基础

在ArkUI中，UI显示的内容均为组件，

由框架直接提供的称为系统组件，由开发者定义的称为自定义组件。

相比于之前学习的轻量级 UI 复用机制 @Builder，

自定义组件的功能更为强大，因为自定义组件可以通过@Prop @Link @BuilderParam实现父子组件进行传递组件和参数。

开发中如果要进行 UI 或业务逻辑进行复用，需要掌握自定义组件的能力。

// HelloComponent 的实现略，后续补充//父组件
@Entry
@Component
struct CustomComponentDemo {build() {Column() {// 自定义组件HelloComponent()HelloComponent()}}
}//子组件
@Component
struct HelloComponent {}

1.1基本使用

:::success
说明

自定义组件名、类名、函数名不能和系统组件名相同。

:::

// 定义
@Component
struct MyComponent {// 状态变量@State message:string =''build(){// .... 描述 UI}
}//----------使用-----------// 1.不传递参数使用
// MyComponent() // 2.传递参数使用：通过传递参数的方式 设置子组件中 messsage 的值
// MyComponent({message:'xxx'})

struct：自定义组件基于struct实现，struct + 自定义组件名 + {…}的组合构成自定义组件，不能有继承关系。对于struct的实例化，可以省略new。
@Component：@Component装饰器仅能装饰struct关键字声明的数据结构。
build()函数：build()函数用于定义自定义组件的声明式UI描述，自定义组件必须定义build()函数。
@Entry：@Entry装饰的自定义组件将作为UI页面的入口。在单个UI页面中，最多可以使用@Entry装饰一个自定义组件。
@Preview：如果想要单独预览组件，可以使用@Preview 进行装饰

1.2成员函数/变量

自定义组件除了必须要实现build()函数外，还可以定义其他的成员函数，以及成员变量

:::info
注意：

不支持静态函数、静态成员变量
成员函数、变量均为私有

:::

@Component
struct MyComponent {// 状态变量@State message:string=''// 成员变量-数据info:string = ''// 成员变量-函数sayHello=()=>{}// 成员函数sayHi(){}build(){// .... 描述 UI}
}

:::info

添加自定义组件
1. 定义成员变量（普通变量、状态变量）
2. 定义成员函数
3. 调用函数，修改成员变量（普通变量、状态变量）
使用自定义组件
1. 无参数调用
2. 传递参数调用

:::

// HelloComponent.ets
@Component
export struct HelloComponent {// 成员变量info: string = '感觉自己闷闷哒'// 成员变量也可以是函数sayHello=()=>{}// 状态变量@State message: string = 'Hello, World!';// 成员函数sayHi() {console.log('你好呀')}build() {// HelloComponent自定义组件组合系统组件Row和TextColumn() {Text(this.message)Text(this.info)Button('修改数据').onClick(() => {this.info = '(* ￣3)(ε￣ *)'this.message = 'Hello,ArkTS'this.sayHi()this.sayHello()})}}
}// 页面的.ets
import { HelloComponent } from './components/HelloComponent'@Entry
@Component
struct CustomComponentDemo {build() {Column() {// 使用组件内部定义的初始值HelloComponent()// 使用传入的值，覆盖子组件的默认值HelloComponent({ info: '你好', message: 'ArkTS' })// 函数也可以传入HelloComponent({ sayHello(){ console.log('传入的逻辑') } })}}
}

1.3通用样式

自定义组件可以通过点语法的形式设置通用样式,通用事件

子组件().width(100).height(100).backgroundColor(Color.Orange).onClick(() => {console.log('外部添加的点击事件')})

:::info

添加自定义组件，随意设置内容
使用自定义组件，通过点语法设置通用样式

:::

@Component
struct MyComponent2 {build() {Button(`Hello World`)}
}@Entry
@Component
struct MyComponent {build() {Row() {MyComponent2().width(200).height(300).backgroundColor(Color.Red).onClick(() => {console.log('外部添加的点击事件')})}}
}

:::info
说明

ArkUI给自定义组件设置样式时，相当于给MyComponent2套了一个不可见的容器组件，而这些样式是设置在容器组件上的，而非直接设置给MyComponent2的Button组件。通过渲染结果我们可以很清楚的看到，背景颜色红色并没有直接生效在Button上，而是生效在Button所处的开发者不可见的容器组件上。

:::

十一、动态构建UI元素

装饰器Builder 装饰器BuilderParam BuilderParam 该装饰器用于声明任意UI描述的一个元素，类似slot占位符。链接简而言之：就是自定义组件允许外部传递 UI // SonCom 的实现略…...

编程日记 2025/6/24 14:32:42

智能时代的基石：神经网络

智能时代的基石：神经网络第一节：神经网络简介课程目标本节课程旨在全面介绍神经网络的基本概念、结构以及其在历史发展中的重要里程碑。通过深入理解神经网络的工作原理和演变过程，学员将能够掌握神经网络在现实世界中的多种应用&#…...

编程日记 2025/6/24 17:24:28

VScode配置GIT

在Visual Studio Code（VSCode）中检测不到已安装的Git可以通过以下步骤来解决‌： ‌确认Git是否正确安装‌：首先，确保在计算机上正确安装了Git。可以通过打开命令行窗口并输入git --version来检查是否能够显示Git的版本…...

编程日记 2025/6/19 23:10:36

【CSS】css 如何实现固定宽高比

今天和同事讨论这个问题，一时间还想不到了，于是学习了下，就顺便当个记录吧要在CSS中实现固定宽高比，有两种主要的方法可以选择。一种是使用新的aspect-ratio属性，另一种是利用padding技巧。随着现代浏览器对aspect-ra…...

编程日记 2025/6/24 16:59:28

使用webrtc-streamer查看实时监控

摄像头配置（海康摄像头为例） 摄像头视频编码应改成H264格式 webrtc-streamer下载 webrtc-streamer下载地址下载后解压出来双击运行，端口默认8000 VUE2项目引入文件在项目静态文件“public”中需引入两个js文件“webrtcstreamer.js”与“…...

编程日记 2025/6/24 15:21:37

ansible部署nginx：1个简单的playbook脚本

文章目录 hosts--ventoryroles执行命令使用ansible向3台centos7服务器上安装nginx hosts–ventory [rootstand playhook1]# cat /root/HOSTS # /root/HOSTS [webservers] 192.168.196.111 ansible_ssh_passpassword 192.168.196.112 ansible_ssh_passpassword 192.168.196.1…...

编程日记 2025/6/24 16:27:21

Ubuntu安装Gitlab详细图文教程

1、环境准备 1.1、Ubuntu环境 Ubuntu24.04Sever版安装教程 1.2、更新系统 sudo apt update -y sudo apt-get update sudo apt-get upgrade 2、安装Nginx 2.1 安装nginx # 安装 apt install nginx -y 2.2 修改nginx配置⽂件 # 修改nginx配置 vim /etc/nginx/si…...

编程日记 2025/6/24 15:40:12

前端面试准备问题2

1.防抖和节流分别是什么，应用场景防抖：在事件被触发后，只有在指定的延迟时间内没有再次触发，才执行事件处理函数。在我的理解中，简单的说就是在一个指定的时间内，仅触发一次，如果有多次重复触…...

编程日记 2025/6/24 16:33:07

uni-app之web-view组件 postMessage 通信【跨端开发系列】

🔗 uniapp 跨端开发系列文章：🎀🎀🎀 uni-app 组成和跨端原理【跨端开发系列】 uni-app 各端差异注意事项【跨端开发系列】uni-app 离线本地存储方案【跨端开发系列】uni-app UI库、框架、组件选型指南【跨端开…...

编程日记 2025/6/24 10:55:07

IntelliJ IDEA 使用技巧与插件推荐

目录常用使用技巧 1. 使用快捷键提升开发效率 2. 多光标编辑 3. 代码自动补全 4. 使用 Find Action 快速执行操作 5. 集成版本控制系统（VCS） 6. 快速查看代码文档推荐插件 1. Lombok Plugin 2. Rainbow Brackets 3. Key Promoter X 4. Chec…...

编程日记 2025/6/24 15:46:25

zookeeper基础命令详解

zookeeper基础命令详解目录文章目录 zookeeper基础命令详解目录一、列出所有基础命令一、列出所有基础命令先启动一个zookeeper客户端连接zookeeper，如果还没有启动zookeeper集群的参考本文启动之后再做后续操作。 https://blog.csdn.net/weixin_42924400/artic…...

编程日记 2025/6/24 16:46:25

2025周易算命网站搭建详细方法+源码选择php环境的配置

以下是一个详细的搭建教程，包括网站分类、环境配置、程序设计和功能实现。 1. 环境准备 1.1 服务器选择操作系统: Linux（推荐使用Ubuntu或CentOS）Web服务器: Nginx数据库: MySQLPHP版本: 7.4.x（确保小于8.0） 1.2 安…...

编程日记 2025/6/21 1:41:03

16：00面试，16：06就出来了，问的问题有点变态。。。

从小厂出来，没想到在另一家公司又寄了。到这家公司开始上班，加班是每天必不可少的，看在钱给的比较多的份上，就不太计较了。没想到5月一纸通知，所有人不准加班，加班费不仅没有了，薪资还要降40%…...

编程日记 2025/6/24 16:11:44

《杨辉三角》

题目描述给出 n(1≤n≤20)n(1≤n≤20)，输出杨辉三角的前 nn 行。如果你不知道什么是杨辉三角，可以观察样例找找规律。输入格式无输出格式无输入输出样例输入 #1复制 6 输出 #1复制 1 1 1 1 2 1 1 3 3 1 1 4 6 4 1 1 5 10 10 5 1 C语言…...

编程日记 2025/6/24 17:38:34

2024年03月中国电子学会青少年软件编程（Python）等级考试试卷（五级）答案 + 解析

青少年软件编程（Python）等级考试试卷（五级）分数：100 题数：38 一、单选题(共25题，共50分) 1. 以下代码的输出结果是？（） nums = list(range(100, 201)) print...

编程日记 2025/6/24 16:54:58

【游戏设计原理】7 - 加德纳的多元智能理论

虽然多元智能理论是对认知方式的分类，但它也可以为游戏设计提供丰富的思路和策略，帮助设计师创建更具吸引力、包容性和多样性的游戏。通过理解不同玩家的认知方式和优势，我们可以更精准地设计游戏的元素和玩法，使其能够吸引广泛的…...

编程日记 2025/6/24 16:40:48

Jackson @JsonProperty 注解

1. 概述 Jackson 是一个流行的Java库，用于将Java对象转换为JSON格式以及从JSON反序列化回Java对象。一种常见的需求是在序列化为JSON或从JSON反序列化时自定义字段的命名。Jackson 的 JsonProperty 注解正好满足了这一需求。 JsonProperty 注解概览 JsonProperty…...

编程日记 2025/6/24 16:33:07

【数据结构——栈与队列】链栈的基本运算（头歌实践教学平台习题）【合集】

目录😋 任务描述相关知识测试说明我的通关代码: 测试结果： 任务描述本关任务：编写一个程序实现链栈的基本运算。相关知识为了完成本关任务，你需要掌握： 初始化栈、销毁栈、判断栈是否为空、进栈、出栈、取栈…...

编程日记 2025/6/24 16:51:52

数据库乐观锁和悲观锁、redis分布式锁使用场景

前言最近发现我们同事，但凡需要加锁的地方都用的是分布式锁。而且我们的后台系统，并没有什么并发量，而且还是单体应用。我真的有点怀疑我的同事不太清楚数据乐观锁、悲观锁和redis分布式的使用场景。请今天就说一下各种锁的应用场景吧。 …...

编程日记 2025/6/24 17:19:09

React的状态管理库-Redux

核心思想：单一数据源、状态是只读的、以及使用纯函数更新状态。组成部分 Store（存储） 应用的唯一状态容器，存储整个应用的状态树,使用 createStore() 创建。 getState()：获取当前状态。dispatch(action)&#xff…...

编程日记 2025/6/24 8:22:55

《自制编译器》--青木峰郎 -读书笔记编译hello

在该书刚开始编译hello.cb时就遇到了问题。本人用的是wsl，环境如下， 由于是64位，因此根据书中的提示，从git上下载了64位的cb编译器 cbc-64bit 问题一: 通过如下命令编译时,总是报错。 cbc -Wa,"--32" -Wl,"-…...

编程日记 2025/6/24 16:10:42

XSS（跨站攻击）

XSS漏洞（跨站脚本） 1.XSS 漏洞简介 XSS又叫CSS（Cross Site Script）跨站脚本攻击是指恶意攻击者往Web页面里插入恶意Script代码，当用户浏览该页之时，嵌入其中Web里面的Script代码会被执行，从…...

编程日记 2025/6/21 1:41:01

华为自反ACL实验

一、实验背景做这个实验的原因是最近公司里上了三台小程序服务器，由于三台服务器的端口都映射出去了，领导要求A网段的三台服务器不能访问内网B，C网段，同时B、C网段内网用户可以访问A段的94、95、96服务器； 也就是PC4\…...

编程日记 2025/6/24 15:20:13

MyBatisPlus实现多表查询

在MyBatisPlus中实现多表查询，主要有以下几种方法： 使用注解进行多表查询： 你可以在Mapper接口中使用Select注解来编写SQL查询语句，实现多表查询。例如，如果你想根据用户ID查询用户信息和对应的区域名称，可…...

编程日记 2025/6/24 16:56:25

【人工智能-中级】循环神经网络（RNN）与Transformer在自然语言处理中的进阶应用

循环神经网络（RNN）与Transformer在自然语言处理中的进阶应用自然语言处理（NLP）是人工智能领域中的重要分支，其主要任务是使计算机能够理解、生成和处理人类语言。近年来，循环神经网络（RNN）和Transformer模型已成为NLP领域的两大核心技术。本文将探讨这两类模型在自然…...

编程日记 2025/6/24 5:45:39

ZED相机应用

下载SDK wget https://stereolabs.sfo2.cdn.digitaloceanspaces.com/zedsdk/3.6/ZED_SDK_Ubuntu18_cuda11.5_v3.6.5.run 安装 ./ZED_SDK_Ubuntu18_cuda11.5_v3.6.5.run skip_python 测试 cd /usr/local/zed/tools ls ZED_Calibration ZED_Depth_Viewer ZED_Diagnostic ZED_E…...

编程日记 2025/6/24 15:56:01

装饰器@Builder

装饰器@BuilderParam

2.1单个@BuilderParam参数

2.2多个@BuilderParam参数

装饰器@Styles

装饰器@Extend

装饰器@CustomDialog

自定义组件@Component

自定义组件基础

1.1基本使用

1.2成员函数/变量

1.3通用样式

相关文章：