HarmonyOS 鸿蒙应用开发 - 创建自定义组件

  开发者定义的称为自定义组件。在进行 UI 界面开发时,通常不是简单的将系统组件进行组合使用,而是需要考虑代码可复用性、业务逻辑与UI分离,后续版本演进等因素。因此,将UI和部分业务逻辑封装成自定义组件是不可或缺的能力。

1、创建自定义组件

1、组件必须使用 @Component  修饰 ;

2、@Entry 修饰 表示应用程序入口

3、build 方法里面必须有一个根容器 :如 Row 、Column 等

4、在自定组件中,任务成员都是私有(类似 java的 private)

5、@State状态机制,自动更新build方法里的内容

6、this 可以获取成员变量

列如:


//自定义组件
@Component
struct CountButton {
  //在自定组件中,任务成员都是私有(类似 java的 private)
  tip: String = "计数按钮"
  //@State状态机制,自动更新build方法里的内容
  @State count: number = 0

  build() {
    Column() { //根组件
      Text(this.tip + '')
        .margin({ top: 10 })
        .fontColor(Color.Black)
        .fontWeight(FontWeight.Bold)
        .fontSize(20)

      Row() {
        Text(this.count + '')
          .fontColor(Color.Red)
          .fontSize(20)
        Button('点击计数')
          .width(120)
          .margin({left:10})
          .onClick(()=>{
            this.count+=1;
        })

      }.margin({top:14})
    }
    .width(200)
    .height(100)
    .backgroundColor('#89CFF0')
    .borderRadius(12)
  }
}

2、使用自定义组件


@Entry
@Component
struct CommonText{
  build(){
    Column(){
      Text("使用自定义组件")
        .fontSize(30)
        .margin({top:20,bottom:20})
      CountButton() //使用自定义组件
      CountButton()
        .margin({top:20})

    }.height('100%')
    .width('100%')
    .alignItems(HorizontalAlign.Center)//水平居中
  }
}

3、效果图

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

SpringBoot3.x 整合 Spring AI

Spring AI 已经发布了一段时间,虽然推出的时候就被人说只是一个套了 API 的壳,但是作为 Spring 生态的一个开源项目,用它来结合到现有业务系统中还是一个比较好的方案,毕竟像笔者当初为了接入 OpenAI 的 API,还专门学了…

链路初始化和训练

一、总览 链路初始化和训练,由物理层进行控制,是一个基于硬件的过程。初始化设备的链路和端口,使得设备能够收发报文,在链路上正常通信。 在reset后由硬件自动启动完整的训练过程,并由LTSSM管理。 1 位锁定 训练开始…

【正点原子Linux连载】 第四十六章 M.2硬盘驱动实验摘自【正点原子】ATK-DLRK3568嵌入式Linux驱动开发指南

1)实验平台:正点原子ATK-DLRK3568开发板 2)平台购买地址:https://detail.tmall.com/item.htm?id731866264428 3)全套实验源码手册视频下载地址: http://www.openedv.com/docs/boards/xiaoxitongban 第四十…

揭秘循环购模式:消费返利新玩法,引领电商新潮流

在当今的消费市场中,有一种商业模式引起了广大消费者的热烈讨论——那就是循环购模式。你可能会想,消费满千元就能得到两千元的福利,每天还能领取现金,这怎么可能呢?商家难道真的在“慷慨解囊”?今天&#…

7.2k star的万能视频解析下载插件

今天给大家介绍一个超级厉害的浏览器插件,可以解析各个平台网页视频——猫抓。 项目简介 猫抓(cat-catch) 是一款资源嗅探扩展插件,他能够帮助你筛选列出当前页面的资源。简单来说,当你打开任意一个带有视频的网页&a…

Vue3中为Ant Design Vue中table的checkbox加tooltip、popover

问题的产生 Vue版本:3.3.13 ant-design-vue 版本:3.x.x 在工作时遇到一个场景,需要在 ant-table 的 checkbox 被禁用的时候提示原因,但是在 ant-design-vue 文档中并没有发现有相关介绍。 首先我去看了issue中是否有提到相关问题…

【MATLAB源码-第214期】基于matlab的遗传算法GA最短路径路由优化算法仿真。

操作环境: MATLAB 2022a 1、算法描述 在现代网络通信和路径规划领域,最短路径路由优化算法是一项关键技术。它涉及在给定的网络拓扑中寻找从源点到目标点的最短或成本最低的路径。近年来,遗传算法(GA)因其出色的全局…

2024.05.18学习记录

1、Vue3 Composition API Vite jsx 2、react 基本使用、高级用法 3、刷题:回溯部分剩下的题目

轻松拿捏C语言——【字符串函数】的使用及模拟实现

🥰欢迎关注 轻松拿捏C语言系列,来和 小哇 一起进步!✊ 🎉创作不易,请多多支持🎉 🌈感谢大家的阅读、点赞、收藏和关注💕 🌹如有问题,欢迎指正 感谢 目录 一、…

java学习四

Random 随机数 数组 静态初始化数组 数组在计算机中的基本原理 数组的访问 什么是遍历 数组的动态初始化 动态初始化数组元素默认值规则 Java内存分配介绍 数组在计算机中的执行原理 使用数组时常见的一个问题 案例求数组元素最大值 public class Test1 {public static void ma…

香蕉成熟度检测YOLOV8NANO

香蕉成熟度检测YOLOV8NANO,采用YOLOV8NANO训练,得到PT模型,然后转换成ONNX模型,让OEPNCV调用,从而摆脱PYTORCH依赖,支持C。python,安卓开发。能检测六种香蕉类型freshripe freshunripe overripe…

Home Credit - Credit Risk Model Stability

本篇是对Kaggle上Home Credit - Credit Risk Model Stability竞赛中的开源代码VotingClassifier Home Credit的解读。原链接在VotingClassifier Home Credit (kaggle.com)。 %%writefile script.py import sys from pathlib import Path import subprocess import os import g…

LLM-Llama在 MAC M1上体验Llama.cpp和通义千问Qwen 1.5-7B

Llama.cpp的主要目标是在各种硬件上(本地和云端)实现LLM推断,同时保持最小的设置和最先进的性能。 纯C/C实现,没有任何依赖关系Apple芯片是一级的支持对象 - 通过ARM NEON、Accelerate和Metal框架进行优化对x86架构的AVX、AVX2和…

重学java 43.多线程 多等待多唤醒案例

Fear never builds the future,but hope does. —— 24.5.25 多等待多唤醒问题 在多条线程同时消费同时等待时,会出现问题 BaoZiPu package S77ThreadMoreWait;/*count和flag可以定义成包装类,但要记得给count和flag手动赋值不然对于本案例来说&#xff…

TCN 问题汇总

config 代码 import osemotion ["Valence"]### For preprocessing ### If tagged with "# Check this", then its adjustable, otherwise leave it alone. config {"extract_class_label": 1,"extract_continuous_label": 1,"…

Linux之DMA驱动详解(2)-sun6i-dma.c 驱动为例

一、DMA控制器硬件 1.1 DMA寄存器 DMA控制器 一般都会包含以下寄存器: DMA硬件描述符地址寄存器:存放 DMA描述符 的地址。DMA配置寄存器:配置 DMA 的 burst 、 width 、 传输方向 等属性。DMA使能寄存器:使能 DMA通道DMA中断状…

LLM 大模型学习必知必会系列(十一):大模型自动评估理论和实战以及大模型评估框架详解

LLM 大模型学习必知必会系列(十一):大模型自动评估理论和实战以及大模型评估框架详解 0.前言 大语言模型(LLM)评测是LLM开发和应用中的关键环节。目前评测方法可以分为人工评测和自动评测,其中,自动评测技术相比人工…

暴雨“彩虹”行业大模型加速器平台全新发布

近日,在第七届数字中国建设峰会期间,暴雨信息全新发布“彩虹”行业大模型加速器平台,聚焦于为客户降本增效减负,将海量通用数据与行业特有数据融合,专注于流程工艺的智能化改进,因地制宜深挖业务需求&#…

第二十届文博会沙井艺立方分会场启幕!大咖齐打卡!

2024年5月24日-27日,第二十届中国(深圳)国际文化产业博览交易会沙井艺立方分会场活动将在艺立方非遗(文旅)产业园盛大举办。 本届文博会艺立方分会场活动办展特色鲜明,亮彩纷呈,将以“种下梧桐树…

win10无权禁用任务计划程序中的任务

问题说明 最近被win10的自动频繁更新搞得难受,发誓要彻底禁用这个家伙,于是网上找了教程执行,发现执行到禁用windows update计划任务时,提示: 这特么windows这个辣鸡系统,限制还真多!&#xf…