鸿蒙 ArkUI 基础表单与卡片组件实训博客

一、实训介绍

本次实训使用 ArkTS 开发界面，练习 Column、Row 布局，Text、TextInput、Button、Image 组件样式配置，实现基础布局、简约登录、注册表单、多按钮登录、个人信息卡片共五组页面。

二、案例 1：基础居中布局 TextInputDemo

代码

ets

@Entry @Component struct TextlnputDemo{ build() { Column({space:30}) .width('100%') .height('100%') .justifyContent(FlexAlign.Center) .alignItems(HorizontalAlign.Center) } }

说明

页面通用基础骨架，创建全屏垂直居中布局容器。

三、案例 2：简约美化登录表单 StyleDemo

代码

ets

@Entry @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

代码

ets

@Entry @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

代码

ets

@Entry @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

代码

ets

@Entry @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) } }

说明

卡片式个人信息页面，结合圆形头像、文字信息、功能按钮，使用嵌套布局实现卡片容器效果。

七、实训总结

本次案例练习了垂直、水平两种基础布局，掌握文本、输入框、按钮、图片组件基础样式美化，实现项目中常见的登录、注册表单以及个人信息卡片页面。