HarmonyOS第一个页面-登陆页

前言:

展示效果图:

1. 首先创建一个新的项目:myTrain(项目名字,这个地方随便你叫!) 创建

   ---pages(父目录)
   ----common(pages子目录)
   ----login(pages子目录)
   ------pages(login子目录)
   ------store(login子目录)
   ------utils(login子目录)
   ------view(login子目录)
   

   目录结构图如下:(可以完全不需要按照我的目录结构来,我是个人习惯如此)

2.创建login页面,在/login/pages/

3.正式开始写代码了

//账户
@State userName: string = "";
//密码
@State password: string = "";
//输入框控制类
controller: TextInputController = new TextInputController()

build() {
//定义个列布局容器,
Column(){
  //内容布局列 space:列布局间隔
  Column({ space: 10 }){
      
  }
  //定义内容列的样式
  .width(TrainConstant.WIDTH).height(400)
}
//定义高度
.height(TrainConstant.HEIGHT)
//定义宽度
.width(TrainConstant.WIDTH)
//背景色渐变
.linearGradient({
//渐变方向
direction: GradientDirection.LeftTop,
//渐变规则
colors: [["#fff8f8e4", 2], ["#ffddddb8", 0.2]]
})
//内容布局方式(局中)
.justifyContent(FlexAlign.Center)
}

4.到这个步骤,登陆页面的框架就搭建好了, 开始补充里边的内容啦;

Column({ space: 10 }) {
  //logo
  Text("LOGO")
  //字体的大小
  .fontSize("60")
  //字体的样式
  .fontStyle(FontStyle.Normal)
  .fontWeight(600)
  //用户名输入框
  TextInput({ text: $$this.userName, placeholder: "请输入账户名", controller: this.controller })
    .placeholderColor(Color.Gray)
    .width("90%")
    .height(50)
    .margin({ top: 60 })
  //密码输入框
  TextInput({ text: $$this.password, placeholder: "请输入密码", controller: this.controller })
    .placeholderColor(Color.Gray)
    .width("90%")
    .height(50)
    .type(InputType.Password)
    .margin({ top: 10 })
  //登陆按钮
  Button("登陆")
    .backgroundColor("#ffffe874")
    .fontColor("#ff4c3101")
    .fontSize(22)
    .width("88%")
    .height(50)
    .margin({ top: 30 })
    .onClick(() => {
      console.log("登陆事件触发!")

    })
  Row() {
    Text("忘记密码?")
      .fontSize(13)
      .fontColor(Color.Blue)
  }
  .margin({ top: 10, left: 30 })
  .alignSelf(ItemAlign.Start)
  .onClick(() => {
    // 忘记密码触发事件弹窗
    promptAction.showToast({
      message: "忘记了就别考了,滚滚滚 晦气的东西",
      duration: 250,
      bottom: 250
    })
  })
}

5.到这个地方我们登陆的页面实现完成了, 但是发现 上边和下边 分别有两个白条, 没法全屏覆盖;

6.设置沉浸式显示:(这个地方应该大概有三种实现方式, 我就用第二种,哪个页面沉浸哪个页面设置)

/** 生命周期函数 */
aboutToAppear(): void {
  window.getLastWindow(getContext()).then((window) => {
    window.setWindowLayoutFullScreen(false)
  })
}

哎,这才对嘛 这个才是我要的样式,好了到这里,登陆页面就大概实现了;

感谢大家赏脸,实在是献丑了,

哈哈哈哈 我写这个的目的,主要是锻炼一下我自己的文字总结能力,顺带写这个分享;