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%' })
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173