HarmonyOS NEXT鸿蒙开发ArkUI:案例-实现登录界面 作者:马育民 • 2025-10-22 22:32 • 阅读:10000 # 实现效果 [](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