【HarmonyOS】鸿蒙开发之自定义组件——第3.7章

自定义构建函数

(适合内部页面的封装,更加合适)(构建页面)

案例:
自定义组件文件 Index.ets

//全局自定义构建函数写法
@Builder function item1(){Row({space:10}){Text("我是自定义构建函数")}
}@Component
export struct Index{build(){Column(){item1()this.item2()}}//局部自定义构建函数写法@Builder item2(){Row({space:10}){Text("我是自定义构建函数")}}
}

使用Index.ets自定义组件

import { Index } from "./cpns/Index"@Entry
@Component
struct customCpn{build(){Column(){Index()}}
}

自定义公共样式

案例

//全局公共样式
@Styles function funcStyle(){.width('100%').height('100%')
}//继承某个样式组件(不能写在组件内)
@Extend(Text) function textStyle(){.fontSize(18).fontColor(Color.Red)
}@Component
struct Index{build(){Column(){Text("我是自定义公共样式").textStyle()}.funcStyle()Column(){Text("我是自定义公共样式2")}.localFuncStyle()}//局部公共样式@Styles funcStyle(){.width('100%').height('100%')}
}

自定义组件有以下特点:
1.可组合:允许开发者组合使用系统组件、及其属性和方法。
2.可重用:自定义组件可以被其他组件重用,并作为不同的实例在不同的父组件或容器中使用。
3.数据驱动UI更新:通过状态变量的改变,来驱动UI的刷新。

踩坑不易,还希望各位大佬支持一下 \textcolor{gray}{踩坑不易,还希望各位大佬支持一下} 踩坑不易,还希望各位大佬支持一下

📃 个人主页: \textcolor{green}{个人主页:} 个人主页: 沉默小管

📃 个人网站: \textcolor{green}{个人网站:} 个人网站: 沉默小管

📃 个人导航网站: \textcolor{green}{个人导航网站:} 个人导航网站: 沉默小管导航网

📃 我的开源项目: \textcolor{green}{我的开源项目:} 我的开源项目: vueCms.cn

🔥 技术交流 Q Q 群: 837051545 \textcolor{green}{技术交流QQ群:837051545} 技术交流QQ群:837051545

👍 点赞,你的认可是我创作的动力! \textcolor{green}{点赞,你的认可是我创作的动力!} 点赞,你的认可是我创作的动力!

⭐️ 收藏,你的青睐是我努力的方向! \textcolor{green}{收藏,你的青睐是我努力的方向!} 收藏,你的青睐是我努力的方向!

✏️ 评论,你的意见是我进步的财富! \textcolor{green}{评论,你的意见是我进步的财富!} 评论,你的意见是我进步的财富!

如果有不懂可以留言,我看到了应该会回复
如有错误,请多多指教

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

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

相关文章

【红包封面发放+微信红包封面制作教程】小黑猫祝大家小年快乐~

今年终于成功获得了微信红包封面~是我们家的小黑猫,嘿嘿。 封面获取方式 一共还有600份,数量有限,大家想要的话请关注文末的公众号,访问红包封面相关的推文获取~ 平时公众号主要发布一些技术类工具知识,希望能帮到大…

Vue2+ElementUI 弹窗全局拖拽 支持放大缩小

拖拽组件 dialogDrag.vue <template><div></div> </template> <script>export default {name: dialogDrag,data() {return {originalWidth: null,originalHeight: null}},created() {this.$nextTick(()>{this.dialogDrag()})},mounted() {}…

cesium-场景出图场景截屏导出图片或pdf

cesium把当前的场景截图&#xff0c;下载图片或pdf 安装 npm install canvas2image --save npm i jspdf -S 如果安装的插件Canvas2Image不好用&#xff0c;可自建js Canvas2Image.js /*** covert canvas to image* and save the image file*/ const Canvas2Image (function…

Linux下的线程操作

一、多线程的创建于退出 1. pthread_create(线程的创建) pthread_create 是 POSIX 线程库中的函数&#xff0c;用于创建一个新的线程。 函数原型如下&#xff1a; int pthread_create(pthread_t *thread, const pthread_attr_t *attr,void *(*start_routine) (void *), void…

无人机激光雷达标定板

机载激光雷达标定板是用于校准和验证机载激光雷达系统的设备。由于机载激光雷达系统在测量地形、建筑物和植被等方面具有广泛的应用&#xff0c;因此标定板的使用对于确保测量结果的准确性和可靠性至关重要。 标定板通常由高反射率的材料制成&#xff0c;如镀金的玻璃或陶瓷&am…

计算机网络实验五

目录 实验五 路由器基本配置 1、实验目的 2、实验设备 3、网络拓扑及IP地址分配 4、实验过程 &#xff08;1&#xff09;路由器设备名称的配置 &#xff08;2&#xff09;路由器每日提示信息配置 &#xff08;3&#xff09;路由器端口的IP地址配置 &#xff08;4&…

目标检测YOLO实战应用案例100讲-【目标检测】Halcon(工具应用篇)

目录 Image、Regiong、XLD相关知识 一 读取的3种方式: 二 图像变量Region 三 图型变量

Docker 阿里云镜像仓库CR使用实践

一、使用容器镜像&#xff0c;查看镜像&#xff0c;创建&#xff0c;推送&#xff0c;拉取阿里云镜像 CR镜像管理&#xff08;阿里云容器镜像服务&#xff08;Container Registry&#xff09;&#xff09; 登录实例 未创建的镜像名称也可以push、docker的私有仓库需要提起创建…

微信小程序新手入门教程二:认识JSON配置文件

在上一篇我们介绍了微信小程序的注册和基本使用方式&#xff0c;并且写出了一个简单的页面&#xff0c;但是依然没有解释目录中的各种.json文件是做什么的。这篇我们就来认识一下各种JSON配置文件及其配置项。 一 认识JSON 首先先来认识一下JSON是什么。 JSON 指的是 JavaScri…

航道大数据应用专项研究报告(附下载)

总体目标 充分认识航道大数据对行业治理的重要性和必要性&#xff0c;航道大数据的开发和利用是建设智慧航道的基础。基于大数据的航道管理体系&#xff0c;实现了现有数据的梳理和汇聚&#xff0c;跨部门数据的交换和整合&#xff0c;建立了数据关联和深度学习的模型机制&…

网络异常案例六_IP冲突

问题现象 同一个局域网下&#xff0c;一个路由器带几十台终端设备&#xff0c;存在终端设备获取到了相同IP的场景。该路由器也是DHCP Server。 有两个设备终端&#xff0c;都显示获取到了192.168.11.177这个ip。 抓包分析 抓包过程中&#xff0c;看到的一些问题。 ps&#x…

​(三)hadoop之hive的搭建1

下载 访问官方网站https://hive.apache.org/ 点击downloads 点击Download a release now! 点击https://dlcdn.apache.org/hive/ 选择最新的稳定版 复制最新的url 在linux执行下载命令 wget https://dlcdn.apache.org/hive/hive-3.1.3/apache-hive-3.1.3-bin.tar.gz 2.解压…

第十一篇【传奇开心果系列】Python的OpenCV技术点案例示例:三维重建

传奇开心果短博文系列 系列短博文目录Python的OpenCV技术点案例示例系列 短博文目录一、前言二、OpenCV三维重建介绍三、基于区域的SGBM示例代码四、BM&#xff08;Block Matching&#xff09;算法介绍和示例代码五、基于能量最小化的GC&#xff08;Graph Cut&#xff09;算法介…

从编程中理解:大脑的动态更新与信息处理

在深入探讨大脑动态更新与信息处理的过程中,我们可以结合编程语言C#的逻辑来构建一个以金庸武侠世界为背景的故事。设想张无忌在《倚天屠龙记》中学习和掌握九阳真经的过程,我们可以将其类比为一种内存管理和知识积累系统。以下是一个简化版但富含叙事元素的Unity C#脚本示例…

【云计算】Openstack配置Redis服务—一主二从三哨兵模式

Redis一主二从三哨兵模式 hostnamectl set-hostname //修改主机名将提供的Redis安装文件下载redis-3.2.12.tar.gz到三台虚拟机中&#xff0c;解压到/opt目录中&#xff0c;并配置yum源使用本地目录&#xff0c;命令如下&#xff08;三台虚拟机操作一致&#xff0c;以redis1主…

linux 组建和卸载raid1、raid0详细操作

组raid的最好是相同容量和型号的硬盘&#xff0c;否则会有木桶效应 linux下组raid有很多细节 一、安装raid软件 deb包 apt-get install mdadm或dnf包 dnf install mdadm二、组raid1-镜像&#xff0c;组raid0-并列 raid1和raid0只有在madam命令时一点点不同&#xff0c;其他…

智慧商城项目(ing)

项目概述 1.创建项目 目标&#xff1a;基于VueCli自定义创建项目架子&#xff0c;将目录调整成符合企业规范的目录 删除多余的文件 修改路由配置 和App.vue 新增两个目录 api/utils ①api接口模块:发送ajax请求的接口模块 ②utils工具模块:自己封装的一些工具方法模块 2…

Flutter组件 StatefulWidget、StatelessWidget 可继承写法

前言 学过Java的同学&#xff0c;应该都知道面向对象语言的三大特征&#xff0c;封装、继承、多态&#xff1b; Dart也是面向对象的语言&#xff0c;但是在Flutter中的很多组件都被下划线 _ 标记为私有&#xff0c;导致无法继承&#xff0c;本文将介绍一种非私有的创建组件写…

已解决org.springframework.dao.DataAccessException异常的正确解决方法,亲测有效!!!

已解决org.springframework.dao.DataAccessException异常的正确解决方法&#xff0c;亲测有效&#xff01;&#xff01;&#xff01; 文章目录 问题分析 报错原因 解决思路 解决方法 精确地识别异常类型 检查并优化SQL语句和数据操作 检查数据库连接和配置 升级或调整…

VUE开发记录

1、VUE模板传递参数到JS方法 <select-language :value"item.language" change"selectLanguage($event, key)"></select-language>selectLanguage(value, key){console.log(value, key) }, 2、Element框架el-form-item自定义label和内容 <…