鸿蒙 ArkUI 基础表单与卡片组件实训博客一、实训介绍本次实训使用 ArkTS 开发界面练习 Column、Row 布局Text、TextInput、Button、Image 组件样式配置实现基础布局、简约登录、注册表单、多按钮登录、个人信息卡片共五组页面。二、案例 1基础居中布局 TextInputDemo代码etsEntry Component struct TextlnputDemo{ build() { Column({space:30}) .width(100%) .height(100%) .justifyContent(FlexAlign.Center) .alignItems(HorizontalAlign.Center) } }说明页面通用基础骨架创建全屏垂直居中布局容器。三、案例 2简约美化登录表单 StyleDemo代码etsEntry Component struct StyleDemo{ build() { Column({space:20}){ TextInput({placeholder:请输入账号}) .width(320) .height(50) .backgroundColor(0xF8F8F8) .borderRadius(15) .padding({left:20}) TextInput({placeholder:请输入密码}) .width(320) .height(50) .backgroundColor(0xF8F8F8) .borderRadius(15) .padding({left:20}) Button(登录) .width(320) .height(50) .borderRadius(12) .backgroundColor(0x007dff) .fontSize(18) .fontColor(Color.White) } .width(100%) .height(100%) .justifyContent(FlexAlign.Center) .alignItems(HorizontalAlign.Center) .padding(20) } }说明简易登录表单对输入框、按钮做圆角、底色美化搭建简洁登录界面。四、案例 3用户注册页面 TextDemo代码etsEntry Component struct TextDemo { build() { Column({space:30}) { Text(用户注册) .fontSize(38) .fontWeight(FontWeight.Bolder) .margin({bottom:20}) TextInput({placeholder:请输入学号}) .width(320) .height(60) .backgroundColor(0xf5f5f5) .fontSize(20) .borderRadius(10) TextInput({placeholder:请输入密码}) .type(InputType.Password) .width(320) .height(60) .backgroundColor(0xf5f5f5) .fontSize(20) .borderRadius(10) TextInput({placeholder:请输入手机号码}) .width(320) .height(60) .backgroundColor(0xf5f5f5) .fontSize(20) .borderRadius(10) Button(注册) .height(50) .width(200) .fontSize(25) } .width(100%) .height(100%) .justifyContent(FlexAlign.Center) .alignItems(HorizontalAlign.Center) } }说明完整注册表单包含学号、密码、手机号三项输入使用密码密文输入模式搭配注册提交按钮。五、案例 4多按钮登录页面 ButtonDemo1代码etsEntry Component struct ButtonDemo1 { build() { Column({ space: 30 }) { Text(用户登录) .fontSize(38) .fontWeight(FontWeight.Bolder) .margin({ bottom: 20 }) TextInput({ placeholder: 请输入学号/手机号码 }) .width(320) .height(60) .backgroundColor(0xf5f5f5) .fontSize(40) .borderRadius(10) TextInput({ placeholder: 请输入密码 }) .type(InputType.Password) .width(320) .height(60) .backgroundColor(0xf5f5f5) .fontSize(40) .borderRadius(10) Button(确认) .width(300) .height(50) .backgroundColor(0x007DFF) .fontSize(20) .borderRadius(18) Row({ space: 25 }) { Button(取消操作) .width(140) .height(50) .backgroundColor(0x999999) .fontSize(20) .borderRadius(18) Button(立即注册) .width(140) .height(50) .backgroundColor(0xf53f3f) .fontSize(20) .borderRadius(18) } } .width(100%) .height(100%) .justifyContent(FlexAlign.Center) .alignItems(HorizontalAlign.Center) } }说明多功能按钮登录页通过 Row 横向排列取消、注册按钮使用不同颜色区分按钮功能。六、案例 5个人信息卡片 card代码etsEntry Component struct card { build() { Column({ space: 20 }) { Text(个人信息中心) .fontSize(22) .fontWeight(FontWeight.Bold) .width(100%) .textAlign(TextAlign.Center) .margin({ bottom: 20 }) Column({ space: 20 }) { Row({ space: 20 }) { Image($r(app.media.cover)) .width(80) .height(80) .borderRadius(40) Column({ space: 10 }) { Text(鸿蒙应用开发者张三) .fontSize(16) Text(计算机应用工程系) .fontSize(16) } } .width(100%) .justifyContent(FlexAlign.Start) .alignItems(VerticalAlign.Center) Row({ space: 15 }) { Button(编辑资料) .width(140) .height(40) .borderRadius(8) Button(查看详情) .width(140) .height(40) .borderRadius(8) } .width(100%) .justifyContent(FlexAlign.Center) } .width(100%) .padding(20) .backgroundColor(0xF0F0F0) .borderRadius(12) } .width(100%) .height(100%) .padding(15) .justifyContent(FlexAlign.Center) .alignItems(HorizontalAlign.Center) } }说明卡片式个人信息页面结合圆形头像、文字信息、功能按钮使用嵌套布局实现卡片容器效果。七、实训总结本次案例练习了垂直、水平两种基础布局掌握文本、输入框、按钮、图片组件基础样式美化实现项目中常见的登录、注册表单以及个人信息卡片页面。