OpenHarmony/HarmonyOS中用ArkTS实现登陆界面_arkts写一个注册页

OpenHarmony/HarmonyOS中用ArkTS实现登陆界面

作者：坚果
团队：坚果派
公众号：“大前端之旅”
润开鸿技术专家，华为HDE，InfoQ签约作者，OpenHarmony布道师，擅长HarmonyOS应用开发、熟悉服务卡片开发，在“战码先锋”活动中作为大队长，累计培养三个小队长，带领100+队员完成Pr的提交合入。
欢迎通过主页或者私信联系我，加入坚果派，一起学习OpenHarmony/HarmonyOS应用开发。

主要用到的组件有

基础组件：Text，divider，TextInput，Image

容器组件：Row，Column

属性方法：width，height

事件：onclick

效果展示

源码

import router from '@ohos.router'
import prompt from '@ohos.prompt'
import promptAction from '@ohos.promptAction'

@Entry
@Component
struct LoginPage {
  @State password: string = ''
  @State username: string = ''

  build() {

    Column() {
      Text("登陆")
        .fontSize(50)
        .fontWeight(FontWeight.Bold).margin({
        bottom: 60
      })
      Row() {
        Text("用户名")
          .fontSize(18)
          .fontWeight(FontWeight.Bold)
      }.width("100%")

      Row() {
        Image($r("app.media.icon")).width(30)

        TextInput({
          placeholder: "请输入用户名"
        }).width(200).onChange((val: string) => {
          this.username = val


        })
      }.margin({
        bottom: 8,
        top: 8
      }).width("100%")

      Divider().strokeWidth(4)

      Row() {
        Text("密码")
          .fontSize(18)
          .fontWeight(FontWeight.Bold).margin({
          bottom: 8,
          top: 8
        })
      }.width("100%")

      Row() {
        Image($r("app.media.icon")).width(30)

        TextInput({
          placeholder: "请输入密码"
        }).width(200).onChange((val: string) => {
          this.password = val


        }).type(InputType.Password)
      }.width("100%")

      Divider().strokeWidth(4)
      Row() {
        Blank()
        Text("忘记密码？")
          .fontSize(18)
          .fontWeight(FontWeight.Bold)
      }.width("100%")

      Button("登陆").width("90%").height(60).backgroundColor(Color.Orange).onClick(() => {

        if (this.username == "admin" && this.password == "admin") {

          router.pushUrl({
            url: "pages/MainPage"
          })
        }
        else {
          promptAction.showToast({
            message:"密码或用户名错误，请重新输入"
          })
        }
      })

      Text("第三方登陆")
        .fontSize(18).margin({
        bottom: 40,
        top: 60
      })

      Row({ space: 8 }) {
        Image($r("app.media.icon")).width(60)
        Image($r("app.media.icon")).width(60)
        Image($r("app.media.icon")).width(60)

      }

      Text("立即注册")
        .fontSize(18).margin({
        top: 20,
      })

    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
    .padding({
      left: 20,
      right: 20
    })
  }
}
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