Harmony开发 eTs公共样式抽取

  Harmony系统开发使用eTs开发过程中对于样式相同且重复使用的样式可以抽取成公共样式循环利用，类似于android的style样式。

import router from '@ohos.router'
import cryptoFramework from '@ohos.security.cryptoFramework';
import prompt from '@system.prompt'
class LoginBean {
  phone: string;
  pwd: string;
  name: string;
}
//标题
@Extend(Text) function extendTitle() {
  .fontSize(22)
  .fontColor($r('app.color.primary_orange'))
  .maxLines(1)
  .fontWeight(FontWeight.Bold)
  .margin({ top: 10, bottom: 40 })
}
//底部文字
@Extend(Text) function extendRight() {
  .fontSize(20)
  .fontColor($r('app.color.white'))
  .maxLines(1)
  .fontWeight(FontWeight.Bold)
  .margin({ bottom: 40 })
}
//item布局
@Extend(Row) function extendItemLayout() {
  .margin({ top: 4, bottom: 4 })
  .padding({ top: 4, bottom: 10 })
  .border({
    width: { bottom: 1 },
    color: { bottom: $r('app.color.primary_line') },
    // radius: { bottomRight: 80 },
    style: {
      bottom: BorderStyle.Solid
    } })
}

@Extend(Image) function extendItemImg() {
  .objectFit(ImageFit.Contain)
  .width(30)
  .height(30)
}

@Extend(TextInput) function extendItemInput(type) {
  .width('80%')
  .fontSize(15)
  .type(type)
  .placeholderFont({ size: 15 })
  .placeholderColor($r('app.color.primary_gray'))
  .caretColor($r('app.color.primary_green'))
  .backgroundColor(Color.White)
}
// 字节流以16进制输出
function uint8ArrayToShowStr(uint8Array) {
  return Array.prototype.map
    .call(uint8Array, (x) => ('00' + x.toString(16)).slice(-2))
    .join('');
}

function testGenerateAesKey() {
  // 创建对称密钥生成器
  let symKeyGenerator = cryptoFramework.createSymKeyGenerator('AES256');
  // 通过密钥生成器随机生成对称密钥
  let promiseSymKey = symKeyGenerator.generateSymKey();
  promiseSymKey.then(key => {
    // 获取对称密钥的二进制数据，输出长度为256bit的字节流
    let encodedKey = key.getEncoded();
    console.log("213==uint8ArrayToShowStr："
    + uint8ArrayToShowStr(encodedKey.data));
  })
}

@Entry
@Component
struct Login {
  @State loginBean: LoginBean = new LoginBean();

  private loginClick() {
    console.log("213==phone：" + this.loginBean.phone)
    console.log("213==pwd：" + this.loginBean.pwd)
    testGenerateAesKey()
    if (!this.loginBean.phone) {
      prompt.showToast({
        message: '请输入手机号'
      })
      return
    } else if (!this.loginBean.pwd) {
      prompt.showToast({
        message: '请输入密码'
      })
      return
    }
    // router.pushUrl({
    //   url: 'pages/Main'
    // }, router.RouterMode.Standard,
    //   (err) => {
    //   });
  }

  build() {
    Column() {
      Column() {
        Image($r('app.media.icon_app_label'))
          .objectFit(ImageFit.Contain)
          .width(60)
          .height(60)
        Text($r('app.string.app_name'))
          .extendTitle()
      }
      .width('100%')
      .height(0)
      .layoutWeight(1)
      .alignItems(HorizontalAlign.Center)
      .justifyContent(FlexAlign.End)
      Column() {
        //手机号
        Row() {
          Image($r('app.media.icon_login_phone'))
            .objectFit(ImageFit.Contain)
            .width(30)
            .height(30)
          TextInput({ placeholder: '请输入手机号', text: 'xcxxcc1' })
            .extendItemInput(InputType.Normal)
            .onChange((value: string) => {
              this.loginBean.phone = value
            })
        }.extendItemLayout()
        //密码
        Row() {
          Image($r('app.media.icon_login_pwd'))
            .extendItemImg()
          TextInput({ placeholder: '请输入密码', text: ';lywg@2023' })
            .extendItemInput(InputType.Password)
            .placeholderFont({ size: 14, weight: 400 })
            .onChange((value: string) => {
              this.loginBean.pwd = value
            })
        }.extendItemLayout()

        Row() {
          //登陆按钮
          Text('登录')
            .backgroundColor($r("app.color.primary_green"))
            .fontSize(18)
            .fontColor($r("app.color.white"))
            .borderRadius(8)
            .margin({ top: 30 })
            .padding({ top: 5, bottom: 5, left: 40, right: 40 })
            .onClick(this.loginClick.bind(this))
          // .onClick(() => {})
        }
      }
      .borderRadius(10)
      .margin({ left: 20, right: 20 })
      .padding({ top: 20, bottom: 20, left: 20, right: 20 })
      .backgroundColor($r('app.color.white'))

      Column() {
        Text('深化治理建设  打造数字山东')
          .extendRight()
      }
      .width('100%')
      .height(0)
      .layoutWeight(1)
      .alignItems(HorizontalAlign.Center)
      .justifyContent(FlexAlign.End)
    }
    .width('100%')
    .height('100%')
    .backgroundImage($r('app.media.login_bg'))
    .backgroundImageSize({ width: '100%', height: '100%' })
  }
}