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