#星计划#一步一步用鸿蒙开发一个登录页面 原创

作者：微笑的向日葵

团队：坚果派
公众号：“大前端之旅”
润开鸿生态技术专家，华为HDE，CSDN博客专家，CSDN超级个体，CSDN特邀嘉宾，InfoQ签约作者，OpenHarmony布道师，电子发烧友专家博客，51CTO博客专家，擅长HarmonyOS/OpenHarmony应用开发、熟悉服务卡片开发。欢迎合作。

前言

凡天下事，预则立，不预则废。
关于鸿蒙开发学与不学的争论，在网上铺天盖地，争论得不亦乐乎。笔者认为，鸿蒙作为一个优秀的国产系统，我们应该理性思考，与其在犹豫中徘徊，不如先静下心来一步一步学起来，剩下的交给时间，撸起袖子，干就完了！

本次我们使用鸿蒙的ArkTS语言一步一步的开发一个登录页面

登录页面

我们将该布局分析一下

注册按钮位于整个页面的右上方，登录区域位于页面的中间，我们可以使用Column布局将注册按钮和登录块进行纵向布局，不过有个问题，这样的话，我们不好保证登录块是位于页面的正中间的，当然业务要求不严格的话，我们可以这么做，但是我们现在处于学习阶段，尽量按照精确的方式来布局，这里我们使Stack布局。

Stack：堆叠容器，也可以说是相对布局.
我们将Stack的宽和高设置成100%，即全屏。设置Stack的子组件排版方式是Alignment.TopEnd（右上角的意思）

这样我们就让注册按钮显示在右上角了，然后我设置注册按钮玉屏幕有一定的边距。

接着我们画登录块的内容，登录块的内容整体是一个纵向的布局，账号、密码行是一个横向布局

一定不要忘记，将登录块的宽高设置成全屏，然后将登录块的子控件排布方式设置成纵向居中。

 .width('100%')
      .height('100%')
      .justifyContent(FlexAlign.Center)

整体的代码如下所示：

build() {
    Stack({ alignContent: Alignment.TopEnd }) {
      Text('注册').margin(20)
      Column() {
        Image($r('app.media.study')).height(100).margin(20)
        Row() {
          Text('账号：')
          TextInput({ placeholder: '请输入账号' })
            .width('80%')
            .height(40)
            .maxLength(9)
        }.margin({ left: 10, right: 10 })
        Row() {
          Text('密码：')
          TextInput({ placeholder: '请输入密码' })
            .width('80%')
            .height(40)
            .type(InputType.Password)
            .maxLength(9)
            .showPasswordIcon(true)
        }.margin(10)
        Button('登录').padding({ left: 20, right: 20 }).onClick(()=>{
          console.log('Login--','登录')
        })
      }
      .width('100%')
      .height('100%')
      .justifyContent(FlexAlign.Center)
    }.width('100%').height('100%')
  }
}

最后总结：

本章主要介绍了登录页面的绘制方法。
说一下开发体验：1.开发工具还挺流程的；2.ArkTS语言有点类似于flutter和js的特点，上手很快，很利于快速学习。
希望对同学的工作和学习有所帮助，如果你觉得文章写得还不错，麻烦点赞、关注和转发，谢谢。