鸿蒙 ArkUI 基础组件实战教程｜Text / 输入框 / 按钮 / 图片 由浅入深完整练习
前言
不管做学生管理系统还是普通 APP，页面都是由文本、输入框、按钮、图片这四类基础组件组合而成。本文按纯文本→简单注册表单→多风格按钮登录页→高多行输入表单→图文完整登录页的难度递进，所有代码可直接复制运行，适合只有少量鸿蒙基础的新手循序渐进练习。
一、入门：Text 文本组件 TextDemo.ets
运行结果描述
页面垂直摆放两段文字，文字为红色、中等粗细，带有浅绿色底色，文字在自身区域水平居中；第一段是直接写死的文字 “你好！”，第二段读取项目内置字符串资源展示内容。
完整代码
@Entry
@Component
struct TextDemo{
build() {
Column(){
Text('你好！')
.fontSize(30)
.fontColor(Color.Red)
.fontWeight(FontWeight.Medium)
//.margin({top:20})
.backgroundColor(0xaaddcc)
//.padding({bottom:60})
.textAlign(TextAlign.Center)
.width('100%')
Text($r('app.string.module_desc'))
.fontSize(30)
.fontColor(Color.Red)
.fontWeight(FontWeight.Medium)
//.margin({top:20})
.backgroundColor(0xaaddcc)
//.padding({bottom:60})
.textAlign(TextAlign.Center) //textA
.width('100%')
}
.width('100%')
.height('100%')
}
}
核心知识点（新手必记）
-
基础文字样式属性：fontSize控制字体大小、fontColor控制字体颜色、fontWeight控制字体粗细，是文本组件最常用的三个属性。
-
文字居中踩坑点：textAlign文本居中必须搭配
width('100%')生效，仅设置居中不设置宽度，文字无法居中。 -
资源读取优势：
$r('app.string.xxx')读取项目本地字符串资源，统一管理文字内容，方便后期批量修改和多语言适配，是项目开发规范写法。
二、基础表单：注册页面 TextInputDemo
运行结果描述
页面整体垂直居中，从上到下依次展示 “用户注册” 大标题、手机号输入框、密码输入框、确认密码输入框，最下方是注册按钮；输入框统一浅灰色圆角样式，组件之间间距均匀。
完整代码
@Entry
@Component
struct TextInputDemo{
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:"请确认密码"})
.type(InputType.Password)
.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)
}
}
关键知识点
-
placeholder占位文字：输入框空白状态下的灰色提示文字，用于引导用户输入内容，是表单必备属性。
-
密码隐藏模式：
type(InputType.Password)开启密码加密模式，输入内容自动隐藏，保护用户隐私。 -
圆角美化：borderRadius 设置输入框圆角，摒弃直角生硬样式，适配移动端UI审美。
-
页面居中布局：外层 Column 通过 justifyContent、alignItems 实现整体居中，解决组件置顶拥挤问题。
三、多风格按钮综合 ButtonDemo1（登录页面）
学习目标
掌握主提交按钮、灰色取消按钮、红色跳转按钮，同行多按钮 Row 排布
运行结果描述
页面垂直居中展示登录表单：账号、密码输入框下方有蓝色 “确认” 提交按钮；底部一行左右分布灰色取消按钮、红色注册按钮，三个按钮圆角尺寸区分，适配不同业务操作。
完整代码
@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(20)
.borderRadius(10)
TextInput({placeholder:"请输入密码"})
.type(InputType.Password)
.width(320)
.height(60)
.backgroundColor(0xf5f5f5)
.fontSize(20)
.borderRadius(10)
//常见的，用于登录，提交的按钮
Button("确认")
.width(300)
.height(50)
.backgroundColor(0x007DFF)
.fontSize(20)
.borderRadius(8)
Row({space:25}){
//灰色按钮，用于取消/返回使用
Button('取消')
.width(140)
.height(50)
.backgroundColor(0x999999)
.fontSize(20)
.borderRadius(18)
// .enabled(false)
Button("立即注册")
.width(140)
.height(50)
.backgroundColor(0xf53f3f)
.fontSize(20)
.borderRadius(18)
}
}
.height('100%')
.width('100%')
.justifyContent(FlexAlign.Center)
.alignItems(HorizontalAlign.Center)
}
}
四、中级表单：高尺寸多行输入框 TextInputDemo2
运行结果描述
页面居中展示完善资料页面，标题下方排列三个加高的浅灰色圆角输入框，分别填写姓名、班级、联系方式，输入框高度更大，视觉留白充足，适合填写较长文本。
完整代码
@Entry
@Component
struct TextInputDemo2{
build() {
Column({space:30}){
Text('完善个人信息')
.fontSize(30)
.fontWeight(FontWeight.Bold)
.margin({bottom:30})
TextInput({placeholder:"请输入真实姓名："})
.width(320)
.height(80)
.backgroundColor(0xf8f8f8)
.borderRadius(15)
TextInput({placeholder:"请输入所在班级："})
.width(320)
.height(80)
.backgroundColor(0xf8f8f8)
.borderRadius(15)
TextInput({placeholder:"请输入联系方式："})
.width(320)
.height(80)
.backgroundColor(0xf8f8f8)
.borderRadius(15)
}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.Center)
.alignItems(HorizontalAlign.Center)
}
}
适用场景
学生信息档案、收货地址、个人简介等长文本录入页面。
五、综合实战：图文整合登录页 ImageDemo1
运行结果描述
页面垂直居中，从上至下依次展示圆形裁切头像图片、登录标题、用户名输入框、密码输入框；底部横向并排两个蓝色按钮，分别为登录、清空，是项目中复用率最高的登录页面模板。
完整代码
@Entry
@Component
struct ImageDemo1 {
build() {
Column({ space: 25 }) {
Image($r('app.media.banner0'))
.width(120)
.height(120)
.objectFit(ImageFit.Cover)
.borderRadius(75)
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)
Row({space:30}){
//常见的，用于登录，提交的按钮
Button("登录")
.width(150)
.height(50)
.backgroundColor(0x007DFF)
.fontSize(15)
.borderRadius(8)
Button("清空")
.width(150)
.height(50)
.backgroundColor(0x007DFF)
.fontSize(20)
.borderRadius(8)
}
}
.width('100%')
.height('100%')
}
}
Image 核心属性讲解
-
$r('app.media.xxx')：读取本地图片资源，是项目标准写法。 -
圆形头像原理：圆角设置为宽高一半，实现圆形裁切。
-
objectFit.Cover：防止图片拉伸变形，自动裁切适配容器。
-
结合 Column、Row 实现图文混合布局，掌握完整页面组件组合能力。
新手高频踩坑总结
-
Text 文字居中必须设置百分百宽度，否则不生效。
-
密码框必须添加 Password 模式，否则明文显示。
-
图片圆形裁切需要圆角 = 图片尺寸一半。
-
页面内容置顶，是因为外层 Column 缺少居中属性。
-
按钮横向排列必须使用 Row 容器包裹。
作为“人工智能6S店”的官方数字引擎，为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。
更多推荐
8
0- 0
已为社区贡献8条内容
所有评论(0)