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


相关推荐
别说我什么都不会13 小时前
ohos.net.http请求HttpResponse header中set-ccokie值被转成array类型
网络协议·harmonyos
码是生活13 小时前
鸿蒙开发排坑:解决 resourceManager.getRawFileContent() 获取文件内容为空问题
前端·harmonyos
鸿蒙场景化示例代码技术工程师13 小时前
基于Canvas实现选座功能鸿蒙示例代码
华为·harmonyos
小脑斧爱吃鱼鱼14 小时前
鸿蒙项目笔记(1)
笔记·学习·harmonyos
鸿蒙布道师15 小时前
鸿蒙NEXT开发对象工具类(TS)
android·ios·华为·harmonyos·arkts·鸿蒙系统·huawei
zhang10620915 小时前
HarmonyOS 基础组件和基础布局的介绍
harmonyos·基础组件·基础布局
马剑威(威哥爱编程)15 小时前
在HarmonyOS NEXT 开发中,如何指定一个号码,拉起系统拨号页面
华为·harmonyos·arkts
GeniuswongAir16 小时前
Flutter极速接入IM聊天功能并支持鸿蒙
flutter·华为·harmonyos
90后的晨仔20 小时前
鸿蒙ArkUI框架中的状态管理
harmonyos
别说我什么都不会1 天前
OpenHarmony 5.0(API 12)关系型数据库relationalStore 新增本地数据变化监听接口介绍
api·harmonyos