ArkUI 组件基础:文本、按钮与输入框

不管界面多复杂,拆到底都是基础组件的组合。Text、Button、TextInput 是出现频率最高的三个,先把它们用熟练,界面开发就入门了。

Text:界面的“嘴”

Text 组件显示文字,是最基础的组件。常用属性:fontSize 字号、fontColor 颜色、fontWeight 粗细、textAlign 对齐、maxLines 和 textOverflow 控制超出显示。

多行文本可以用
换行,也可以用文本容器组合。注意:Text 里的内容会被当作文本渲染,想显示富文本(带样式片段)要用 RichText。

ArkUI 组件基础:文本、按钮与输入框开发示例图

Button:界面的“手”

Button 组件响应用户点击,是交互的入口。常用写法:Button(‘文字’) 或 Button 容器内放图标和文字。样式属性:type(胶囊、圆形、普通)、backgroundColor、fontColor。

点击事件用 onClick 绑定:button.onClick(() => { … }),里面写点击后的逻辑。按钮的禁用状态用 enabled(false) 控制。

TextInput:界面的“耳朵”

TextInput 组件接收用户输入:placeholder 提示文字、type 输入类型(数字、密码、邮箱)、maxLength 长度限制。输入内容通过 onChange 回调获取,或绑定状态变量。

密码输入把 type 设为 Password,键盘类型可以按输入内容切换,提升输入体验。

ArkUI 组件基础:文本、按钮与输入框架构示意图

组合起来

一个登录界面就是这三兄弟的舞台:TextInput 输入账号密码,Button 触发登录,Text 显示提示信息。用 Column 纵向排列,配合间距和圆角,一个像样的界面就出来了。

写的时候注意状态绑定:输入框的值存进 @State 变量,按钮逻辑读取变量做校验,界面和逻辑就通了。

组件学习的方法

别死记属性,用“场景驱动”学习:想实现什么效果,去查对应组件的属性和事件。官方文档有组件索引和示例代码,配合预览器实时调试,效率最高。

基础组件是积木,组合能力决定界面高度。三兄弟用熟,接下来就可以挑战列表、弹窗这些“高级积木”了。

发表评论