鸿蒙自定义UI组件导出使用

上期讲解了在@Entry入口写了一个系统的下拉列表组件,如果我们想要封装一个可供复用的组件供团队其他人使用,那么需要掌握一下自定义组件的写法:

1、自定义可导入组件 - export 声明模块

如果要定义一个在外部可使用的组件 ,

需要再定义组件时 , 使用 export 关键字 修饰 struct 结构体 ;

@Componentexport struct ComponentName {build(){// UI 声明}}

参考下述代码:

导出一个DropdownComponent组件

import { hilog } from '@kit.PerformanceAnalysisKit';interface FontStyle {size: number;weight: number;
}@Component
export struct DropdownComponent {TAG: string = 'DropdownComponent'// 定义 Dropdown 组件的参数options: Array<SelectOption> = []; // 选项列表selectedIndex: number = 0; // 默认选中的索引selectedValue: string = ''; // 选中的值fontStyle: FontStyle = { size: 16, weight: 500 }; // 默认字体样式fontColor: string = '#182431'; // 字体颜色selectedOptionFont: FontStyle = { size: 30, weight: 800 }; // 已选项字体样式optionFont: FontStyle = { size: 16, weight: 400 }; // 选项字体样式onSelectCallback: (index: number, value: string) => void = () => {}; // 默认空函数build() {Column() {Select(this.options).selected(this.selectedIndex)// 默认选中的索引.value(this.selectedValue)// 默认选中的值.font(this.fontStyle)// 设置字体样式.fontColor(this.fontColor)// 设置字体颜色.selectedOptionFont(this.selectedOptionFont)// 设置已选项字体样式.optionFont(this.optionFont)// 设置选项字体样式.onSelect((index: number) => {const selectedValue = this.options[index].value.toString();hilog.info(0x0000, this.TAG,`DropdownComponent Select: index is ${index}, selectedValue is ${selectedValue}`);this.onSelectCallback(index, selectedValue); // 调用回调函数})}.width('100%');}
}

然后在@Entry的入口去引用这个文件

import { DropdownComponent } from './DropdownComponent'; // 导入 DropdownComponent
import { hilog } from '@kit.PerformanceAnalysisKit';@Entry
@Component
struct Index {TAG_LOG: string = 'Index';defaultValue: string = '下拉列表';// 定义选项数组,包含 value 和可选的 labeloptions: Array<SelectOption> = [{ value: 'aaa' },{ value: 'bbb' },{ value: 'ccc' }];selectIndex: number = 0;selectValue: string = 'aaa'handleSelect(index: number, value: string) {hilog.info(0x0000, 'Index', `handleSelect Selected index: ${index}, value: ${value}`);}build() {Column() {DropdownComponent({options: this.options,selectedIndex: this.selectIndex,selectedValue: this.selectValue,onSelectCallback: this.handleSelect}).width('100%');}.width('100%')}
}

最后看一下运行界面

以及日志打印

参考:【OpenHarmony】ArkTS 语法基础 ② ( ArkTS 自定义组件 | 自定义可导入组件 - export 声明模块 | 导入自定义组件 - import 导入组件 )_arkts import-CSDN博客

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/470548.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Web大学生网页作业成品——婚礼婚纱网页设计与实现(HTML+CSS)(6个页面)

&#x1f389;&#x1f389;&#x1f389; 常见网页设计作业题材有**汽车、环保、明星、文化、国家、抗疫、景点、人物、体育、植物、公益、图书、节日、游戏、商城、旅游、家乡、学校、电影、动漫、非遗、动物、个人、企业、美食、婚纱、其他**等网页设计题目, 可满足大学生网…

时序数据库TimescaleDB安装部署以及常见使用

文章目录 一、时序数据库二、TimescaleDB部署1、repository yum仓库配置2、yum在线安装3、插件配置4、TimescaleDB使用登录pg创建插件使用超表 一、时序数据库 什么是时序数据库&#xff1f;顾名思义&#xff0c;用于处理按照时间变化顺序的数据的数据库即为时序数据库&#x…

Matlab: 生成对抗网络,使用Datastore结构输入mat格式数据

使用matlab的生成对抗网络&#xff08;Generative Adversarial Network&#xff0c;GAN&#xff09;以及条件CGAN时&#xff0c;案例中 的生成器的输入为图像&#xff0c;改为.mat格式输入遇到的问题。解决方法 官方资源 训练条件生成对抗网络 (CGAN)- MATLAB & Simulink-…

Linux kernel 堆溢出利用方法(二)

前言 本文我们通过我们的老朋友heap_bof来讲解Linux kernel中off-by-null的利用手法。在通过讲解另一道相对来说比较困难的kernel off-by-null docker escape来深入了解这种漏洞的利用手法。&#xff08;没了解过docker逃逸的朋友也可以看懂&#xff0c;毕竟有了root权限后&a…

设计模式:工厂方法模式和策略模式

工厂方法模式 什么是开闭原则? 开闭原则是扩展开发,对修改关闭 简单工厂(不是设计模式而是一种编程的习惯) 有三个角色 抽象产品:定义了产品的规范,描述了产品的特性和功能.具体产品:实现或者继承抽象产品的子类具体工厂:提供了创建产品的方法,调用者通过该方法获取产品 实…

深度学习代码笔记

一、U-NET 论文题目&#xff1a;U-Net: Convolutional Networks for Biomedical Image SegmentationUNet 的体系结构基于编码器-解码器范式&#xff0c;其中编码器从输入图像中提取特征&#xff0c;解码器基于这些特征生成分割图。但是&#xff0c;UNet还集成了编码器和解码器…

软件测试面试2024最新热点问题

大厂面试热点问题 1、测试人员需要何时参加需求分析&#xff1f; 如果条件循序 原则上来说 是越早介入需求分析越好 因为测试人员对需求理解越深刻 对测试工作的开展越有利 可以尽早的确定测试思路 减少与开发人员的交互 减少对需求理解上的偏差 2、软件测试与调试的关系 测…

L10.【LeetCode笔记】回文链表

目录 1.题目 2.自解 代码 提交结果 1.题目 给你一个单链表的头节点 head &#xff0c;请你判断该链表是否为 回文链表 。如果是&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 示例 1&#xff1a; 输入&#xff1a;head [1,2,2,1] 输出&#xff1a;tru…

Lucene 和 Elasticsearch 中更好的二进制量化 (BBQ)

作者&#xff1a;来自 Elastic Benjamin Trent Lucene 和 Elasticsearch 中更好的二进制量化 (BBQ)。 嵌入模型输出 float32 向量&#xff0c;通常对于高效处理和实际应用来说太大。Elasticsearch 支持 int8 标量量化&#xff0c;以减小向量大小&#xff0c;同时保持性能。其他…

猿创征文|Inscode桌面IDE:打造高效开发新体验

猿创征文&#xff5c;Inscode桌面IDE&#xff1a;打造高效开发新体验 引言 在当今快速发展的软件开发领域&#xff0c;一个高效、易用的集成开发环境&#xff08;IDE&#xff09;是每个开发者必不可少的工具。Inscode 桌面 IDE 作为一款新兴的开发工具&#xff0c;凭借其强大…

【VBA实战】用Excel制作排序算法动画续

为什么会产生用excel来制作排序算法动画的念头&#xff0c;参见【VBA实战】用Excel制作排序算法动画一文。这篇文章贴出我所制作的所有排序算法动画效果和源码&#xff0c;供大家参考。 冒泡排序&#xff1a; 插入排序&#xff1a; 选择排序&#xff1a; 快速排序&#xff1a;…

IPguard与Ping32全面对比——选择最适合企业的数据安全解决方案

在如今数据安全威胁日益加剧的时代&#xff0c;企业必须高度重视保护敏感数据与信息。因此&#xff0c;选择一款合适的数据安全软件&#xff0c;尤其是防泄密和信息保护软件&#xff0c;显得尤为重要。在市场上&#xff0c;有两款备受企业青睐的数据安全解决方案——IPguard和P…

《情商》提升:增强自我意识,学会与情绪共处

在当今社会&#xff0c;情商&#xff08;Emotional Intelligence&#xff0c;EQ&#xff09;的重要性越来越受到人们的关注。情商是指个体运用情绪、情感、认知和行为反应的能力&#xff0c;来理解、管理、表达和处理情感的一种综合素养。情商的高低对于个人的成长、人际关系、…

k8s集群安装(kubeadm)

k8s集群安装&#xff08;kubeadm&#xff09; 1、环境准备&#xff08;master和node节点都执行&#xff09;1.1、替换yum源1.2、关闭selinux1.3、永久关闭防火墙1.4、永久关闭swap1.5、修改主机名添加host1.6、时间同步1.7、将桥接的IPv4流量传递到iptables的链1.8、docker安装…

使用Matlab建立随机森林

综述 除了神经网络模型以外&#xff0c;树模型及基于树的集成学习模型是较为常用的效果较好的预测模型。我们以下构建一个随机森林模型。 随机森林是一种集成学习方法&#xff0c;通过构建多个决策树并结合其预测结果来提高模型的准确性和稳定性。在MATLAB中&#xff0c;可以…

Wireshark

目录 解题思路 题目设计原理 总结 解题思路 首先下载文件&#xff0c;用 wireshark 打开一头雾水。 但是看看题目的提示&#xff0c;说管理员的密码就是 flag 的内容&#xff0c;我们可以知道&#xff0c;关键词估计是密码&#xff0c;passwd、password、pwd之类的。 所以我…

FreeRTOS学习13——任务相关API函数

任务相关API函数 任务相关API函数任务相关API函数介绍任务相关 API 函数详解函数 uxTaskPriorityGet()函数 vTaskPrioritySet()函数 uxTaskGetSystemState()函数 vTaskGetInfo()函数 xTaskGetApplicationTaskTag()函数 xTaskGetCurrentHandle()函数 xTaskGetHandle()函数 xTask…

使用kalibr_calibration标定相机(realsense)和imu(h7min)

vslam-evaluation/VINS/Installation documentation/4.IMU和相机联合标定kalibr_calibration.md at master DroidAITech/vslam-evaluation GitHub 目录 1.kalibr安装 1.1安装依赖项 1.2创建工作空间 1.3下载kalibr并编译 1.4设置环境变量 2.准备标定板 3.配置驱动和打…

[Docker#8] 容器配置 | Mysql | Redis | C++ | 资源控制 | 命令对比

目录 一&#xff1a;Mysql 容器化安装 二&#xff1a;Redis 容器化安装 Redis 简介 Redis 容器创建 三&#xff1a;C容器制作 四&#xff1a;容器资源更新 常见问题 一&#xff1a;Mysql 容器化安装 进入 mysql 的镜像网站&#xff0c;查找 mysql 的镜像 mysql docker…

1小时构建Vue3知识体系之vue的生命周期函数

本文转载自&#xff1a;https://fangcaicoding.cn/course/12/63 大家好&#xff01;我是方才&#xff0c;目前是8人后端研发团队的负责人&#xff0c;拥有6年后端经验&3年团队管理经验。 系统学习践行者&#xff01;近期在系统化输出前端入门相关技术文章&#xff0c;期望能…