ArkUI基础组件
是否允许文本缩放。从API version 9开始,该接口支持在ArkTS卡片中使用。从API version 9开始,该接口支持在ArkTS卡片中使用。从API version 9开始,该接口支持在ArkTS卡片中使用。从API version 9开始,该接口支持在ArkTS卡片中使用。从API version 9开始,该接口支持在ArkTS卡片中使用。从API version 9开始,该接口支
基础组件
AlphabetIndexer
| 组件 | 作用 | 参数名 | 参数类型 | 必填 | 描述 |
|---|---|---|---|---|---|
| 接口AlphabetIndexer | arrayValue | Array | 是 | 字母索引字符串数组,不可设置为空。 | |
| selected | number | 是 | 初始选中项索引值,若超出索引值范围,则取默认值0。从API version 10开始,该参数支持$$双向绑定变量。 | ||
| color | 设置文字颜色。 | value | ResourceColor | 是 | 文字颜色。默认值:0x99182431。 |
| selectedColor | 设置选中项文字颜色。 | value | ResourceColor | 是 | 选中项文字颜色。默认值:0xFF007DFF。 |
| popupColor | 设置提示弹窗文字颜色。 | value | ResourceColor | 是 | 提示弹窗文字颜色。默认值:0xFF007DFF。 |
| selectedBackgroundColor | 设置选中项背景颜色。 | value | ResourceColor | 是 | 选中项背景颜色。默认值:0x1A007DFF。设置选中项背景颜色 |
| popupBackground | 设置提示弹窗背景色 | value | ResourceColor | 是 | 提示弹窗背景色。默认值:API version 11及以前:0xFFFFFFFF。API version 12及以后:#66808080。 |
| usingPopup | 设置是否使用提示弹窗。 | value | boolean | 是 | 是否使用提示弹窗。默认值:false |
| selectedFont | 设置选中项文字样式。 | value | Font | 是 | 选中项文字样式。默认值:API version 11及以前:{size:‘12.0fp’,style:FontStyle.Normal,weight:FontWeight.Normal,family:‘HarmonyOS Sans’}API version 12及以后:{size:‘10.0vp’,style:FontStyle.Normal,weight:FontWeight.Medium,family:‘HarmonyOS Sans’} |
| popupFont | 设置提示弹窗字体样式。 | value | Font | 是 | 提示弹窗字体样式。默认值:{size:‘24.0vp’,style:FontStyle.Normal,weight:FontWeight.Normal,family:‘HarmonyOS Sans’} |
| font | 设置字母索引条默认字体样式。 | value | Font | 是 | 字母索引条默认字体样式。默认值:API version 11及以前:{size:‘12.0fp’,style:FontStyle.Normal,weight:FontWeight.Normal,family:‘HarmonyOS Sans’}API version 12及以后:{size:‘10.0vp’,style:FontStyle.Normal,weight:FontWeight.Medium,family:‘HarmonyOS Sans’} |
| itemSize | 设置字母索引条字母区域大小。 | value | string | number | 是 | 字母索引条字母区域大小,字母区域为正方形,即正方形边长。不支持设置为百分比。默认值:16.0单位:vp |
| alignStyle | 设置字母索引条弹框的对齐样式。 | value | IndexerAlign | 是 | 字母索引条弹框的对齐样式,支持弹窗显示在索引条右侧和左侧。默认值: IndexerAlign.END。 |
| offset10+ | Length | 否 | 提示弹窗与索引条之间间距,大于等于0为有效值,在不设置或设置为小于0的情况下间距与popupPosition.x相同。与popupPosition同时设置时,水平方向上offset生效,竖直方向上popupPosition.y生效。 | ||
| selected | 设置选中项索引值。 | index | number | 是 | 选中项索引值。默认值:0 |
| popupPosition | 设置弹出窗口相对于索引器条上边框中点的位置 | value | Position | 是 | 弹出窗口相对于索引器条上边框中点的位置。默认值:{x:60.0, y:48.0} |
| popupSelectedColor | 设置提示弹窗非字母部分选中文字色 | value | ResourceColor | 是 | 提示弹窗非字母部分选中文字色。默认值:#FF182431 |
| popupUnselectedColor | 设置提示弹窗非字母部分未选中文字色 | value | ResourceColor | 是 | 提示弹窗非字母部分未选中文字色。默认值:#FF182431 |
| popupItemFont | 设置提示弹窗非字母部分字体样式 | value | Font | 是 | 提示弹窗非字母部分字体样式。默认值:{size:24,weight:FontWeight.Medium} |
| popupItemBackgroundColor | 设置提示弹窗非字母部分背景色。 | value | ResourceColor | 是 | 提示弹窗非字母部分背景色。默认值:API version 11及以前:#FFFFFFFF。API version 12及以后:#00000000。 |
| autoCollapse | 设置是否使用自适应折叠模式 | value | boolean | 是 | 是否使用自适应折叠模式。默认值:false |
| popupItemBorderRadius | 设置提示弹窗索引项背板圆角半径 | value | number | 是 | 设置提示弹窗索引项背板圆角半径。默认值:24vp。不支持百分比,小于0时按照0设置。提示弹窗背板圆角自适应变化(索引项圆角半径+4vp)。 |
| itemBorderRadius | 设置索引项背板圆角半径 | value | number | 是 | 设置索引项背板圆角半径。默认值:8vp不支持百分比,小于0时按照0设置。索引条背板圆角自适应变化(索引项圆角半径+4vp)。 |
| popupBackgroundBlurStyle | 设置提示弹窗的背景模糊材质 | value | BlurStyle | 是 | 设置提示弹窗的背景模糊材质。默认值:COMPONENT_REGULAR。 |
| popupTitleBackground | 设置提示弹窗首个索引项背板颜色 | value | ResourceColor | 是 | 设置提示弹窗首个索引项背板颜色。默认值:提示弹窗只有一个索引项:#00FFFFFF。提示弹窗有多个索引项:#0c182431。 |
| enableHapticFeedback | enable | boolean | 否 | 支持触控反馈。默认值:true。 | |
| IndexerAlign枚举说明 | Left | 弹框显示在索引条右侧。 | |||
| Right | 弹框显示在索引条左侧。 | ||||
| START12+ | 在LTR场景下,弹框显示在索引条右侧的位置。在RTL场景下,弹框显示在索引条左侧的位置。 | ||||
| END12+ | 在LTR场景下,弹框显示在索引条左侧的位置。在RTL场景下,弹框显示在索引条右侧的位置 |
Blank
空白填充组件,在容器主轴方向上,空白填充组件具有自动填充容器空余部分的能力。仅当父组件为Row/Column/Flex时生效。
| 组件 | 作用 | 参数名 | 参数类型 | 必填 | 描述 |
|---|---|---|---|---|---|
| 接口Blank | min | number | string | 否 | 空白填充组件在容器主轴上的最小大小。默认值:0**说明:**不支持设置百分比。负值使用默认值。当最小值大于容器可用空间时,使用最小值作为自身大小并超出容器 | |
| color | 设置空白填充的填充颜色。 | value | ResourceColor | 是 | 空白填充的填充颜色。默认值:Color.Transparent |
Button按钮组件,可快速创建不同样式的按钮。
| 组件 | 作用 | 参数名 | 参数类型 | 必填 | 描述 |
|---|---|---|---|---|---|
| 接口Button | options | ButtonOptions | 是 | 配置按钮的显示样式。 | |
| Button | 使用文本内容创建相应的按钮组件,此时Button无法包含子组件。 | label | ResourceStr | 是 | 按钮文本内容。 |
| options | ButtonOptions | 否 | 配置按钮的显示样式。 | ||
| ButtonOptions对象说明 | type | ButtonType | 否 | 描述按钮显示样式。默认值:ButtonType.Capsule元服务API: 从API version 11开始,该接口支持在元服务中使用。 | |
| stateEffect | boolean | 否 | 按钮按下时是否开启按压态显示效果,当设置为false时,按压效果关闭。默认值:true**说明:**当开启按压态显示效果,开发者设置状态样式时,会基于状态样式设置完成后的背景色再进行颜色叠加。元服务API: 从API version 11开始,该接口支持在元服务中使用。 | ||
| buttonStyle11+ | ButtonStyleMode | 否 | 描述按钮的样式和重要程度。默认值:ButtonStyleMode.EMPHASIZED**说明:**按钮重要程度:强调按钮>普通按钮>文字按钮。元服务API: 从API version 12开始,该接口支持在元服务中使用。 | ||
| controlSize11+ | ControlSize | 否 | 描述按钮的尺寸。默认值:ControlSize.NORMAL元服务API: 从API version 12开始,该接口支持在元服务中使用。 | ||
| role12+ | ButtonRole | 否 | 描述按钮的角色。默认值:ButtonRole.NORMAL | ||
| type | 设置Button样式。 | value | ButtonType | 是 | Button样式。默认值:ButtonType.Capsule |
| fontSize | 设置文本显示字号。 | value | Length | 是 | 文本显示字号。默认值:若controlSize的值为:controlSize.NORMAL,取’16fp’,若controlSize的值为:controlSize.SMALL,取’12fp’ |
| fontColor | 设置文本显示颜色。 | value | ResourceColor | 是 | 文本显示颜色。默认值:‘#ffffff’ |
| fontWeight | 设置文本的字体粗细。 | value | FontWeight |number|string | 文本的字体粗细,number类型取值[100, 900],取值间隔为100,取值越大,字体越粗 | |
| fontStyle | 设置文本的字体样式。 | value | FontStyle | 是 | 文本的字体样式。默认值:FontStyle.Normal。 |
| stateEffect | 设置是否开启按压态显示效果。 | value | boolean | 是 | 按钮按下时是否开启按压态显示效果,当设置为false时,按压效果关闭。默认值:true |
| fontFamily | 设置字体列表。 | value | Resource | string | 是 | 字体列表。默认字体’HarmonyOS Sans’,当前支持’HarmonyOS Sans’字体和注册自定义字体。 |
| labelStyle | 设置Button组件label文本和字体的样式。 | value | LabelStyle | 是 | Button组件label文本和字体的样式。 |
| buttonStyle | 设置Button组件的样式和重要程度。 | value | ButtonStyleMode | 是 | Button组件的样式和重要程度。默认值:ButtonStyleMode.EMPHASIZED |
| controlSize | 设置Button组件的尺寸。 | value | ControlSize | 是 | Button组件的尺寸。默认值:ControlSize.NORMAL |
| role | 设置Button组件的角色 | value | ButtonRole | 是 | 设置Button组件的角色。默认值:ButtonRole.NORMAL |
| contentModifier | 定制Button内容区的方法。 | modifier | ContentModifier | 是 | 在Button组件上,定制内容区的方法。modifier: 内容修改器,开发者需要自定义class实现ContentModifier接口。 |
| ButtonType枚举说明 | Capsule | 胶囊型按钮(圆角默认为高度的一半)。 | |||
| Circle | 圆形按钮。 | ||||
| Normal | 普通按钮(默认不带圆角)。 |
CalendarPicker
日历选择器组件,提供下拉日历弹窗,可以让用户选择日期。
| 组件 | 作用 | 参数名 | 参数类型 | 必填 | 描述 |
|---|---|---|---|---|---|
| 接口CalendarPicker | options | CalendarOptions | 否 | 配置日历选择器组件的参数。 | |
| edgeAlign | 设置选择器与入口组件的对齐方式。 | alignType | CalendarAlign | 是 | 对齐方式类型。默认值:CalendarAlign .END |
| offset | Offset | 否 | 按照对齐类型对齐后,选择器相对入口组件的偏移量。默认值:{dx: 0, dy: 0} | ||
| textStyle | 入口区的文本颜色、字号、字体粗细。 | value | PickerTextStyle | 是 | 设置入口区的文本颜色、字号、字体粗细。默认值:{color: ‘#ff182431’,font: {size: ‘16fp’,weight: FontWeight.Regular}} |
| onChange | 选择日期时触发该事件。 | value | Date | 是 | 选中的日期值。 |
| CalendarOptions对象说明 | hintRadius | number | Resource | 否 | 描述日期选中态底板样式。默认值:底板样式为圆形。**说明:**hintRadius为0,底板样式为直角矩形。hintRadius为0 ~ 16,底板样式为圆角矩形。hintRadius>=16,底板样式为圆形 | |
| selected | Date | 否 | 设置选中项的日期。选中的日期未设置或日期格式不符合规范则为默认值。默认值:当前系统日期。 | ||
| CalendarAlign枚举说明 | START | 设置选择器与入口组件左对齐的对齐方式。 | |||
| CENTER | 设置选择器与入口组件居中对齐的对齐方式。 | ||||
| END | 设置选择器与入口组件右对齐的对齐方式。 |
多选Checkbox
| 组件 | 参数名 | 参数类型 | 必填 | 描述 | 作用 |
|---|---|---|---|---|---|
| options | CheckboxOptions | 否 | 配置复选框的参数。 | ||
| CheckboxOptions对象说明 | name | string | 否 | 用于指定多选框名称。 | |
| group | string | 否 | 用于指定多选框所属群组的名称(即所属CheckboxGroup的名称)。**说明:**未配合使用CheckboxGroup组件时,此值无用。 | ||
| indicatorBuilder12+ | CustomBuilder | 否 | 配置多选框的选中样式为自定义组件。自定义组件与Checkbox组件为中心点对齐显示。indicatorBuilder设置为undefined/null时,默认为indicatorBuilder未设置状态。 | ||
| select | value | boolean | 是 | 多选框是否选中。默认值:false | 设置多选框是否选中。 |
| selectedColor | value | ResourceColor | 是 | 多选框选中状态颜色。默认值:$r(‘sys.color.ohos_id_color_text_primary_activated’)。异常值按照默认值处理。 | 设置多选框选中状态颜色。 |
| unselectedColor | value | ResourceColor | 是 | 多选框非选中状态边框颜色。默认值:‘#33ffffff’。 | 设置多选框非选中状态边框颜色。 |
| mark | value | MarkStyle | 是 | 多选框内部图标样式。 从API version 12开始,设置了indicatorBuilder时,按照indicatorBuilder中的内容显示。 | 设置多选框内部图标样式。 |
| shape | value | CheckBoxShape | 是 | CheckBox组件形状, 包括圆形和圆角方形。默认值:CheckBoxShape.CIRCLE | 设置CheckBox组件形状, 包括圆形和圆角方形 |
| contentModifier | modifier | ContentModifier | 是 | 在CheckBox组件上,定制内容区的方法。modifier: 内容修改器,开发者需要自定义class实现ContentModifier接口。 | 定制CheckBox内容区的方法。 |
CheckboxGroup
多选框群组,用于控制多选框全选或者不全选状态。
| 组件 | 作用 | 参数名 | 参数类型 | 必填 | 描述 |
|---|---|---|---|---|---|
| 接口CheckboxGroup | options | CheckboxGroupOptions | 否 | 配置多选框群组参数。 | |
| CheckboxGroupOptions对象说明 | group | string | 否 | 群组名称。**说明:**多个相同群组名称的CheckboxGroup,仅第一个CheckboxGroup生效。 | |
| selectAll | 设置是否全选。若同组的Checkbox显式设置了select属性,则Checkbox的优先级高 | value | boolean | 是 | 是否全选。默认值:false |
| selectedColor | 设置被选中或部分选中状态的颜色。 | value | ResourceColor | 是 | 被选中或部分选中状态的颜色。默认值:$r(‘sys.color.ohos_id_color_text_primary_activated’)异常值按照默认值处理。 |
| unselectedColor | 设置非选中状态边框颜色。 | value | ResourceColor | 是 | 非选中状态边框颜色。默认值:‘#33ffffff’。 |
| mark | 设置多选框内部图标样式。 | value | MarkStyle | 是 | 多选框内部图标样式。 |
| checkboxShape | 设置CheckboxGroup组件形状, 包括圆形和圆角方形。 | value | CheckBoxShape | 是 | 设置CheckboxGroup组件形状, 包括圆形和圆角方形。默认值:CheckBoxShape.CIRCLE。说明:CheckboxGroup组件形状按照设置显示。CheckboxGroup内所有没有单独设置shape类型的Checkbox形状和CheckboxGroup的保持一致。CheckboxGroup内有单独设置shape类型的Checkbox形状则优先于CheckboxGroup,按照设置形状显示。 |
| onChange | CheckboxGroup的选中状态或群组内的Checkbox的选中状态发生变化时,触发回调。 | event | CheckboxGroupResult | 是 | 多选框群组的信息。 |
| 枚举 | 名称 | 类型 | 描述 |
|---|---|---|---|
| CheckboxGroupResult对象说明 | name | Array | 群组内所有被选中的多选框名称。 |
| status | SelectStatus | 选中状态。 | |
| SelectStatus枚举说明 | All | 群组多选择框全部选择。 | |
| Part | 群组多选择框部分选择 | ||
| None | 群组多选择框全部没有选择 |
MarkStyle10+对象说明
| 名称 | 类型 | 必填 | 默认值 | 描述 |
|---|---|---|---|---|
| strokeColor | ResourceColor | 否 | Color.White | 内部图标颜色。 |
| size | Length | 否 | - | 内部图标大小,单位vp。默认大小与多选框群组组件宽度设置值一致。不支持百分比形式设置。当设置为非法值时,按照默认值处理。 |
| strokeWidth | Length | 否 | 2 | 内部图标粗细,单位vp。不支持百分比形式设置。当设置为非法值时,按照默认值处理。 |
ContainerSpan
Text组件的子组件,用于统一管理多个Span、ImageSpan的背景色及圆角弧度。
| 组件 | 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|---|
| textBackgroundStyle | style | TextBackgroundStyle | 是 | 文本背景样式。默认值:{color: Color.Transparent,radius: 0} |
TextBackgroundStyle对象说明
元服务API: 从API version 12开始,该接口支持在元服务中使用。 不支持通用事件。
| 名称 | 参数类型 | 必填 | 描述 |
|---|---|---|---|
| color | ResourceColor | 否 | 文本背景色。 |
| radius | Dimension | BorderRadiuses | 否 | 文本背景圆角。 |
DataPanel
数据面板组件,用于将多个数据占比情况使用占比图进行展示
接口DataPanel
| 参数名 | 参数类型 | 必填 | 参数描述 |
|---|---|---|---|
| options | DataPanelOptions | 是 | 数据面板组件参数。 |
DataPanelOptions对象说明
| 参数名 | 参数类型 | 必填 | 参数描述 |
|---|---|---|---|
| values | number[] | 是 | 数据值列表,最多包含9个数据,大于9个数据则取前9个数据。若数据值小于0则置为0。 |
| max | number | 否 | - max大于0,表示数据的最大值。- max小于等于0,max等于value数组各项的和,按比例显示。默认值:100 |
| type8+ | DataPanelType | 否 | 数据面板的类型(不支持动态修改)。默认值:DataPanelType.Circle |
DataPanelType8+枚举说明
从API version 9开始,该接口支持在ArkTS卡片中使用。
元服务API: 从API version 11开始,该接口支持在元服务中使用。
| 名称 | 描述 |
|---|---|
| Line | 线型数据面板。 |
| Circle | 环形数据面板。 |
| 组件 | 作用 | 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|---|---|
| closeEffect | 设置关闭数据占比图表旋转动效和投影效果 | value | boolean | 是 | 关闭数据占比图表旋转动效和投影效果。默认值:false |
| valueColors | 设置各数据段颜色 | value | Array<ResourceColor | LinearGradient> | 是 | 各数据段颜色,ResourceColor为纯色,LinearGradient为渐变色。 |
| trackBackgroundColor | 设置底板颜色。 | value | ResourceColor | 是 | 底板颜色。默认值:‘#08182431’,格式为十六进制ARGB值,前俩位代表透明度。 |
| strokeWidth | 设置圆环粗细。数据面板的类型为DataPanelType.Line时该属性不生效。 | value | Length | 是 | 圆环粗细。默认值:24单位:vp**说明:**设置小于0的值时,按默认值显示。 |
| trackShadow | 设置投影样式。 | value | DataPanelShadowOptions | 是 | 投影样式。**说明:**设置null为不开启投影。 |
| contentModifier | 定制DataPanel内容区的方法 | modifier | ContentModifier | 是 | 在DataPanel组件上,定制内容区的方法。modifier: 内容修改器,开发者需要自定义class实现ContentModifier接口。 |
DatePicker
日期选择器组件,用于根据指定日期范围创建日期滑动选择器。
接口DatePicker(options?: DatePickerOptions)
根据指定范围的Date创建可以选择日期的滑动选择器。
元服务API: 从API version 11开始,该接口支持在元服务中使用。
系统能力: SystemCapability.ArkUI.ArkUI.Full
参数:
| 参数名 | 类型 | 必填 | 描述 |
|---|---|---|---|
| options | DatePickerOptions | 否 | 配置日期选择器组件的参数。 |
DatePickerOptions对象说明
元服务API: 从API version 11开始,该接口支持在元服务中使用。
| 名称 | 类型 | 必填 | 说明 |
|---|---|---|---|
| start | Date | 否 | 指定选择器的起始日期。默认值:Date(‘1970-1-1’) |
| end | Date | 否 | 指定选择器的结束日期。默认值:Date(‘2100-12-31’) |
| selected | Date | 否 | 设置选中项的日期。默认值:当前系统日期从API version 10开始,该参数支持$$双向绑定变量。 |
异常情形说明:
| 异常情形 | 对应结果 |
|---|---|
| 起始日期晚于结束日期,选中日期未设置 | 起始日期、结束日期和选中日期都为默认值 |
| 起始日期晚于结束日期,选中日期早于起始日期默认值 | 起始日期、结束日期都为默认值,选中日期为起始日期默认值 |
| 起始日期晚于结束日期,选中日期晚于结束日期默认值 | 起始日期、结束日期都为默认值,选中日期为结束日期默认值 |
| 起始日期晚于结束日期,选中日期在起始日期与结束日期默认值范围内 | 起始日期、结束日期都为默认值,选中日期为设置的值 |
| 选中日期早于起始日期 | 选中日期为起始日期 |
| 选中日期晚于结束日期 | 选中日期为结束日期 |
| 起始日期晚于当前系统日期,选中日期未设置 | 选中日期为起始日期 |
| 结束日期早于当前系统日期,选中日期未设置 | 选中日期为结束日期 |
| 日期格式不符合规范,如‘1999-13-32’ | 取默认值 |
| 起始日期或结束日期早于系统有效范围 | 起始日期或结束日期取起始日期默认值 |
| 起始日期或结束日期晚于系统有效范围 | 起始日期或结束日期取结束日期默认值 |
| 起始日期与结束日期同时早于系统有效范围 | 起始日期与结束日期取系统有效范围最早日期 |
| 起始日期与结束日期同时晚于系统有效范围 | 起始日期与结束日期取系统有效范围最晚日期 |
系统日期范围:1900-1-31 ~ 2100-12-31
选中日期会在起始日期与结束日期异常处理完成后再进行异常情形判断处理
| 组件 | 作用 | 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|---|---|
| lunar | 设置弹窗的日期是否显示农历。 | value | boolean | 是 | 日期是否显示农历。- true:展示农历。- false:不展示农历。默认值:false |
| disappearTextStyle | 设置所有选项中最上和最下两个选项的文本样式 | value | PickerTextStyle | 是 | 所有选项中最上和最下两个选项的文本颜色、字号、字体粗细。默认值:{color: ‘#ff182431’,font: {size: ‘14fp’,weight: FontWeight.Regular}} |
| textStyle | 设置所有选项中除了最上、最下及选中项以外的文本样式 | value | PickerTextStyle | 是 | 所有选项中除了最上、最下及选中项以外的文本颜色、字号、字体粗细。默认值:{color: ‘#ff182431’,font: {size: ‘16fp’,weight: FontWeight.Regular}} |
| selectedTextStyle | 设置选中项的文本样式。 | value | PickerTextStyle | 是 | 选中项的文本颜色、字号、字体粗细。默认值:{color: ‘#ff007dff’,font: {size: ‘20vp’,weight: FontWeight.Medium}} |
PickerTextStyle10+类型说明
元服务API: 从API version 11开始,该接口支持在元服务中使用。
| 参数名 | 参数类型 | 必填 | 参数描述 |
|---|---|---|---|
| color | ResourceColor | 否 | 文本颜色。 |
| font | Font | 否 | 文本样式,picker只支持字号、字体粗细的设置。 |
事件
除支持通用事件外,还支持以下事件:
onChange(deprecated)
onChange(callback: (value: DatePickerResult) => void)
选择日期时触发该事件。
参数:
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| value | DatePickerResult | 是 | 返回选中的时间。 |
onDateChange10+
onDateChange(callback: (value: Date) => void)
选择日期时触发该事件。
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| value | Date | 是 | 返回选中的时间,年月日为选中的日期,时分取决于当前系统时间的时分,秒恒为00。 |
DatePickerResult对象说明
元服务API: 从API version 11开始,该接口支持在元服务中使用。
| 名称 | 参数类型 | 描述 |
|---|---|---|
| year | number | 选中日期的年。 |
| month | number | 选中日期的月(0~11),0表示1月,11表示12月。 |
| day | number | 选中日期的日。 |
Divider
提供分隔器组件,分隔不同内容块/内容元素。
| 组件 | 作用 | 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|---|---|
| vertical | 设置分割线的方向。 | value | boolean | 是 | 使用水平分割线还是垂直分割线。false:水平分割线;true:垂直分割线。默认值:false |
| color | 设置分割线的颜色。 | value | ResourceColor | 是 | 分割线颜色。默认值:‘#33182431’ |
| strokeWidth | 设置分割线的宽度 | value | number | string | 是 | 分割线宽度。默认值:1px单位:vp**说明:**分割线的宽度不支持百分比设置。优先级低于通用属性height,超过通用属性设置大小时,按照通用属性进行裁切。 |
| lineCap | 设置分割线的端点样式。 | value | LineCapStyle | 是 | 分割线的端点样式。默认值:LineCapStyle.Butt |
Gauge
数据量规图表组件,用于将数据展示为环形图表。
接口
Gauge(options:{value: number, min?: number, max?: number})
创建数据量规图表组件。
参数:
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| value | number | 是 | 量规图的当前数据值,即图中指针指向位置。用于组件创建时量规图初始值的预置。**说明:**value不在min和max范围内时使用min作为默认值。 |
| min | number | 否 | 当前数据段最小值。默认值:0 |
| max | number | 否 | 当前数据段最大值。默认值:100**说明:**max小于min时使用默认值0和100。max和min支持负数。 |
| 组件 | 作用 | 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|---|---|
| value | 设置量规图的数据值。 | value | number | 是 | 量规图的数据值,可用于动态修改量规图的数据值。默认值:0 |
| startAngle | 设置起始角度位置 | angle | number | 是 | 起始角度位置,时钟0点为0度,顺时针方向为正角度。默认值:0 |
| endAngle | 设置终止角度位置 | angle | number | 是 | 终止角度位置,时钟0点为0度,顺时针方向为正角度。默认值:360 |
| colors | 设置量规图的颜色 | colors | ResourceColor11+ | LinearGradient11+ | Array<[ResourceColor | LinearGradient11+ | number]> | 是 | 量规图的颜色,支持分段颜色设置。API version 9 默认值:Color.BlackAPI version 11默认值:若不传颜色,或者数组为空,无法确定圆环类型及颜色,则圆环颜色为"0xFF64BB5C"、“0xFFF7CE00”、“0xFFE84026"的渐变环。若传入颜色,但颜色值有误,则该颜色为"0xFFE84026”。 |
| strokeWidth | 设置环形量规图的环形厚度。 | length | Length | 是 | 环形量规图的环形厚度。默认值:4单位:vp**说明:**设置小于0的值时,按默认值显示。不支持百分比。 |
| description | 设置说明内容 | value | CustomBuilder | 是 | 说明内容。说明:@Builder中的内容由开发者自定义,建议使用文本或者图片。若自定义部分的宽高为百分比形式,则基准范围为圆环直径的44.4%*25.4%的矩形(图片为28.6%*28.6%),距离圆环底部0vp,左右居中。设置null则不显示内容。不设置则依赖是否设置数据最大最小值。若设置最大最小值或者只设置其中一个,则显示最大最小值。若未设置最大最小值,则不显示内容。最大最小值显示在圆环底部,位置不可移动,若圆环开口角度设置不恰当,存在圆环遮挡文字的情况。 |
| trackShadow | 设置阴影样式 | value | GaugeShadowOptions | 是 | 阴影样式。**说明:**阴影颜色与圆环颜色一致。设置null为不开启投影。 |
| indicator | 设置指针样式 | value | GaugeIndicatorOptions | 是 | 指针样式。**说明:**设置null则不显示指针。 |
| privacySensitive | 设置隐私敏感。 | isPrivacySensitiveMode | [Optional] | 是 | 设置隐私敏感,隐私模式下Gauge指针指向0位置,最大值最小值文本将被遮罩,量程显示灰色或者底色。**说明:**设置null则不敏感。需要卡片框架支持。 |
| contentModifier | 定制Slider内容区的方法。 | modifier | ContentModifier | 是 | 在Gauge组件上,定制内容区的方法。modifier: 内容修改器,开发者需要自定义class实现ContentModifier接口。 |
GaugeShadowOptions11+对象说明
GaugeShadowOptions继承自MultiShadowOptions,具有MultiShadowOptions的全部属性。
GaugeIndicatorOptions11+对象说明
元服务API: 从API version 12开始,该接口支持在元服务中使用。
| 名称 | 参数类型 | 必填 | 描述 |
|---|---|---|---|
| icon | Resource | 否 | 图标资源路径。**说明:**不配置则使用默认的三角形样式指针。支持使用svg格式的图标,若使用其他格式,则使用默认的三角形样式指针。 |
| space | Dimension | 否 | 指针距离圆环外边的间距。(不支持百分比)默认值:8单位:vp**说明:**对于默认的三角形样式指针,间距为黑色三角形到圆环外边的间距。若设置值小于0,则使用默认值。若设置值大于圆环半径,则使用默认值。 |
GaugeConfiguration12+对象说明
开发者需要自定义class实现ContentModifier接口。
| 参数名 | 类型 | 说明 |
|---|---|---|
| value | number | 当前数据值。 |
| min | number | 当前数据段最小值。 |
| max | number | 当前数据段最大值。 |
Image
Image为图片组件,常用于在应用中显示图片。Image支持加载PixelMap、ResourceStr和DrawableDescriptor类型的数据源,支持png、jpg、jpeg、bmp、svg、webp、gif和heif类型的图片格式。
| 组件 | 参数名 | 参数类型 | 必填 | 参数描述 |
|---|---|---|---|---|
| Image | src | PixelMap | ResourceStr| DrawableDescriptor | 是 | 图片的数据源,支持本地图片和网络图片,引用方式请参考加载图片资源。1. PixelMap格式为像素图,常用于图片编辑的场景。2. ResourceStr包含Resource和string格式。string格式可用于加载网络图片和本地图片,常用于加载网络图片。当使用相对路径引用本地图片时,例如Image(“common/test.jpg”),不支持跨包/跨模块调用该Image组件,建议使用Resource格式来管理需全局使用的图片资源。- 支持Base64字符串。格式data:image/[png|jpeg|bmp|webp|heif];base64,[base64 data], 其中[base64 data]为Base64字符串数据。- 支持file://路径前缀的字符串,应用沙箱URI:file:///。用于读取本应用安装目录下files文件夹下的图片资源。需要保证目录包路径下的文件有可读权限。Resource格式可以跨包/跨模块访问资源文件,是访问本地图片的推荐方式。3. 当传入资源id或name为普通图片时,生成DrawableDescriptor对象。传入AnimatedDrawableDescriptor类型可播放PixelMap数组动画。说明:- ArkTS卡片上支持gif图片格式动效,但仅在显示时播放一次。- ArkTS卡片上不支持http://等网络相关路径前缀和file://路径前缀的字符串。- ArkTS卡片上不支持 PixelMap类型。- 加载本地图片过程中,如果对图片进行修改或者替换,可能会引起应用崩溃。因此需要覆盖图片文件时,应该先删除该文件再重新创建一个同名文件。- 网络图片必须支持RFC 9113标准,否则会导致加载失败。- 如果下载的网络图片大于10MB或一次下载的网络图片数量较多,建议使用HTTP工具提前预下载,提高图片加载性能,方便应用侧管理数据。- 如果SVG图片没有原生大小,需要给Image组件设置宽高,否则不显示。- 如果SVG图片通过image标签引用本地其他图片,被引用的图片不支持svg格式和gif格式。 |
| Image | src | PixelMap | ResourceStr| DrawableDescriptor | 是 | 图片的数据源,支持本地图片和网络图片,引用方式请参考加载图片资源。1. PixelMap格式为像素图,常用于图片编辑的场景。2. ResourceStr包含Resource和string格式。string格式可用于加载网络图片和本地图片,常用于加载网络图片。当使用相对路径引用本地图片时,例如Image(“common/test.jpg”),不支持跨包/跨模块调用该Image组件,建议使用Resource格式来管理需全局使用的图片资源。- 支持Base64字符串。格式data:image/[png|jpeg|bmp|webp|heif];base64,[base64 data], 其中[base64 data]为Base64字符串数据。- 支持file://路径前缀的字符串,应用沙箱URI:file:///。用于读取本应用安装目录下files文件夹下的图片资源。需要保证目录包路径下的文件有可读权限。Resource格式可以跨包/跨模块访问资源文件,是访问本地图片的推荐方式。3. 当传入资源id或name为普通图片时,生成DrawableDescriptor对象。传入AnimatedDrawableDescriptor类型可播放PixelMap数组动画。说明:- ArkTS卡片上支持gif图片格式动效,但仅在显示时播放一次。- ArkTS卡片上不支持http://等网络相关路径前缀和file://路径前缀的字符串。- ArkTS卡片上不支持 PixelMap类型。- 加载本地图片过程中,如果对图片进行修改或者替换,可能会引起应用崩溃。因此需要覆盖图片文件时,应该先删除该文件再重新创建一个同名文件。- 网络图片必须支持RFC 9113标准,否则会导致加载失败。- 如果下载的网络图片大于10MB或一次下载的网络图片数量较多,建议使用HTTP工具提前预下载,提高图片加载性能,方便应用侧管理数据。- 如果SVG图片没有原生大小,需要给Image组件设置宽高,否则不显示。- 如果SVG图片通过image标签引用本地其他图片,被引用的图片不支持svg格式和gif格式。 |
| imageAIOptions | ImageAIOptions | 是 | 给组件设置一个AI分析选项,通过此项可配置分析类型或绑定一个分析控制器。 |
属性
| 组件 | 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|---|
| alt | value | string | Resource | PixelMap12+ | 是 | 加载时显示的占位图,支持本地图片(png、jpg、bmp、svg、gif和heif类型),支持PixelMap类型图片,不支持网络图片。默认值:null |
| objectFit | value | ImageFit | 是 | 图片的填充效果。默认值:ImageFit.Cover |
| objectRepeat | value | ImageRepeat | 是 | 图片的重复样式。默认值:ImageRepeat.NoRepeat |
| interpolation | value | ImageInterpolation | 是 | 图片的插值效果。默认值:ImageInterpolation.Low |
| renderMode | value | ImageRenderMode | 是 | 图片的渲染模式为原色或黑白。默认值:ImageRenderMode.Original |
| sourceSize | value | {width: number,height: number} | 是 | 图片解码尺寸,降低图片的分辨率,常用于需要让图片显示尺寸比组件尺寸更小的场景。和ImageFit.None配合使用时可在组件内显示小图。单位:vp |
| matchTextDirection | value | boolean | 是 | 图片是否跟随系统语言方向。默认值:false |
| fitOriginalSize | value | boolean | 是 | 图片的显示尺寸是否跟随图源尺寸默认值:false |
| fillColor | value | ResourceColor | 是 | 设置填充颜色。 |
| autoResize | alue | boolean | 是 | 图片解码过程中是否对图源自动缩放。设置为true时,组件会根据显示区域的尺寸决定用于绘制的图源尺寸,有利于减少内存占用。如原图大小为1920x1080,而显示区域大小为200x200,则图片会降采样解码到200x200的尺寸,大幅度节省图片占用的内存。默认值:false |
| syncLoad | value | boolean | 是 | 是否同步加载图片,默认是异步加载。同步加载时阻塞UI线程,不会显示占位图。默认值:false |
| copyOption | value | CopyOptions | 是 | 图片是否可复制。默认值:CopyOptions.None |
| colorFilter | value | ColorFilter | DrawingColorFilter12+ | 是 | 1. 给图像设置颜色滤镜效果,入参为一个的4x5的RGBA转换矩阵。矩阵第一行表示R(红色)的向量值,第二行表示G(绿色)的向量值,第三行表示B(蓝色)的向量值,第四行表示A(透明度)的向量值,4行分别代表不同的RGBA的向量值。当矩阵对角线值为1,其余值为0时,保持图片原有色彩。**计算规则:**如果输入的滤镜矩阵为: 像素点为[R, G, B, A]则过滤后的颜色为 [R’, G’, B’, A’] 2. 从API Version12开始支持@ohos.graphics.drawing的ColorFilter类型作为入参。**说明:**API Version 11及之前,svg类型图源不支持该属性。从API version 12开始,该接口中的DrawingColorfilter类型支持在元服务中使用。其中,svg类型的图源需具有stroke属性。 |
| draggable | value | boolean | 是 | 组件默认拖拽效果,设置为true时,组件可拖拽。API version 9及之前,默认值为false。API version 10及之后,默认值为true。 |
| enableAnalyzer | enable | boolean | 是 | 组件支持AI分析,设置为true时,组件可进行AI分析。默认值:false |
| resizable | value | ResizableOptions | 是 | 图像拉伸时可调整大小的图像选项。 |
| privacySensitive | supported | boolean | 是 | 是否支持卡片敏感隐私信息。默认值为false,当设置为true时,隐私模式下图片将显示为半透明底板样式。**说明:**设置null则不敏感。进入隐私模式需要卡片框架支持。 |
| dynamicRangeMode | value | DynamicRangeMode | 是 | 图像显示的动态范围。默认值:dynamicRangeMode.Standard |
ImageInterpolation
卡片能力: 从API version 9开始,该接口支持在ArkTS卡片中使用。
元服务API: 从API version 11开始,该接口支持在元服务中使用。
| 名称 | 描述 |
|---|---|
| None | 最近邻插值。 |
| High | Cubic插值,插值质量最高,可能会影响图片渲染的速度。 |
| Medium | MipMap插值。 |
| Low | 双线性插值。 |
ImageRenderMode
卡片能力: 从API version 9开始,该接口支持在ArkTS卡片中使用。
元服务API: 从API version 11开始,该接口支持在元服务中使用。
| 名称 | 描述 |
|---|---|
| Original | 原色渲染模式。 |
| Template | 黑白渲染模式。 |
ResizableOptions11+
图像拉伸时可调整大小的图像选项。
元服务API: 从API version 12开始,该接口支持在元服务中使用。
| 参数名 | 类型 | 说明 |
|---|---|---|
| slice | EdgeWidths | 边框宽度类型,用于描述组件边框不同方向的宽度。**说明:**只有当bottom和right同时大于0时,该属性生效。 |
EdgeWidths参数说明
元服务API: 从API version 11开始,该接口支持在元服务中使用。
| 名称 | 类型 | 必填 | 说明 |
|---|---|---|---|
| top | Length | 否 | 图片顶部拉伸时保持不变距离。默认值:0单位:vp |
| right | Length | 否 | 图片右部拉伸时保持不变距离。默认值:0单位:vp |
| bottom | Length | 否 | 图片底部拉伸时保持不变距离。默认值:0单位:vp |
| left | Length | 否 | 图片左部拉伸时保持不变距离。默认值:0单位:vp |

DynamicRangeMode12+
期望展示的图像动态范围。
| 名称 | 描述 |
|---|---|
| High | 不受限动态范围,最大限度进行图片提亮。 |
| Constraint | 受限动态范围,受限进行图片提亮。 |
| Standard | 标准动态范围,不进行图片提亮。 |
事件
除支持通用事件外,还支持以下事件:
onComplete
onComplete(callback: (event?: { width: number, height: number, componentWidth: number, componentHeight: number, loadingStatus: number,contentWidth: number, contentHeight: number, contentOffsetX: number, contentOffsetY: number }) => void)
图片数据加载成功和解码成功时均触发该回调,返回成功加载的图片尺寸。
当组件的参数类型为AnimatedDrawableDescriptor时该事件不触发。
卡片能力: 从API version 9开始,该接口支持在ArkTS卡片中使用。
元服务API: 从API version 11开始,该接口支持在元服务中使用。
系统能力: SystemCapability.ArkUI.ArkUI.Full
参数:
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| width | number | 是 | 图片的宽。单位:像素 |
| height | number | 是 | 图片的高。单位:像素 |
| componentWidth | number | 是 | 组件的宽。单位:像素 |
| componentHeight | number | 是 | 组件的高。单位:像素 |
| loadingStatus | number | 是 | 图片加载成功的状态值。**说明:**返回的状态值为0时,表示图片数据加载成功。返回的状态值为1时,表示图片解码成功。 |
| contentWidth10+ | number | 是 | 图片实际绘制的宽度。单位:像素**说明:**仅在loadingStatus返回1时有效。 |
| contentHeight10+ | number | 是 | 图片实际绘制的高度。单位:像素**说明:**仅在loadingStatus返回1时有效。 |
| contentOffsetX10+ | number | 是 | 实际绘制内容相对于组件自身的x轴偏移。单位:像素**说明:**仅在loadingStatus返回1时有效。 |
| contentOffsetY10+ | number | 是 | 实际绘制内容相对于组件自身的y轴偏移。单位:像素**说明:**仅在loadingStatus返回1时有效。 |
onError9+
onError(callback: ImageErrorCallback)
图片加载异常时触发该回调。
当组件的参数类型为AnimatedDrawableDescriptor时该事件不触发。
卡片能力: 从API version 9开始,该接口支持在ArkTS卡片中使用。
元服务API: 从API version 11开始,该接口支持在元服务中使用。
系统能力: SystemCapability.ArkUI.ArkUI.Full
参数:
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| callback | ImageErrorCallback | 是 | 图片加载异常时触发的回调。 |
onFinish
onFinish(event: () => void)
当加载的源文件为带动效的svg格式图片时,svg动效播放完成时会触发这个回调。如果动效为无限循环动效,则不会触发这个回调。
仅支持svg格式的图片。当组件的参数类型为AnimatedDrawableDescriptor时该事件不触发。
卡片能力: 从API version 9开始,该接口支持在ArkTS卡片中使用。
元服务API: 从API version 11开始,该接口支持在元服务中使用。
系统能力: SystemCapability.ArkUI.ArkUI.Full
ImageErrorCallback9+
type ImageErrorCallback = (error: ImageError) => void
图片加载异常时触发的回调。
当组件的参数类型为AnimatedDrawableDescriptor时该事件不触发。
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| error | ImageError | 是 | 图片加载异常时触发回调的返回对象。 |
ImageError9+
图片加载异常时触发回调的返回对象。
当组件的参数类型为AnimatedDrawableDescriptor时该事件不触发。
元服务API: 从API version 11开始,该接口支持在元服务中使用。
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| componentWidth | number | 是 | 组件的宽。单位:像素 |
| componentHeight | number | 是 | 组件的高。单位:像素 |
| message | string | 是 | 报错信息。 |
ImageAnimator
提供帧动画组件来实现逐帧播放图片的能力,可以配置需要播放的图片列表,每张图片可以配置时长。
参数:
| 组件 | 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|---|
| images | value | Array<ImageFrameInfo> | 是 | 设置图片帧信息集合。每一帧的帧信息(ImageFrameInfo)包含图片路径、图片大小、图片位置和图片播放时长信息,详见ImageFrameInfo属性说明。默认值:[] |
| state | value | AnimationStatusvalue | 是AnimationStatus | 默认为初始状态,用于控制播放状态。默认值:AnimationStatus.Initial是 |
| duration | value | number | 是 | 播放时长。value为0时,不播放图片。value的改变只会在下一次循环开始时生效。单位:毫秒默认值:1000ms |
| reverse | value | boolean | 是 | 播放方向。false表示从第1张图片播放到最后1张图片,true表示从最后1张图片播放到第1张图片。默认值:false |
| fixedSize | value | boolean | 是 | 设置图片大小是否固定为组件大小。 true表示图片大小与组件大小一致,此时设置图片的width 、height 、top 和left属性是无效的。false表示每一张图片的width 、height 、top和left属性都要单独设置。默认值:true |
| preDecode | value | number | 是 | 预解码的图片数量。例如该值设为2,则播放当前页时会提前加载后面两张图片至缓存以提升性能。默认值:0 |
| fillMode | value | FillMode | 是 | 当前播放方向下,动画开始前和结束后的状态。默认值:FillMode.Forwards |
| iterations | value | number | 是 | 默认播放一次,设置为-1时表示无限次播放。默认值:1 |
ImageFrameInfo对象说明
元服务API: 从API version 11开始,该接口支持在元服务中使用。
| 参数名称 | 参数类型 | 必填 | 参数描述 |
|---|---|---|---|
| src | string | Resource9+ | PixelMap12+ | 是 | 图片路径,图片格式为svg,png和jpg,从API Version9开始支持Resource类型的路径,从API version 12开始支持PixelMap类型。卡片能力: 从API version 10开始,该接口支持在ArkTS卡片中使用。 |
| width | number | string | 否 | 图片宽度。默认值:0从API version 10开始,该接口支持在ArkTS卡片中使用 |
| height | number | string | 否 | 图片高度。默认值:0从API version 10开始,该接口支持在ArkTS卡片中使用 |
| top | number | string | 否 | 图片相对于组件左上角的纵向坐标。默认值:0从API version 10开始,该接口支持在ArkTS卡片中使用 |
| left | number | string | 否 | 图片相对于组件左上角的横向坐标。默认值:0从API version 10开始,该接口支持在ArkTS卡片中使用 |
| duration | number | 否 | 每一帧图片的播放时长,单位毫秒。默认值:0 |
事件
除支持通用事件外,还支持以下事件:
onStart
onStart(event: () => void)
状态回调,动画开始播放时触发。
卡片能力: 从API version 10开始,该接口支持在ArkTS卡片中使用。
元服务API: 从API version 11开始,该接口支持在元服务中使用。
系统能力: SystemCapability.ArkUI.ArkUI.Full
onPause
onPause(event: () => void)
状态回调,动画暂停播放时触发。
卡片能力: 从API version 10开始,该接口支持在ArkTS卡片中使用。
元服务API: 从API version 11开始,该接口支持在元服务中使用。
系统能力: SystemCapability.ArkUI.ArkUI.Full
onRepeat
onRepeat(event: () => void)
状态回调,动画重复播放时触发。
元服务API: 从API version 11开始,该接口支持在元服务中使用。
系统能力: SystemCapability.ArkUI.ArkUI.Full
onCancel
onCancel(event: () => void)
状态回调,动画返回最初状态时触发。
卡片能力: 从API version 10开始,该接口支持在ArkTS卡片中使用。
元服务API: 从API version 11开始,该接口支持在元服务中使用。
系统能力: SystemCapability.ArkUI.ArkUI.Full
onFinish
onFinish(event: () => void)
状态回调,动画播放完成时或者停止播放时触发。
卡片能力: 从API version 10开始,该接口支持在ArkTS卡片中使用。
元服务API: 从API version 11开始,该接口支持在元服务中使用。
系统能力: SystemCapability.ArkUI.ArkUI.Full
ImageSpan
Text、ContainerSpan组件的子组件,用于显示行内图片
接口
ImageSpan(value: ResourceStr | PixelMap)
元服务API: 从API version 11开始,该接口支持在元服务中使用。
系统能力: SystemCapability.ArkUI.ArkUI.Full
参数:
| 参数名 | 参数类型 | 必填 | 参数描述 |
|---|---|---|---|
| value | ResourceStr | PixelMap | 是 | 图片的数据源,支持本地图片和网络图片。当使用相对路径引用图片资源时,例如ImageSpan(“common/test.jpg”),不支持跨包/跨模块调用该ImageSpan组件,建议使用$r方式来管理需全局使用的图片资源。- 支持的图片格式包括png、jpg、bmp、svg、gif和heif。- 支持Base64字符串。格式data:image/[png|jpeg|bmp|webp|heif];base64,[base64 data], 其中[base64 data]为Base64字符串数据。- 支持file:///data/storage路径前缀的字符串,用于读取本应用安装目录下files文件夹下的图片资源。需要保证目录包路径下的文件有可读权限。 |
参数:
| 组件 | 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|---|
| alt12+ | value | PixelMap | 是 | 加载时显示的占位图,支持PixelMap类型。默认值:null |
| verticalAlign | value | ImageSpanAlignment | 是 | 图片基于文本的对齐方式。默认值:ImageSpanAlignment.BOTTOM |
| objectFit | value | ImageFit | 是 | 图片的缩放类型。默认值:ImageFit.Cover |
ImageSpanAlignment
元服务API: 从API version 11开始,该接口支持在元服务中使用。
| 名称 | 描述 |
|---|---|
| TOP | 图片上边沿与行上边沿对齐。 |
| CENTER | 图片中间与行中间对齐。 |
| BOTTOM | 图片下边沿与行下边沿对齐。 |
| BASELINE | 图片下边沿与文本BaseLine对齐。 |
事件
通用事件仅支持点击事件。还支持以下事件:
onComplete12+
onComplete(callback: ImageCompleteCallback)
图片数据加载成功和解码成功时均触发该回调,返回成功加载的图片尺寸。
系统能力: SystemCapability.ArkUI.ArkUI.Full
参数:
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| callback | ImageCompleteCallback | 是 | 图片数据加载成功和解码成功时触发的回调。 |
onError12+
onError(callback: ImageErrorCallback)
图片加载异常时触发该回调。
系统能力: SystemCapability.ArkUI.ArkUI.Full
参数:
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| callback | ImageErrorCallback | 是 | 图片加载异常时触发的回调。 |
ImageCompleteCallback12+
type ImageCompleteCallback = (result: ImageLoadResult) => void
图片加载异常时触发的回调。
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| result | ImageLoadResult | 是 | 图片数据加载成功和解码成功触发回调时返回的对象。 |
ImageLoadResult12+
图片数据加载成功和解码成功触发回调时返回的对象。
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| width | number | 是 | 图片的宽。单位:像素 |
| height | number | 是 | 图片的高。单位:像素 |
| componentWidth | number | 是 | 组件的宽。单位:像素 |
| componentHeight | number | 是 | 组件的高。单位:像素 |
| loadingStatus | number | 是 | 图片加载成功的状态值。**说明:**返回的状态值为0时,表示图片数据加载成功。返回的状态值为1时,表示图片解码成功。 |
| contentWidth | number | 是 | 图片实际绘制的宽度。单位:像素**说明:**仅在loadingStatus返回1时有效。 |
| contentHeight | number | 是 | 图片实际绘制的高度。单位:像素**说明:**仅在loadingStatus返回1时有效。 |
| contentOffsetX | number | 是 | 实际绘制内容相对于组件自身的x轴偏移。单位:像素**说明:**仅在loadingStatus返回1时有效。 |
| contentOffsetY | number | 是 | 实际绘制内容相对于组件自身的y轴偏移。单位:像素**说明:**仅在loadingStatus返回1时有效。 |
LoadingProgress
用于显示加载动效的组件。
创建加载进展组件。
| 组件 | 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|---|
| color | value | ResourceColor | 是 | 加载进度条的前景色。默认值:API version 10及以下:‘#99666666’API version 11及以上:’#ff666666’ |
| enableLoading | value | boolean | 是 | LoadingProgress动画是否显示。默认值:true |
| contentModifier | modifier | ContentModifier | 是 | 在LoadingProgress组件上,定制内容区的方法。modifier: 内容修改器,开发者需要自定义class实现ContentModifier接口。 |
事件
支持通用事件。
LoadingProgressConfiguration12+对象说明
开发者需要自定义class实现ContentModifier接口。
| 参数名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| enableloading | boolean | true | LoadingProgress动画是否显示。默认值:true |
Marquee
跑马灯组件,用于滚动展示一段单行文本。仅当文本内容宽度超过跑马灯组件宽度时滚动,不超过时不滚动。
接口
Marquee(value: { start: boolean, step?: number, loop?: number, fromStart?: boolean, src: string })
卡片能力: 从API version 9开始,该接口支持在ArkTS卡片中使用。
元服务API: 从API version 11开始,该接口支持在元服务中使用。
参数:
| 参数名 | 参数类型 | 必填 | 参数描述 |
|---|---|---|---|
| value | { start: boolean, step?: number, loop?: number, fromStart?: boolean, src: string } | 是 | 配置跑马灯组件的参数。- start:控制跑马灯是否进入播放状态。**说明:有限的滚动次数播放完毕后,不可以通过改变start重置滚动次数重新开始播放。- step:滚动动画文本滚动步长,当step大于Marquee的文本宽度时,取默认值。默认值:6,单位vp- loop:设置重复滚动的次数,小于等于零时无限循环。默认值:-1说明:**ArkTS卡片上该参数设置任意值都仅在可见时滚动一次。- fromStart:设置文本从头开始滚动或反向滚动。默认值:true- src:需要滚动的文本。 |
属性
参数:
| 组件 | 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|---|
| allowScale | value | boolean | 是 | 是否允许文本缩放。默认值:false |
| marqueeUpdateStrategy | value | MarqueeUpdateStrategy | 是 | 跑马灯组件属性更新后,跑马灯的滚动策略。默认值: MarqueeUpdateStrategy.DEFAULT |
事件
onStart
onStart(event: () => void)
开始滚动时触发回调。
卡片能力: 从API version 9开始,该接口支持在ArkTS卡片中使用。
元服务API: 从API version 11开始,该接口支持在元服务中使用。
系统能力: SystemCapability.ArkUI.ArkUI.Full
onBounce
onBounce(event: () => void)
完成一次滚动时触发,若循环次数不为1,则该事件会多次触发。
卡片能力: 从API version 9开始,该接口支持在ArkTS卡片中使用。
元服务API: 从API version 11开始,该接口支持在元服务中使用。
系统能力: SystemCapability.ArkUI.ArkUI.Full
onFinish
onFinish(event: () => void)
滚动全部循环次数完成时触发回调。
卡片能力: 从API version 9开始,该接口支持在ArkTS卡片中使用。
元服务API: 从API version 11开始,该接口支持在元服务中使用。
| 是否允许文本缩放。默认值:false |
| marqueeUpdateStrategy | value | MarqueeUpdateStrategy | 是 | 跑马灯组件属性更新后,跑马灯的滚动策略。默认值: MarqueeUpdateStrategy.DEFAULT |
事件
onStart
onStart(event: () => void)
开始滚动时触发回调。
卡片能力: 从API version 9开始,该接口支持在ArkTS卡片中使用。
元服务API: 从API version 11开始,该接口支持在元服务中使用。
系统能力: SystemCapability.ArkUI.ArkUI.Full
onBounce
onBounce(event: () => void)
完成一次滚动时触发,若循环次数不为1,则该事件会多次触发。
卡片能力: 从API version 9开始,该接口支持在ArkTS卡片中使用。
元服务API: 从API version 11开始,该接口支持在元服务中使用。
系统能力: SystemCapability.ArkUI.ArkUI.Full
onFinish
onFinish(event: () => void)
滚动全部循环次数完成时触发回调。
卡片能力: 从API version 9开始,该接口支持在ArkTS卡片中使用。
元服务API: 从API version 11开始,该接口支持在元服务中使用。
系统能力: SystemCapability.ArkUI.ArkUI.Full
更多推荐
像素点为[R, G, B, A]则过滤后的颜色为 [R’, G’, B’, A’]
2. 从API Version12开始支持@ohos.graphics.drawing的ColorFilter类型作为入参。**说明:**API Version 11及之前,svg类型图源不支持该属性。从API version 12开始,该接口中的DrawingColorfilter类型支持在元服务中使用。其中,svg类型的图源需具有stroke属性。
所有评论(0)