harmonyOS 自定义组件基础演示讲解

上文 HarmonyOS组件属性控制 链式编程格式推荐我们讲了一些系统组件 可以传入一些事件和参数 来达到一些不同的效果

其实 我们还可以用自己写的组件
那么 组件这么写?
其实 我们的 page 内部结果 就是一个组件
在这里插入图片描述
harmonyOS的概念 万物皆组件
那么 我们就可以在他下面加一个
在这里插入图片描述
可以看到 这样也是没有问题的

但最上面 有一个 @Entry装饰器
整个文件中只能有一个组件被 它修饰 修饰了@Entry就是这个文件的入口 每次进入页面 都是展示出 @Entry修饰的组件内容

我们第二个组件 目前这个写法是有问题的 build组件下必须有 且只能有一个组件 作为组件的根元素组件

我们可以将page代码改写如下

@Entry
@Component
struct Index {build() {Row() {Column() {imist();imist();imist();}.width('100%')}.height('100%')}
}@Component
struct imist {build() {Row() {Image($r('app.media.img')).width(20).height(20).margin(15)Text("你好").fontColor(Color.White)}.backgroundColor(Color.Blue).borderRadius(25).margin({top: 15}).width("80%")}
}

这里 我们在page主体下面又写了一个组件 内容大概是 Row声明一行 然后 这一行中 有一个 image图片组件 然后 图片的高宽都设为20 给 15的边距

然后 Text文本组件 内容你好 然后 给他设置了个字体颜色 Color中的白色White

然后 Row 这一行样式设置为 宽度百分之 80 边距 只设上边距 15 然后 背景颜色设为Blue 蓝色 圆角效果 25

然后 我们页面主体 @Entry 修饰的入口组件 用了三个我们写的 imist 组件
运行结果如下
在这里插入图片描述

但是这样 如果我们想文本不同呢?
自定义组件 是可以传递参数的哦

我们将代码改成这样

@Entry
@Component
struct Index {build() {Row() {Column() {imist({content: "第一个组件接到值了"});imist({content: "第二个组件也接到啦"});imist({content: "我这边也OK"});}.width('100%')}.height('100%')}
}@Component
struct imist {private content:string = "青山不改,绿水长流";build() {Row() {Image($r('app.media.img')).width(20).height(20).margin(15)Text(this.content).fontColor(Color.White)}.backgroundColor(Color.Blue).borderRadius(25).margin({top: 15}).width("80%")}
}

我们这里父组件 传递了一个对象 里面有一个字段 content 对应的都是一个字符串内容

然后子组件中声明这个私有参数 content 声明为 string 字符串类型 然后 给了个默认值 “青山不改,绿水长流”
然后 我们的 Text组件用了这个变量

运行结果如下
在这里插入图片描述
可以看到 外面传递值是生效了的

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

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

相关文章

C/C++ fmt 格式化字符串实现(轻量)

实现的目的&#xff1b;提高 C/C 编译速度&#xff0c;fmt 库模板嵌套过多编译速度非常慢&#xff0c;且编译后程序体积也过大&#xff0c;函数步入的栈帧过多&#xff01; 只支持格式&#xff1b;{} 不支持格式&#xff1b;{:02x} class fmt { public:template <typenam…

产品入门第六讲:Axure中继器

&#x1f4da;&#x1f4da; &#x1f3c5;我是默&#xff0c;一个在CSDN分享笔记的博主。&#x1f4da;&#x1f4da; ​​​​​​ &#x1f31f;在这里&#xff0c;我要推荐给大家我的专栏《Axure》。&#x1f3af;&#x1f3af; &#x1f680;无论你是编程小白&#xff0c…

Spring Boot Testing中文文档

本文为官方文档直译版本。原文链接 Spring Boot Testing中文文档 引言测试范围依赖测试 Spring 应用程序测试 Spring Boot 应用程序检测 Web 应用程序类型检测测试配置使用测试配置主方法排除测试配置使用应用程序参数使用模拟环境进行测试通过运行中的服务器进行测试自定义 We…

ChatGPT引领AI时代:程序员、项目经理、产品经理、架构师、Python量化交易师的翅膀

&#x1f482; 个人网站:【 海拥】【神级代码资源网站】【办公神器】&#x1f91f; 基于Web端打造的&#xff1a;&#x1f449;轻量化工具创作平台&#x1f485; 想寻找共同学习交流的小伙伴&#xff0c;请点击【全栈技术交流群】 在当今AI时代&#xff0c;ChatGPT作为一项卓越…

信号驱动IO(新)

信号驱动IO是与内核建立SIGIO的信号处理函数并设置回调&#xff0c;当内核有FD就绪时&#xff0c;内核会发出SIGIO信号通知用户进程&#xff0c;在这期间用户应用进程可以执行其他业务&#xff0c;无需阻塞等待。 这个信号驱动IO多好啊&#xff0c;直接替代IO多路复用不好吗&am…

数字化医疗新篇章:构建智能医保支付购药系统

在迎接数字化医疗时代的挑战和机遇中&#xff0c;智能医保支付购药系统的建设显得尤为重要。本文将深入介绍如何通过先进的技术实现&#xff0c;构建一套智能、高效的医保支付购药系统&#xff0c;为全面建设健康中国贡献力量。 1. 引言 随着医疗科技的飞速发展&#xff0c;…

log4j日志打印配置

文件名&#xff1a;log4j2.xml <?xml version"1.0" encoding"UTF-8"?> <configuration monitorInterval"5"><!--日志级别以及优先级排序: OFF > FATAL > ERROR > WARN > INFO > DEBUG > TRACE > ALL --&…

Radzen Blazor 分享

Blazor 是个好东西&#xff0c;可惜在我们这种大环境下&#xff0c;用的人还是少&#xff0c;但是我们不能抵挡先进的生产力&#xff0c;特别是如果您是C#爱好者&#xff0c;更需要不要错过使用这个利器&#xff0c;起码个人开发个基本应用真是快的不得了。 本节只做一个简单的…

echarts饼图扇形之间设置间距

查看文档以及网上查找&#xff0c;都是将边框颜色设置成和背景色一样&#xff0c;但是当背景是图片的时候就不适用了&#xff0c;试了很多方式都不理想&#xff0c;没办法只能从数据上下手了&#xff0c;最终效果如下图&#xff0c; 思路&#xff1a;将list中的数据每一条后面插…

理解BeEF的架构

BeEF的组件和工作原理BeEF&#xff08;The Browser Exploitation Framework&#xff09;是一款用于浏览器渗透测试和漏洞利用的强大工具。它由多个组件组成&#xff0c;这些组件协同工作以实现对受害者浏览器的控制和攻击。本文将深入探讨BeEF的各个组件和其工作原理&#xff0…

区域和检索算法(leetcode第303题)

题目描述&#xff1a; 给定一个整数数组 nums&#xff0c;处理以下类型的多个查询:计算索引 left 和 right &#xff08;包含 left 和 right&#xff09;之间的 nums 元素的 和 &#xff0c;其中 left < right 实现 NumArray 类&#xff1a;NumArray(int[] nums) 使用数组…

AndroidStudio使用配置详解

见&#xff1a;GitHub - eHackyd/AndroidStudio: AndroidStudio的各种使用配置说明

将mavros仓库上传到gitee,用于二次开发

以mavros为例&#xff08;mavlink同理&#xff09; 按照官网repo提供的安装方法&#xff08;参考&#xff1a;mavros源码安装与配置&#xff09;&#xff0c;将mavros相关的软件包下载到本地&#xff0c;考虑到后面要进行二次开发&#xff0c;所以打算在gitee上做一个备份。同时…

干货教学!!!RHEL8中ansible中常用模块的使用

内容很长各位大老爷耐心观看 本章主要介绍ansible中最常见模块的使用 文件管理模块软件包管理模块服务管理模块磁盘管理模块用户管理模块防火墙管理模块 ansible的基本用法如下 ansible 机器名 -m 模块x -a “模块的参数” 对被管理机器执行不同的操作&#xff0c;只需要调…

【深度学习】Sentence Embedding-BERT-Whitening

前言 flow模型本身很弱&#xff0c;BERT-flow里边使用的flow模型更弱&#xff0c;所以flow模型不大可能在BERT-flow中发挥至关重要的作用。反过来想&#xff0c;那就是也许我们可以找到更简单直接的方法达到BERT-flow的效果。 BERT-whitening则认为&#xff0c;flow模型中涉及到…

C语言第五十三弹----模拟使用strncmp函数

使用C语言模拟使用strncmp函数 trncmp 是一个 C 语言标准库函数&#xff0c;用于比较两个字符串的前 n 个字符是否相等。它的函数声明为&#xff1a; int strncmp(const char *str1, const char *str2, size_t n);其中&#xff0c;str1 和 str2 是要被比较的两个字符串&#…

AWS 知识一:如何在AWS上启动云AD服务器(详细到极致)

前言&#xff1a; 首先这里指的云AD服务器&#xff0c;只是为了让读友更好理解。云AD服务器在AWS中称为目录。AWS一共提供了4种目录类别&#xff0c;下面我将全程使用AWS托管微软AD这种目录类别进行示例。他完全提供了和Microsoft AD的功能&#xff0c;包括NTLM&#xff0c;Ker…

欧洲版OpenAI疑似将在24年发布并开源GPT-4级别模型!

大家好&#xff0c;我是二狗。 今天在推特上看到一条振奋人心的消息&#xff1a; “ 欧洲版OpenAI、法国初创公司 Mistral 首席执行官 Arthur Mensch 在法国国家广播电台宣布&#xff0c;Mistral 将在 2024 年发布开源 GPT-4 级别模型。” 这位老哥接着表示甚至可能是免费的&a…

传统软件集成AI大模型——Function Calling

传统软件和AI大模型的胶水——Function Calling 浅谈GPT对传统软件的影响Function Calling做了什么&#xff0c;为什么选择Function CallingFunction Calling简单例子&#xff0c;如何使用使用场景 浅谈GPT对传统软件的影响 目前为止好多人对chatGPT的使用才停留在OpenAI自己提…

数据可视化---箱线图

类别内容导航机器学习机器学习算法应用场景与评价指标机器学习算法—分类机器学习算法—回归机器学习算法—聚类机器学习算法—异常检测机器学习算法—时间序列数据可视化数据可视化—折线图数据可视化—箱线图数据可视化—柱状图数据可视化—饼图、环形图、雷达图统计学检验箱…