鸿蒙4.0开发笔记之ArkTS装饰器语法基础@Extend扩展组件样式与stateStyles多态样式(十一)

news/2024/4/25 18:49:59

一、Extend扩展组件样式

1、作用
前文提到可以使用@Styles用于样式的扩展,在@Styles的基础上,ArkTS语法还提供了@Extend,⽤于扩展原生组件样式,包括Text、Button等等。

2、定义语法

@Extend(UIComponentName) function functionName { ... } 
//UIComponentName表示原生组件,如Text、Button...
//functionName为样式函数名

3、使用规则(和@Styles不同)

  • @Extend仅支持定义在全局,不支持在组件内部定义。
  • @Extend支持封装指定的组件的私有属性和私有事件和预定义相同组件的@Extend的方法。
  • @Extend装饰的方法支持参数,开发者可以在调用时传递参数,调用遵循ts方法传值调用。
@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.bind(this))}}
}
  • @Extend装饰的⽅法的参数可以为function,作为Event事件的句柄。
@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})}}
}

二、stateStyles多态样式

1、概念
@Styles和@Extend仅仅应用于静态页面的样式复用,stateStyles可以依据组件的内部状态的不同,快速设置不同样式,即多态样式。

2、四种状态
stateStyles是属性方法,可以根据UI内部状态来设置样式,类似于css伪类,但语法不同。ArkUI提供了以下四种状态:

  • focused:获焦态。
  • normal:正常态。
  • pressed:按压态。
  • isabled:不可用态。

3、注意
Button处于第⼀个组件,会默认获焦,生效focused下面的属性样式。

三、@Extend与stateStyles练习

1、@Extend练习任务
使用Extend扩展样式对Text和Button两类组件进行渲染,并需要传递相应参数,其中Button组件的参数需要包括一个函数,以实现点击按钮能够将按钮上的数字进行累加。

2、stateStyles练习任务
按压时显示为pressed态指定的红色。如果在Button前再放⼀个组件,使其不处于获焦态,就会生效normal态的橙色。若果在Button前没有组件,则会默认获焦,生效focused态的蓝色。

3、练习代码

@Entry
@Component
struct Index {@State message: string = '@Extend\n扩展样式'//用于按钮计数的状态值@State count: number = 0build() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold).margin({bottom:15})Divider()//调用Extend扩展样式函数Text('取之无禁,').textDefined(40,Color.Brown)Text('用之不竭。').textDefined(30,'green')Text('是造物者之无尽藏也,').textDefined(20,'#00AABB')Text('而吾与子之所共适!').textDefined(40,Color.Red)//对按钮进行Extend扩展函数的调用//错误调用:Button(this.count),必须转为字符串类型Button(this.count.toString()).btnDefined(()=>{this.count++})//多态样式:也是一种属性方法,但是可以同时写不同状态下的属性Button('多态样式').width('90%').fontSize(40).margin({top:15}).stateStyles({normal: {.backgroundColor(Color.Orange)},focused:{.backgroundColor(Color.Blue)},pressed:{.backgroundColor(Color.Red)}})}.width('100%')}.height('100%')}
}//定义文本扩展样式
@Extend(Text) function textDefined(fs:number, fc:Color|string){.fontSize(fs).fontColor(fc).fontWeight(FontWeight.Bold).fontStyle(FontStyle.Italic)
}//定义按钮扩展样式
//自定义组件的参数可以是一个函数
//或者定义为:@Extend(Button) function btnDefined(click:Function){
@Extend(Button) function btnDefined(click:()=>void){.fontSize(50).width(200)//调用传递过来的函数(形式参数).onClick(()=>{click()})
}

4、测试效果
3.4.1


https://www.xjx100.cn/news/3118773.html

相关文章

C# 模拟鼠标操作工具类

写在前面 用WinForm做RPA项目时经常需要模拟鼠标操作,通过调用Windows Api 可以实现控制鼠标的移动、点击以及滚轮滚动,做到跟人工一样的操作。 代码实现 public static class MouseKeyController{[DllImport("user32")]private static exte…

C++面试的一些总结day1:指针和引用的区别

文章目录 指针和引用的区别和作用定义区别作用 指针和引用的区别和作用 定义 指针:指针是一个变量,其值为指向对象的内存地址,而不是值本身。引用:可以理解为对象的别名,是另外一个变量的直接别名,用于创…

虚幻学习笔记7—蓝图接口

一、前言 蓝图接口就是可以在蓝图中实现的接口,有它方便的地方,可以很方便的调用到实现了接口的函数。 二、实现 2.1、创建一个蓝图接口 1)可以添加多个函数。 2)函数在蓝图接口中只能规定输入和输出参数。 只有输入参数的可以…

详细学习Pyqt5中的5种布局方式

Pyqt5相关文章: 快速掌握Pyqt5的三种主窗口 快速掌握Pyqt5的2种弹簧 快速掌握Pyqt5的5种布局 快速弄懂Pyqt5的5种项目视图(Item View) 快速弄懂Pyqt5的4种项目部件(Item Widget) 快速掌握Pyqt5的6种按钮 快速掌握Pyqt5的10种容器&…

PHP+ajax+layui实现双重列表的动态绑定

需求:商户下面有若干个门店,每个门店都需要绑定上收款账户 方案一:每个门店下面添加页面,可以选择账户去绑定。(难度:简单) 方案二:从商户进入,可以自由选择门店&#…

智能AI问答系统ChatGPT网站系统源码+Midjourney绘画+支持GPT-4-Turbo模型+支持GPT-4图片理解能力

一、AI创作系统 SparkAi创作系统是基于ChatGPT进行开发的Ai智能问答系统和Midjourney绘画系统,支持OpenAI-GPT全模型国内AI全模型。本期针对源码系统整体测试下来非常完美,可以说SparkAi是目前国内一款的ChatGPT对接OpenAI软件系统。那么如何搭建部署AI…

云时空社会化商业 ERP 系统 Shiro 反序列化漏洞复现

0x01 产品简介 时空云社会化商业ERP(简称时空云ERP) ,该产品采用JAVA语言和Oracle数据库, 融合用友软件的先进管理理念,汇集各医药企业特色管理需求,通过规范各个流通环节从而提高企业竞争力、降低人员成本…

react-route-dom 实现简单的嵌套路由

最终效果 点击 to test1 点击to test2 > to test21 点击to test2 > to test22 代码如下 path: "page",element: <父组件 />,children: [{ path: "test1", element: <Test1 /> },{path: "test2",element: <Test2 />…