鸿蒙HarmonyOS学习笔记(6)

定义扩展组件样式:@Extend装饰器

在前文的示例中,可以使用@Styles用于样式的重用,在@Styles的基础上,我们提供了@Extend,用于扩展原生组件样式。

说明

从API version 9开始,该装饰器支持在ArkTS卡片中使用。

从API version 11开始,该装饰器支持在元服务中使用。

装饰器使用说明

语法

@Extend(UIComponentName) function functionName { ... }

使用规则

  • 和@Styles不同,@Extend仅支持在全局定义,不支持在组件内部定义。

说明

只能在当前文件内使用,不支持export

如果想实现export功能,推荐使用AttributeModifier

  • 和@Styles不同,@Extend支持封装指定组件的私有属性、私有事件和自身定义的全局方法。

    // @Extend(Text)可以支持Text的私有属性fontColor
    @Extend(Text) function fancy () {.fontColor(Color.Red)
    }
    // superFancyText可以调用预定义的fancy
    @Extend(Text) function superFancyText(size:number) {.fontSize(size).fancy()
    }
  • 和@Styles不同,@Extend装饰的方法支持参数,开发者可以在调用时传递参数,调用遵循TS方法传值调用。

    // xxx.ets
    @Extend(Text) function fancy (fontSize: number) {.fontColor(Color.Red).fontSize(fontSize)
    }@Entry
    @Component
    struct FancyUse {build() {Row({ space: 10 }) {Text('Fancy').fancy(16)Text('Fancy').fancy(24)}}
    }
  • @Extend装饰的方法的参数可以为function,作为Event事件的句柄。

    @Extend(Text) function makeMeClick(onClick: () => void) {.backgroundColor(Color.Blue).onClick(onClick)
    }@Entry
    @Component
    struct FancyUse {@State label: string = 'Hello World';onClickHandler() {this.label = 'Hello ArkUI';}build() {Row({ space: 10 }) {Text(`${this.label}`).makeMeClick(() => {this.onClickHandler()})}}
    }
  • @Extend的参数可以为状态变量,当状态变量改变时,UI可以正常的被刷新渲染。

    @Extend(Text) function fancy (fontSize: number) {.fontColor(Color.Red).fontSize(fontSize)
    }@Entry
    @Component
    struct FancyUse {@State fontSizeValue: number = 20build() {Row({ space: 10 }) {Text('Fancy').fancy(this.fontSizeValue).onClick(() => {this.fontSizeValue = 30})}}
    }

使用场景

以下示例声明了3个Text组件,每个Text组件均设置了fontStyle、fontWeight和backgroundColor样式。

@Entry
@Component
struct FancyUse {@State label: string = 'Hello World'build() {Row({ space: 10 }) {Text(`${this.label}`).fontStyle(FontStyle.Italic).fontWeight(100).backgroundColor(Color.Blue)Text(`${this.label}`).fontStyle(FontStyle.Italic).fontWeight(200).backgroundColor(Color.Pink)Text(`${this.label}`).fontStyle(FontStyle.Italic).fontWeight(300).backgroundColor(Color.Orange)}.margin('20%')}
}

@Extend将样式组合复用,示例如下。

@Extend(Text) function fancyText(weightValue: number, color: Color) {.fontStyle(FontStyle.Italic).fontWeight(weightValue).backgroundColor(color)
}

通过@Extend组合样式后,使得代码更加简洁,增强可读性。

@Entry
@Component
struct FancyUse {@State label: string = 'Hello World'build() {Row({ space: 10 }) {Text(`${this.label}`).fancyText(100, Color.Blue)Text(`${this.label}`).fancyText(200, Color.Pink)Text(`${this.label}`).fancyText(300, Color.Orange)}.margin('20%')}
}

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

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

相关文章

Chrome DevTools Protocol 进阶:Runtime 域

前言 在 Chrome DevTools Protocol(CDP)中,Runtime 域是一个非常重要的部分,它主要用于与 JavaScript 的执行环境进行交互。通过 Runtime 域,开发者可以在页面上下文中执行 JavaScript 代码、评估表达式、捕获异常等操…

Android 亮度调节

frameworks/base/packages/SystemUI/src/com/android/systemui/settings/BrightnessController.java 更新屏幕亮度值Settings.System.SCREEN_BRIGHTNESS BrightnessController.java中有个onChanged事件,这个是更新 setBrightness(val) private void setBrightness(i…

当你访问一个网站时,数据是怎么传输的呢

摘要: 本文详细阐述了电脑访问网站时数据从电脑端逐步传输到服务器端的完整过程,深入剖析了每一步骤中数据的形态变化以及所涉及的网络协议,包括应用层的 HTTP 与 DNS、传输层的 TCP、网络层的 IP 以及数据链路层的以太网等协议的协同工作机制…

基于 Python、OpenCV 和 PyQt5 的人脸识别上课打卡系统

大家好,我是Java徐师兄,今天为大家带来的是基于 Python、OpenCV 和 PyQt5 的人脸识别上课签到系统。该系统采用 Python 语言开发,开发过程中采用了OpenCV框架,Sqlite db 作为数据库,系统功能完善 ,实用性强…

智能化业务校验框架:动态设计与应用实践

目录 一、业务背景 二、配置内容展示 三、商品动态配置内容展示 (一)商品spu校验信息数据 (二)商品sku校验信息数据 (三)组包商品校验信息数据 (四)商品数据校验数据持有者 &…

鸿蒙面试 --- 性能优化(精简版)

一、性能优化的三个方面 感知流畅:通过合理运用动画提升用户对应用操作的感知流畅度,同时避免因动画滥用导致性能下降。涵盖视觉感知优化、转场场景动效感知流畅(如出现 / 消失转场、导航转场、模态转场、共享元素转场等)&#x…

idea2024加载flowable6.8.1.36遇到的问题-idea启动flowable问题flowable源码启动问题

代码下载地址: https://gitee.com/hanpenghu_admin_admin/flowable6.8.1.git 1.首先是通过顶层目录maven clean install 发现很多子模块并不会install本地mavenStore库,这导致了,一堆相互依赖的模块报错找不到,所以需要根据报错…

web安全从0到1:burp-suite3

声明! 学习视频来自B站up主 **泷羽sec** 有兴趣的师傅可以关注一下,如涉及侵权马上删除文章,笔记只是方便各位师傅的学习和探讨,文章所提到的网站以及内容,只做学习交流,其他均与本人以及泷羽sec团队无关&a…

深度学习模型: BERT(Bidirectional Encoder Representations from Transformers)详解

一、引言 自然语言处理(NLP)领域在过去几十年取得了显著的进展。从早期基于规则的方法到统计机器学习方法,再到如今基于深度学习的模型,NLP 不断向着更高的准确性和效率迈进。BERT 的出现为 NLP 带来了新的突破,它能够…

ESP8266 (ESP-01S)烧录固件 和 了解与单片机通信必需的AT指令

ESP8266(ESP-01s)烧录固件 工具: 需要安装的原装出厂固件库: ESP8266 --接线-- VCC 3.3(外接开发板) GND GND(外接开发板) IO0 GND(外接…

<三>51单片机PWM开发SG90和超声测距

目录 1,PWM开发SG90 1.1简介 1.2控制舵机 1.3编程实现 2,超声测距 2.1简介 2.2,超声波测距代码实现 1,PWM开发SG90 1.1简介 PWM,英文名Pulse Width Modulation,是脉冲宽度调制缩写,它是通过对一系列脉冲的宽度进 行调制,等…

项目搭建+修改

一 : 在列表成功回调函数,追加数据中,添加修改的按钮 for (let x of res) {//追加数据$("#table").append(<tr><td><input type"checkbox" class"ck" value"\${x.uid}"></td><td>\${x.uid}</td>…

【Python爬虫五十个小案例】爬取猫眼电影Top100

博客主页&#xff1a;小馒头学python 本文专栏: Python爬虫五十个小案例 专栏简介&#xff1a;分享五十个Python爬虫小案例 &#x1f40d;引言 猫眼电影是国内知名的电影票务与资讯平台&#xff0c;其中Top100榜单是影迷和电影产业观察者关注的重点。通过爬取猫眼电影Top10…

springboot信息化在线教学平台的设计与实现(代码+数据库+LW)

摘要 随着信息技术在管理上越来越深入而广泛的应用&#xff0c;管理信息系统的实施在技术上已逐步成熟。本文介绍了信息化在线教学平台的开发全过程。通过分析信息化在线教学平台管理的不足&#xff0c;创建了一个计算机管理信息化在线教学平台的方案。文章介绍了信息化在线教…

Hadoop批量计算实验

参考: Hadoop(一)之实验一CentOS7配置Hadoop系统:配置CentOS和下载安装包_基于虚拟机cents7搭建hadoop实验目的-CSDN博客 --------------------------------------------------------- 一、安装Vmware 二、创建虚拟机 1.安装centos7 ①打开VMware,点击新建虚拟机。 …

Flink四大基石之Time (时间语义) 的使用详解

目录 一、引言 二、Time 的分类及 EventTime 的重要性 Time 分类详述 EventTime 重要性凸显 三、Watermark 机制详解 核心原理 Watermark能解决什么问题,如何解决的? Watermark图解原理 举例 总结 多并行度的水印触发 Watermark代码演示 需求 代码演示&#xff…

Ubuntu 操作系统

一、简介 Ubuntu 是一个基于 Linux 的开源操作系统&#xff0c;它由 Canonical Ltd. 公司维护和资助。Ubuntu 以其易用性、强大的社区支持和定期的安全更新而闻名&#xff0c;一个一桌面应用为主的操作系统。 二、用户使用 1、常规用户的登陆方式 在登录时一般使用普通用户&…

Linux下如何安装JDK

在Linux系统上安装JDK&#xff08;Java Development Kit&#xff09;&#xff0c;通常包括下面步骤&#xff1a; 下载JDK安装包解压安装包配置环境变量等 在介绍安装之前&#xff0c;先厘清一些常用问题。 Linux 下Java 安装到哪个目录比较好&#xff1f; 在Linux系统下&am…

Apifox Echo - 简单而强大的API测试服务

什么是Apifox Echo? Apifox Echo 是由 Apifox 官方推出的一个专业的接口请求和返回数据服务平台。它的主要目的是帮助开发人员和测试人员更好地学习和测试API接口。 核心特点 简单易用 提供简洁的HTTP请求和响应服务操作界面直观,上手容易服务地址统一: https://echo.api…

Linux笔记---进程:进程等待

1. 进程等待的概念 进程等待是指父进程通过系统调用wait或waitpid来对子进程进行状态检测与回收的功能。 当子进程退出时&#xff0c;如果父进程不读取子进程的退出状态&#xff0c;子进程就会成为僵尸进程&#xff0c;造成内存泄漏的问题。因此&#xff0c;父进程需要调用wa…