鸿蒙5.0【OpenHarmony】制作登录界面

最新推荐文章于 2024-11-04 11:03:57 发布

鸿蒙系统小能手Mr.Li

最新推荐文章于 2024-11-04 11:03:57 发布

阅读量760

点赞数 9

分类专栏：鸿蒙开发文章标签： harmonyos 鸿蒙系统 OpenHarmony 鸿蒙程序员移动开发

本文链接：https://blog.csdn.net/2401_82772199/article/details/141572718

版权

鸿蒙开发专栏收录该内容

264 篇文章 5 订阅

订阅专栏

OpenHarmony制作登录界面

1. 新建一个page页‘Loginpage’

2. 定义username和password变量

3. 导入图片（可以去[阿里巴巴图标库]中下载图片）

3. 设置页面

import router from '@ohos.router'
import cert from '@ohos.security.cert'
@Entry
@Component
struct LoginPage {
  @State username:string=''
  @State password: string = ''

  build() {
    Column(){
      Column() {
        Text('登录').fontColor(Color.Black).fontSize(36).fontWeight(600).margin({
          bottom: 20
        })
        //space: 10 行间距
        Column({ space: 10 }){
          //用户名
          Text('用户名')
            .fontWeight(FontWeight.Bold)
            .margin({ bottom: 10 })
          Row() {
            Image($r("app.media.user")).width(20).margin({
              right: 20
            })
            TextInput({
              placeholder: "请输入用户名",
              text: this.username
            }).width("60%").onChange((val: string) => {
              this.username = val
            }).backgroundColor(Color.White)
          }.margin({
            bottom: 10
          })
          Divider().width("80%")

          //密码
          Text("密码")
            .fontWeight(FontWeight.Bold)
            .margin({ bottom: 10 })
          Row() {
            Image($r("app.media.password")).width(20).margin({
              right: 20
            })
            TextInput({
              placeholder: "请输入密码",
              text: this.password
            }).type(InputType.Password).width("60%").onChange((val: string) => {
              this.password = val
            }).backgroundColor(Color.White)
          }.margin({ bottom: 10 })
        }.alignItems(HorizontalAlign.Start)
        Divider().width("80%")
        //忘记密码
        Row() {
          Blank()
          Text("忘记密码？").margin({
            top: 10,
            bottom:10,
            right:-40
          })
        }.width("60%")
        Row(){
          // .textAlign(Center)
          Text("                       登录")
            .borderRadius(25)
            .width('90%').height(38).linearGradient({
            direction: GradientDirection.Left,
            angle: 90,
            colors: [[0xFF2AF1F1, 0.0], [0x0000ff, 0.5], [0xFFF127A2, 1.0]]
          }).margin({
            bottom: 40,
          }).fontColor(Color.White).fontSize(20)
          //   .onClick(() => {
          //   if (this.username=="admin"&& this.password=="123456") {
          //     router.pushUrl({
          //       url: "pages/MainPage",
          //     })
          //   }else {
          //
          //   }
          //
          // })
        }
        // Button("登录").width(300).linearGradient({
        //   direction: GradientDirection.Left,
        //   angle: 90,
        //   colors: [[0xFF2AF1F1, 0.0], [0x0000ff, 0.5], [0xFFF127A2, 1.0]]
        // }).margin({
        //   bottom: 40
        // })
        Text("第三方登录").margin({
          // top: 10,
          bottom:20
        })
        Row({ space: 10 }) {
          Image($r("app.media.QQ")).width(20)
          Image($r("app.media.zfb")).width(20)
          Image($r("app.media.weixin")).width(20)
        }
        Text("立即注册").margin({
          top: 20
        })


      }
      .width("90%")
      .height("75%")
      .alignItems(HorizontalAlign.Center)
      .justifyContent(FlexAlign.Center)
      .margin({
        left: 20,
        right: 20,
        bottom: 100,
        top: 100
      }).backgroundColor(Color.White).borderRadius(10)
    }.linearGradient({
      direction: GradientDirection.Left,
      angle: 90,
      colors: [[0xFF2AF1F1, 0.0], [0x0000ff, 0.3], [0xFFF127A2, 1.0]]
    })
  }
}

4. 示例图片

最后呢，很多开发朋友不知道需要学习那些鸿蒙技术？鸿蒙开发岗位需要掌握那些核心技术点？为此鸿蒙的开发学习必须要系统性的进行。

而网上有关鸿蒙的开发资料非常的少，假如你想学好鸿蒙的应用开发与系统底层开发。你可以参考这份资料，少走很多弯路，节省没必要的麻烦。由两位前阿里高级研发工程师联合打造的《鸿蒙NEXT星河版OpenHarmony开发文档》里面内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（Harmony NEXT）技术知识点

如果你是一名Android、Java、前端等等开发人员，想要转入鸿蒙方向发展。可以直接领取这份资料辅助你的学习。下面是鸿蒙开发的学习路线图。