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


相关推荐
周胡杰12 分钟前
鸿蒙加载预置数据库-关系型数据库-如何读取本地/预制数据库
数据库·华为·harmonyos·鸿蒙
迷曳10 小时前
27、鸿蒙Harmony Next开发:ArkTS并发(Promise和async/await和多线程并发TaskPool和Worker的使用)
前端·华为·多线程·harmonyos
迷曳15 小时前
24、鸿蒙Harmony Next开发:不依赖UI组件的全局自定义弹出框 (openCustomDialog)
dialog·前端·ui·harmonyos·鸿蒙
平谷一勺21 小时前
鸿蒙状态栏操作
华为·harmonyos·沉浸式状态栏
Georgewu2 天前
【HarmonyOS组件/模板集成创新活动-如何高效开发鸿蒙应用 (鸿社圈子)】
harmonyos
前端世界2 天前
跨平台 App 如何无痛迁移到鸿蒙系统?全流程实战+Demo 教程
华为·harmonyos
龙儿筝2 天前
鸿蒙和Android知识点
android·harmonyos
迷曳2 天前
17、鸿蒙Harmony Next开发:状态管理(组件拥有的状态和应用拥有的状态)
前端·harmonyos·鸿蒙
zhanshuo2 天前
不同品牌的设备也能“心有灵犀”?带你玩转鸿蒙分布式跨端协同
harmonyos
万少3 天前
云测试提前定位和解决问题 萤火故事屋 上架流程
前端·harmonyos·客户端