2025-06-29

@Local 描述的才能修改

@Extend 抽离css

@otherData 循环数据

@Builder 自定义函数

import App from '@system.app';

@Entry
@ComponentV2
struct Index {
  @Local message: string = 'Hello222 World';
  //
  private otherData:Array<ResourceStr> = [
    $r('app.media.ic_menu'),
    $r('app.media.ic_menu'),
    $r('app.media.ic_menu'),
  ]
  build() {
   Column(){
     Image($r('app.media.ic_brand'))
       .width('100%')
     Column(){
       this.myInput() // 自定义函数引入
       // TextInput({placeholder:'请输入账号'})
       //   .type(InputType.Normal)
       //   .myInputStyle(5)
       // TextInput({placeholder:'请输入密码'})
       //   .type(InputType.Password)
       //   .placeholderColor(Color.Gray)
       //   .myInputStyle(10)
     }
     Row(){
       Text('短信验证码登录').fontSize('20fp')
       Text('忘记密码').fontSize('20fp')
     }
     .width('100%')
     .justifyContent(FlexAlign.SpaceAround)
     .margin('20vp')

     Button('登录')
       .backgroundColor(Color.Orange)
       .padding('15vp')
       .width('90%')
       .margin({bottom:'20vp'})
       .onClick(()=>{
         console.log('ok')
       })

   //   第三方登录
     Column(){
       Text('第三方登录')
         .fontSize('20fp')
         .fontColor(Color.Gray)
       Row(){
         // 循环
         ForEach(this.otherData,(item:ResourceStr,index?:number)=>{
           Image(item)
             .width('50vp')
             .height('50vp')
         })
         // Image($r('app.media.ic_menu'))
         //   .width('50vp')
         //   .height('50vp')
         // Image($r('app.media.ic_menu'))
         //   .width('50vp')
         //   .height('50vp')
         // Image($r('app.media.ic_menu'))
         //   .width('50vp')
         //   .height('50vp')
       }.width('90%')
       .margin({top:'20vp'})
       .justifyContent(FlexAlign.SpaceEvenly)
     }
   }
  }
  @Builder
  myInput(){
    TextInput({placeholder:'请输入账号'})
      .type(InputType.Normal)
      .myInputStyle(5)
    TextInput({placeholder:'请输入密码'})
      .type(InputType.Password)
      .placeholderColor(Color.Gray)
      .myInputStyle(10)
  }
}


// 自定义构建函数


//公共函数库(样式抽离) @Extend
@Extend(TextInput) function myInputStyle(length?:number){
  .placeholderColor(Color.Gray)
  .margin('10vp')
  .padding('10vp')
  .textIndent('10vp')
  .maxLength(length)
}