Harmony开发 eTs公共样式抽取

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

javascript 复制代码
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%' })
  }
}


相关推荐
生如夏花℡2 小时前
HarmonyOS学习记录4
学习·华为·harmonyos
xq95273 小时前
编程之路2025年中总结,勇往直前 再战江湖
harmonyos
枫叶丹43 小时前
【HarmonyOS Next之旅】DevEco Studio使用指南(四十二) -> 动态修改编译配置
华为·harmonyos·deveco studio·harmonyos next
前端世界15 小时前
鸿蒙UI开发全解:JS与Java双引擎实战指南
javascript·ui·harmonyos
阿巴~阿巴~17 小时前
操作系统核心技术剖析:从Android驱动模型到鸿蒙微内核的国产化实践
android·华为·harmonyos
iMerryou18 小时前
鸿蒙的动态渐变背景实现
harmonyos
Keya1 天前
在HarmonyOS(鸿蒙)中H5页面中的视频不会自动播放
app·harmonyos·arkts
HMS Core1 天前
用AI重塑游戏体验:《诛仙2》携手HarmonyOS SDK实现性能与功耗双赢
人工智能·游戏·harmonyos
儿歌八万首1 天前
HarmonyOS中各种动画的使用介绍
华为·harmonyos·arkts·arkui
dilvx1 天前
配置鸿蒙 fastboot
华为·harmonyos