郑州网站技术顾问企业咨询图片

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%')}
}