鸿蒙单标签常用的属性

一、Text 文本组件完整版精简1. 基础内容属性属性名作用说明content设置文本显示内容支持换行符换行maxLines限制文本最大展示行数超出部分按溢出规则处理minLines设置文本最小占用行数内容不足也会撑开对应高度textOverflow文本溢出处理规则Clip 截断、Ellipsis 省略号、None 不处理2. 字体样式属性高频属性名作用说明fontSize设置字体大小推荐使用 fp 自适应单位fontColor设置文字颜色支持十六进制、RGB、系统默认色、资源色值fontWeight设置字体粗细支持枚举正常/加粗和 100-900 数值字重fontStyle字体样式支持正常、斜体两种样式fontFamily自定义字体填写对应字体名称即可letterSpacing字间距正数加宽文字间距负数紧缩间距lineHeight文本行高统一控制多行文字排版间距3. 文本排版对齐属性属性名作用说明textAlign文本水平对齐左对齐、居中、右对齐、两端对齐textIndent文本首行缩进常用于段落正文排版baselineOffset文字基线偏移可实现文字上标、下标效果4. 文字装饰效果属性属性名作用说明decoration文字装饰线无装饰、下划线、删除线、上划线decorationColor单独设置装饰线的颜色decorationThickness设置装饰线的粗细尺寸5. 视觉特效属性属性名作用说明textShadow文字阴影效果可配置阴影半径、颜色、偏移距离支持多层阴影opacity组件整体透明度取值范围 0-16. 复制能力属性属性名作用说明copyOption文本复制权限禁止复制、本地复制、跨设备复制7. 状态控制属性属性名作用说明enabled控制组件是否可交互禁用时文本置灰、无法触发点击visibility组件显示隐藏正常显示、隐藏但占位、隐藏且不占位8. 通用布局属性高频宽高width 宽度、height 高度、layoutWeight 弹性布局权重边距padding 内边距、margin 外边距外观backgroundColor 背景色、border 边框、borderRadius 圆角层级zIndex 组件堆叠层级9. 常用交互事件onClick文本点击触发事件onLongPress文本长按触发事件onTouch文本触摸按压、移动、抬起全过程事件10. Span富文本子组件说明Span 仅可作为 Text 内部子组件使用无法单独渲染用于实现同一段文字多种样式差异化效果。继承 Text 大部分样式属性可单独配置文字内容、字号、颜色、字重、装饰线等个性化样式。11. 核心开发注意事项字体尺寸优先使用 fp 单位自动适配各类设备屏幕文本省略效果需要 maxLines 搭配 textOverflow 同时生效行高数值需大于字体大小避免文字重叠挤压文本省略隐藏的内容无法触发复制功能颜色支持十六进制、RGB、系统色、资源引用多种格式二、TextInput 输入框组件TextInput 为单行文本输入组件适用于账号、密码、搜索、备注等单行录入场景支持样式定制、输入规则、焦点控制、内容监听。1. 基础内容属性属性名作用说明text绑定输入框默认显示文本支持双向绑定placeholder输入框占位提示文字无内容时展示placeholderColor设置占位文字颜色maxLength限制最大输入字符数超出无法输入defaultFocus页面加载默认自动获取焦点caretColor设置输入光标颜色2. 输入类型与规则属性属性名作用说明type输入类型普通文本、数字、密码、手机号、邮箱等自动适配键盘password开启密码密文输入隐藏输入内容enterKeyType回车键样式完成、搜索、下一步、发送等inputFilter输入过滤器正则限制仅可输入指定字符数字、字母等3. 字体与样式属性属性名作用说明fontSize输入文字大小支持fp自适应单位fontColor输入文字颜色fontWeight/fontStyle文字粗细、斜体样式设置textAlign输入文字对齐方式左对齐、居中、右对齐4. 状态控制属性属性名作用说明enabled是否可编辑false为只读禁止输入readOnly只读模式可选中不可修改showCursor是否显示输入光标5. 常用事件onChange输入内容发生改变时触发实时监听输入值onFocus输入框获取焦点触发onBlur输入框失去焦点触发onSubmit点击回车键提交触发onClear点击清空按钮触发6. 开发注意事项TextInput 仅支持单行输入多行输入需使用 TextArea 组件密码模式下可搭配显示/隐藏密码按钮实现切换功能inputFilter 可精准拦截非法字符输入提升表单校验效率双向绑定可实时获取输入内容无需手动取值三、Image 图片组件Image 为鸿蒙核心图片渲染组件支持加载本地资源、网络图片、像素图等适配裁剪、缩放、圆角、透明度等样式。1. 基础资源属性属性名作用说明src图片资源地址支持本地资源、网络URL、资源引用alt图片加载失败时显示的兜底文本2. 缩放适配属性高频属性名作用说明objectFit图片缩放模式自适应、铺满、裁剪、完整显示、居中显示objectRepeat小图片是否重复平铺展示resizeMode图片缩放渲染模式适配模糊、清晰展示需求3. 样式特效属性属性名作用说明borderRadius图片圆角支持全局圆角、单独四角圆角可实现圆形图片opacity图片透明度取值0-1blur图片高斯模糊效果设置模糊度数backgroundColor图片空白区域背景色4. 渲染与状态属性属性名作用说明renderMode渲染模式原图、仅灰度、透明区域优化visibility组件显示隐藏支持占位/不占位隐藏5. 常用事件onClick图片点击事件onLoad图片加载成功触发onError图片加载失败触发可做兜底处理onComplete图片加载完成触发无论成功失败6. 开发注意事项网络图片需配置网络权限否则无法加载实现圆形图片需保证宽高一致 圆角为宽高一半objectFit 是解决图片拉伸、留白、裁剪的核心属性大尺寸图片建议做压缩处理避免内存占用过高四、Button 按钮组件Button 为核心交互按钮组件用于点击操作、提交、跳转等场景支持多种按钮类型、样式、状态定制。1. 基础内容属性属性名作用说明text按钮内部显示文字内容type按钮类型普通按钮、胶囊按钮、圆形按钮、文本按钮2. 样式定制属性属性名作用说明fontSize按钮文字大小fontColor按钮文字颜色fontWeight按钮文字粗细backgroundColor按钮背景颜色borderRadius按钮圆角尺寸自定义圆角样式border自定义按钮边框粗细、颜色3. 状态控制属性属性名作用说明enabled按钮是否可点击禁用时置灰、不可触发事件loading开启加载状态按钮显示loading动画禁止重复点击opacity按钮整体透明度4. 布局与适配属性属性名作用说明width/height自定义按钮宽高支持固定尺寸、百分比padding/margin按钮内边距、外边距控制间距排版5. 常用事件onClick按钮点击触发核心交互事件onTouch触摸按压、移动、抬起事件onLongPress按钮长按触发事件6. 开发注意事项按钮默认自带点击水波纹效果无需自定义loading状态可有效防止接口重复提交胶囊按钮、圆形按钮优先使用内置type适配系统规范禁用状态需配合业务逻辑避免用户误操作五、四大组件通用总结通用布局属性width、height、padding、margin、backgroundColor、border、borderRadius、opacity、zIndex、visibility通用交互事件onClick、onLongPress、onTouch通用状态属性enabled、visibility、opacity