HarmonyOS 开发基础（二）组件拼凑简单登录页面

一、简单登录页面

@Entry
@Component
/*
组件可以基于struct实现，组件不能有继承关系，struct可以比class更加快速的创建和销毁。
 */
struct Index {
  @State message: string = 'Hello World'

  build() {
    // https://developer.harmonyos.com/cn/docs/documentation/doc-references-V3/ts-container-flex-0000001427902472-V3?catalogVersion=V3
    /* 对子组件的布局
    direction:FlexDirection.Column  子组件在Flex容器上排列的方向，即主轴的方向。 主轴与列方向一致作为布局模式。
    justifyContent:FlexAlign.Center 所有子组件在Flex容器主轴上的对齐格式。
    alignItems:ItemAlign.Center  所有子组件在Flex容器交叉轴上的对齐格式。
     */
    Flex({direction:FlexDirection.Column,
      justifyContent:FlexAlign.Center,
      alignItems:ItemAlign.Center}){
      Text("登录")
        .fontSize(40)
        .fontWeight(700)

      TextInput()
        .width("80%")
        .height(40)

      TextInput()
        .width("80%")
        .height(40)

      Button("进入app")

    }.width("100%")
     .height("100%")
     .border({width:15,color:"#000"})
  }
}

Preview 效果