学习鸿蒙基础（3）

留白的云

已于 2024-04-10 10:56:25 修改

阅读量773

点赞数 3

文章标签：华为

于 2024-01-30 17:02:42 首次发布

本文链接：https://blog.csdn.net/huyawenz/article/details/135929736

版权

一、组件重用样式@Styles

如果每个组件的样式都需要单独设置，在开发过程中会出现大量代码在进行重复样式设置，虽然可以复制粘贴，但为了代码简洁性和后续方便维护，可以采用公共样式进行复用的装饰器@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 =90

  build() {
    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)

}

二、组件扩展样式@Extend

@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)
}

三、多态样式 .stateStyles

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

四、forEach 循环渲染

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

留白的云

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
0
评论
学习鸿蒙基础（3）

和@Styles不同，@Extend支持封装指定的组件的私有属性和私有事件和预定义相同组件的@Extend的方法。·和@Styles不同，@Extend装饰的方法支持参数，开发者可以在调用时传递参数，调用遵循TS方法传值调用·@Extend装饰的方法的参数可以为function，作为Event事件的句柄。如果每个组件的样式都需要单独设置，在开发过程中会出现大量代码在进行重复样式设置，虽然可以复制粘贴，但为了代码简洁性和后续方便维护，可以采用公共样式进行复用的装饰器@Styles。normal: 正常态。
复制链接

扫一扫