经过这几天的了解，我还是决定挑战一下自己用ets语言去写一个鸿蒙的程序！

        先创建了一个ets的项目，然后我发现这里面有一个组件叫Flex，跟css里面的弹性布局好像差不多，但是用法略有差异，这个Flex是在（）里面加一个{}，然后去写参数，想设置最熟悉的居中，那就得用下面这行代码，这个就和css有所不同了

direction:FlexDirection.Column,justifyContent:FlexAlign.Center,alignItems:ItemAlign.Center

        接着我又学习了Text文本框！这个无非也就是字体颜色，字体大小，字体加粗等一些操作，css的时候都学过，但还是有些差距的，在这里面用的是链式编程！

Text("登录").fontSize(20).fontColor(Color.Red);

        写了一个登录的页面，然后发现账号密码输入都需要用TextInput去写，这个就涉及到组件的封装了！首先定义一个组件记得一定要写@Component和struct，然后跟上组件名字，里面写一个build方法！封装一个输入操作！

@Component
struct LoginInput{
  build(){
    TextInput({placeholder:"请输入账号"}).margin({top:15}).fontColor(Color.Black)
  }
}

 我们写完以上的步骤发现他都是输入账号，但是我想上面那个是输入账号，下面那个输入密码，怎么办？我们创建一个变量，利用变量来传值！把父控件的值传到子控件来显示！

 

  既然涉及到父控件给子控件传参那么就离不开父控件和子控件的数据双向绑定！

Link：定义变量，变量的值必须从父控件获取  与父控件的值双向绑定

State：修饰变量（接口），值改变 驱动界面调用build方法 类似Flutter(状态驱动界面)

Prop：定义变量 变量值必须从父控件获取 这个装饰器 绑定的属性 只是单向的

双向绑定，首先要理解要用哪个来修饰变量，那肯定是State和Link，想要实现总共分为以下几步

（1）在子控件里面用Link定义变量，注意Link修饰的变量不能初始化

（2）在父控件里面用State定义变量

（3）在LoginInput子组件中的TextInput中写text方法，将刚定义的Link值赋值到text中

（4）在子控件中的.onChange（输入值改变触发）方法中，要将value的值赋值给inputValue

（5）在父控件使用子控件LoginInput时需要传两个参数，一个是inputPlaceholder，还有一个时text，但是这个text要赋值父控件中state修饰的值，然后用$去赋值！

//Entry 装饰器 代表页面的入口控件
//Component 装饰器 代表这是一个控件(一个组件)
//struct 用于标识 组件
import prompt from '@system.prompt';

@Entry
@Component
struct LoginPage {
  @State inputUserName:string="2131"
  @State inputPassword:string="2131"
  build() {
    Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
      Text("登录")
        .fontSize(20)
        .fontColor(Color.Red);

      Text(this.inputUserName)
        .fontSize(20)
        .fontColor(Color.Red)
      LoginInput({ inputPlaceholder: "请输入账号" ,inputValue:$inputUserName,labelName:"账号"})
      LoginInput({ inputPlaceholder: "请输入密码" ,inputValue:$inputPassword,labelName:"密码"})
      //        TextInput({placeholder:"请输入账号"}).margin({top:15}).fontColor(Color.Black)
      //        TextInput({placeholder:"请输入密码"}).margin({top:15})
      //        TextInput({placeholder:"请输入年龄"}).margin({top:15})
      Button("登录")
        .width("100%")
        .margin({ top: 16 })
        .onClick(()=>{
          this.inputUserName="登录"
          this.inputPassword="密码"
        })
    }

  }
}
//自己封装的 输入框控件
@Component
struct LoginInput {
  //创建变量(接口)来传值
  private inputPlaceholder: string = "请输入账号"

  //不允许本地初始化
  @Link inputValue: string
  //不允许本地初始化
  @Prop labelName:string
  build() {

    Row(){
      Text(this.labelName)
        .fontSize(20)
        .fontColor(Color.Black)
        .margin({ top: 15 })

      TextInput({ placeholder: this.inputPlaceholder,
        text:this.inputValue
      })
        .margin({ top: 15 })
        .fontColor(Color.Black)
        .onChange((value) => {
          console.log(value);
          this.inputValue=value
          prompt.showToast({ message: value })
        })
    }

  }
}

登陆基本上就写完了，还缺一个登录校验！空间动态添加，如果输入的账号在5-8位之间那么我们不提示！如果不在5-8位，做一个提示！

     if(this.inputUserName.length<5 || this.inputUserName.length>8){
        Text("账号必须5-8位")
          .fontSize(20)
          .fontColor(Color.Red)
      }

接着我们今天要做的最后一步就是页面跳转，点击登录跳转到主页！引入路由，然后在按钮上绑定onclick事件，点击跳转即可

import router from '@ohos.router';

 Button("登录")
        .width("100%")
        .margin({ top: 16 })
        .onClick(()=>{
          router.push({
            url:"pages/HomePage"
          })
        })
    }

今天就先写到这里，希望大家可以多多交流~