HarmonyOS NEXT鸿蒙开发ArkUI：案例-实现登录界面-马育民老师

# 实现效果

[![](https://www.malaoshi.top/upload/0/0/1GW25dhhC6g1.png)](https://www.malaoshi.top/upload/0/0/1GW25dhhC6g1.png)

# 代码

```
@Entry
@Component
struct Index {

build() {
    // 列示布局
    Column(){

Text("登录")
        .fontSize(30) // 设置字体大小30fp
        .margin({
          bottom:50 // 设置下外边距50vp
        })
      // .border({
      //   width:1,
      //   color:Color.Red
      // })
      Row(){
        Text("用户名：") // 显示文本
        TextInput()
          .width("70%")// 设置宽度
      }
      .margin({
        bottom:20 // 设置下外边距20vp
      })
      Row(){
        Text("密    码：")
        TextInput()
          .type(InputType.Password)
          .width("70%")// 设置宽度
      }
      .margin({
        bottom:20 // 设置下外边距20vp
      })

Row(){
        Button("  登  录  ")
        Button("  注  册  ")
          .margin({
            left:20 // 设置左外边距20vp
          })
      }
      // .width("100%")
      // .justifyContent(FlexAlign.Center)
      // .border({// 给组件设置边框
      //   width:1,
      //   color:Color.Red
      // })
    }
    // .border({
    //   width:1,
    //   color:Color.Red
    // })
    .width("100%")
    .height("100%")
    // 水平居中
    .alignItems(  HorizontalAlign.Center)
    // 垂直居中
    .justifyContent(FlexAlign.Center)
  }
}
```

原文出处：http://www.malaoshi.top/show_1GW25c4ah1p0.html