学习鸿蒙基础(3)

1.组件重用样式
如果每个组件的样式都需要单独设置,在开发过程中会出现大量代码在进行重复样式设置,虽然可以复制粘贴,但为了代码简洁性和后续方便维护,可以采用公共样式进行复用的装饰器@Styles。
@Styles装饰器可以将多条样式设置提炼成一个方法,直接在组件声明的位置调用。通过@Styles装饰器可以快速定义并复用自定义样式。用于快速定义并复用自定义样式。
当前@Styles仅支持[通用属性]和[通用事件]。
 @styles方法不支持参数
@Styles可以定义在组件内或全局,在全局定义时需在方法名前面添加function关键字,组件内定义时则不需要添加function关键字。
注意:
组件内@Styles的优先级高于全局@Styles.
框架优先找当前组件内的@Styles,如果找不到,则会全局查找。

@Entry //入口
@Component
struct PageB_build_param {@State message: string = 'Hello World' //@State 数据改变了也刷新的标签@State username: string = ''@State password: string = ''@State widths:number =90build() {Row() {Column() {text({ title: "用户", valueStr:this.username, cb: (value:string) => {this.username=value} })text({ title:"密码",valueStr:this.password,cb:(value:string)=>{this.password=value} })Divider().margin(10)Row() {Button("登录").fontSize(16).myprivateStyle().margin({ right: 10, left: 10 }).onClick(this.login.bind(this))Button("重置").fontSize(16).myprivateStyle().margin({ left: 10, right: 10 }).onClick(this.reset.bind(this))}}.width('100%').height('50%')}.height('100%').width('100%')}@Styles//提取共有的属性 在struct内myprivateStyle(){.width(this.widths).height(50)}//登录login() {console.log(this.username+"----"+this.password)}reset() {this.username = ""this.password = ""this.widths=180}
}
@Styles//全局样式 提取
function Mystyle(){.margin(10).padding(10).width(80).height(50).backgroundColor("#333333")
}@Builder //全局自定义构件函数
function text($$: { title: string,valueStr: string,cb: (value: string) => void }) {Row() {Text($$.title).Mystyle().fontSize(16).fontColor(Color.White).textAlign(TextAlign.Center).border({width: 3,color: Color.Blue}).borderRadius(10).fontWeight(FontWeight.Bold)TextInput({ text: $$.valueStr }).width(200).height(50).fontSize(16).onChange((value: string) => {$$.cb(value)})}.alignItems(VerticalAlign.Center)}

2.扩展组件样式
@Extend(UIcomponentName) function functionName { ... }
·和@Styles不同,@Extend仅支持定义在全局,不支持在组件内部定义。
·和@Styles不同,@Extend支持封装指定的组件的私有属性和私有事件和预定义相同组件的@Extend的方法。·和@Styles不同,@Extend装饰的方法支持参数,开发者可以在调用时传递参数,调用遵循TS方法传值调用·@Extend装饰的方法的参数可以为function,作为Event事件的句柄。
@Extend的参数可以为状态变量,当状态变量改变时,UI可以正常的被刷新渲染。

@Extend(Text)//全局对组件-Text进行扩展
function MyTextExtend(text:string){.margin(10).padding(10).width(80).height(50).backgroundColor(text==="用户"? "#666666" : "#333333").fontSize(16).fontColor(Color.White).textAlign(TextAlign.Center).border({width: 3,color: Color.Blue}).borderRadius(10).fontWeight(FontWeight.Bold)
}@Extend(TextInput)//对组件textinput进行扩展
function myTextInput(cb:(value :string )=> void){.width(200).height(50).fontSize(16).onChange((value: string) => {cb(value)})
}@Builder //全局自定义构件函数
function text($$: { title: string,valueStr: string,cb: (value: string) => void }) {Row() {Text($$.title).MyTextExtend($$.title)TextInput({ text: $$.valueStr }).myTextInput($$.cb)}.alignItems(VerticalAlign.Center)
}

3.多态样式
stateStyles是属性方法,可以根据UI内部状态来设置样式,类似于css伪类,但语法不同。ArkUI提供以 下四种状态:
focused:获焦态。
normal: 正常态。
pressed: 按压态。
disabled: 不可用态。

@Extend(TextInput)//对组件textinput进行扩展
function myTextInput(cb:(value :string )=> void){.width(200).height(50).fontSize(16).stateStyles({normal:normalStyle,pressed:pressStyle,focused:foucsStyle}).onChange((value: string) => {cb(value)})
}
@Styles
function pressStyle(){.backgroundColor(Color.White)
}
@Styles
function foucsStyle(){.backgroundColor(Color.Red)
}
@Styles
function normalStyle(){.backgroundColor(Color.Green)
}

4.循环渲染
ForEach(
arr: Array,
itemGenerator: (item: any, index?: number) => void,
keyGenerator?: (item: any, index?: number): string => string
)
在ForEach循环渲染过程中,系统会为每个数组元素生成一个唯一且持久的键值, 用于标识对应的组件。当这个键值变化时,ArkUI框架将视为该数组元素已被替换或修改,并会基于新的键值创建一个新的组件。
ForEach提供了一个名为keyGenerator的参数,这是一个函数,开发者可以通过它自定义键值的生成规则。如果开发者没有定义keyGenerator函数,则ArkUI框架会使用默认的键值生成函数,即(item: any, index: number)=> { return index+ '_' + JSON.stringify(item); }。

@Entry
@Component
struct PageForEach {@State list: string [] = ["Hello World", "hello harmonyos", "hello my"]@State list1: Object [] = [{ id: 1, name: "房子" }, { id: 2, name: "车子" }, { id: 3, name: "票子" }]build() {Row() {Column() {ForEach(this.list, (item: string) => {Text(item).fontSize(26)})ForEach(this.list1, (item1: Object) => {Text(item1["name"]).fontSize(26)},item=>JSON.stringify(item))//用这个去作为唯一的key// List组件配合 ForEach超出屏幕可以滚动List(){ForEach(this.list1,(item1:Object)=>{ListItem(){Text(item1["name"]).fontSize(26).margin(10)}},item=>JSON.stringify(item))}.height(60).divider({startMargin:10,endMargin:10,strokeWidth:1,color:Color.Green})Button("切换").onClick(()=>{this.list1[1]["name"]="银山"this.list1.splice(0,1,{id:1,name:"金山"})})}.width('100%')}.height('100%')}
}

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

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

相关文章

嵌入式学习 Day15

一. 指针类型辨析 二. 传参辨析 三. 结构体 1.定义结构体 练习: 2. 结构体大小 8,12

Redis核心技术与实战【学习笔记】 - 10.浅谈CPU架构对Redis性能的影响

概述 可能很多人都认为 Redis 和 CPU 的关系简单,Redis 的线程在 CPU 上运行,CPU 快 Reids 处理请求的速度也很快。 其实,这种认知是片面的,CPU 的多核架构及多 CPU 结构,也会影响到 Redis 的性能。如果不了解 CPU 对…

[office] excel2010双向条形图制作 #经验分享#微信

excel2010双向条形图制作 本教程为大家介绍一下excel2010中excel2010双向条形图制作方法。 1.选中工作区域 2.点击插入-->图表,选择条形图 3.为美观可将中间竖线可去掉 4.方法是选中竖线,右击-->删除 5.接下来将图例靠上,选中图例,右击-->设置图例格式-->图例选项…

[Java 并发基础]多线程编程

文章参考: https://docs.oracle.com/javase/8/docs/api/java/util/concurrent/Future.html https://juejin.cn/post/6970558076642394142 文章目录 线程的创建方式继承 Thread实现 Runnable 接口实现 Callable 接口使用 Lambda使用线程池 线程创建相关的 jdk源码Thr…

专业145+总分420+电子科技大学858信号与系统考研经验电子信息与通信

今年考研各门都相对发挥比较好,总分420,专业858信号与系统145,数学135顺利上岸电子科技大学,应群里很多学弟学妹要求,我总结一下自己的复习经验,希望可以在考研路上,助大家一臂之力。专业课&…

STM32F407移植OpenHarmony笔记5

继上一篇笔记,搭建好STM32的编译框架,编译出来的OHOS_Image.bin并不能跑不起来。 今天要在bsp里面添加一些代码,让程序能跑起来。 先从裸机点亮LED灯开始,准备以下3个文件:startup和system文件可以用OHOS官方代码。 /device/boar…

软考正式改为机考,对于考生有哪些影响?

1、报名费用可能会涨价 考虑到报名费用问题,软考初级考生可能会担心费用是否会涨价。需要指出的是,并非所有地区都会涨价,只有部分地区有可能涨价。 2、机考考试难度会降低吗? 如果实施机考,将是一次重大改革&#…

云计算概述(云计算类型、技术驱动力、关键技术、特征、特点、通用点、架构层次)(二)

云计算概述(二) (云计算类型、技术驱动力、关键技术、特征、特点、通用点、架构层次) 目录 零、00时光宝盒 一、云计算类型(以服务的内容或形态来分) 二、云计算的12种技术驱动力 三、云计算的关键技术 四、云计…

Fiddler修改https请求与响应 bug修复变灰了选不了等 Fiddle对夜神模拟器抓包设置

不要修改别人的东西,不要修改别人的东西,不要修改别人的东西 只用于自己的网站,自己安全调试。 fiddler修改https请求 1、打到要改的请求 2、替换请求内容 3、开启捕获。操作产生请求。 4、fiddler里查看请求或响应数据 ,确认成…

物流无人机在哪些场景最适合应用?

物流无人机在多种场景中都有应用潜力,以下是一些最适合的应用场景: 偏远地区配送:在偏远地区,传统配送方式成本高昂且效率低下,而物流无人机则可以通过空中航线直接送达目的地,大大缩短了配送时间和成本。…

编程语言比较—ruby,python,php比较

ruby语言 ruby语言是日本人开发的,在全球范围内广收欢迎的编程语言。这是一种经常被人评价"写代码很快乐"的编程语言,并且很容易学习。 ruby的ruby on rauls框架非常有名,不仅用于网页开发,而且也越来越多用于编程教育…

05 - 什么是路由协议

1 路由协议 路由协议(英语:Routing protocol): 是一种指定数据包转送方式的网上协议。Internet网络的主要节点设备是路由器,路由器通过路由表来转发接收到的数据。 路由协议,根据转发策略进行分类&#xff…

探索智慧文旅:科技如何提升游客体验

随着科技的迅猛发展,智慧文旅已成为旅游业的重要发展方向。通过运用先进的信息技术,智慧文旅不仅改变了传统旅游业的运营模式,更在提升游客体验方面取得了显著成效。本文将深入探讨科技如何助力智慧文旅提升游客体验。 一、智慧文旅的兴起与…

mybatisplus乐观锁

在实体类的字段上加上Version注解 Version private Integer version; 配置插件 ,spring boot 注解方式: Configuration MapperScan("com.dcqc.summarize.mapper") public class MybatisPlusConfig {/*** 旧版*/Beanpublic OptimisticLockerIntercepto…

Android开发学习-中级控件

Drawable Android把所有能够显示的图形都抽象为Drawable类(可绘制的)。 这里的图形不止是图片,还包括色块、画板、背景等。 包含图片在内的图形文件放在res目录的各个drawable目录下,其中drawable目录一般保存描述性的XML文件,而图片文件一…

MySQL原理(三)锁定机制(1)综述

一、介绍: 1、锁的本质 业务场景中存在共享资源,多个进程或线程需要竞争获取并处理共享资源,为了保证公平、可靠、结果正确等业务逻辑,要把并发执行的问题变为串行,串行时引入第三方锁当成谁有权限来操作共享资源的判…

idea/webstorm 创建Vue实例 Unresolved type Vue 处理方法

1.电脑本地安装node.js 官网下载 2. 其他: 未排除变量,前期试错(以下步骤配置了,但不确定对解决问题是否有帮助)

ubuntu下命令行安装指定版本的jdk,并在多jdk时指定默认版本

1、命令行安装指定版本的jdk: $ sudo apt update $ sudo apt install openjdk-xx-jdk #其中xx为指定的版本号码2、选择默认jdk版本 step1、打印当前系统中已安装jdk的相关信息 $ sudo update-alternatives --config java $ sudo update-alternatives --config …

Webpack的性能优化

减少构建时间:使用webpack的缓存功能,通过配置cache: true来利用缓存,减少重复构建时间。 使用多线程或并行构建,可以利用webpack的parallel-webpack或HappyPack插件来实现。 充分利用硬件资源,例如利用多核CPU或者SSD…

C# .Net Framework webapi 全局日志

1.创建一个类名字叫做CustomActionFilter.cs /// <summary>/// /// </summary>public class CustomActionFilter : System.Web.Http.Filters.ActionFilterAttribute{/// <summary>/// /// </summary>/// <param name"actionExecutedContext&q…