北京东站,设计网名的花样符号,如何编写手机程序,设计方案图1.组件重用样式 如果每个组件的样式都需要单独设置#xff0c;在开发过程中会出现大量代码在进行重复样式设置#xff0c;虽然可以复制粘贴#xff0c;但为了代码简洁性和后续方便维护#xff0c;可以采用公共样式进行复用的装饰器Styles。 Styles装饰器可以将多条样式设置…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.usernamevalue} })text({ title:密码,valueStr:this.password,cb:(value:string){this.passwordvalue} })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.widths180}
}
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)},itemJSON.stringify(item))//用这个去作为唯一的key// List组件配合 ForEach超出屏幕可以滚动List(){ForEach(this.list1,(item1:Object){ListItem(){Text(item1[name]).fontSize(26).margin(10)}},itemJSON.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%)}
}
