基础组件

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组件的子组件,用于统一管理多个SpanImageSpan的背景色及圆角弧度。

组件 参数名 类型 必填 说明
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支持加载PixelMapResourceStrDrawableDescriptor类型的数据源,支持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

TextContainerSpan组件的子组件,用于显示行内图片

接口

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

Logo

讨论HarmonyOS开发技术,专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐