当前位置：首页 > news >正文

鸿蒙基础组件

news 2024/12/25 2:18:17

一. AlphabetIndexer
可以与容器组件联动用于按逻辑结构快速定位容器显示区域的组件

参数名类型必填说明
arrayValue Array 是字母索引字符串数组，不可设置为空
selected number 是初始选中项索引值若超出索引值范围则取默认值0
class Lxr{
tImg:ResourceStr
names:string
constructor(tImg: ResourceStr, names: string) {
this.tImg = tImg;
this.names = names;
}
}
class Txl{
key:string
lxr:Lxr[]

constructor(key: string, lxr: Lxr[]) {
this.key = key;
this.lxr = lxr;
}

}

@Entry
@Component
struct ComponentPage {
@State message: string = ‘Hello World’;

build() {
Column(){
this.test1()
}

.height('100%')
.width('100%')
.backgroundColor('#ccc')

}

@State strs:string[]=[‘A’,‘B’,‘C’]
@State txls:Txl[]=[
new Txl(‘A’,[
new Lxr( $r (^{'} a pp . m e d ia . 1^{'}),^{'} 哎^{'}), n e w Lx r ($ r(‘app.media.2’),‘哎呀’),
new Lxr( $r (^{'} a pp . m e d ia . 3^{'}),^{'} 奥运^{'}), n e w Lx r ($ r(‘app.media.1’),‘阿里’),
new Lxr( $r (^{'} a pp . m e d ia . 1^{'}),^{'} 阿里巴巴^{'}), n e w Lx r ($ r(‘app.media.2’),‘爱吃’),
new Lxr( $r (^{'} a pp . m e d ia . 3^{'}),^{'} 爱人^{'})]), n e wT x l (^{'} B^{'}, [n e w Lx r ($ r(‘app.media.1’),‘白色的’),
new Lxr( $r (^{'} a pp . m e d ia . 2^{'}),^{'} 部分^{'}), n e w Lx r ($ r(‘app.media.3’),‘博大精深’),
new Lxr( $r (^{'} a pp . m e d ia . 3^{'}),^{'} 把你的^{'}), n e w Lx r ($ r(‘app.media.3’),‘把你的’),
new Lxr( $r (^{'} a pp . m e d ia . 3^{'}),^{'} 不会^{'}), n e w Lx r ($ r(‘app.media.3’),‘部门’)
]),
new Txl(‘C’,[
new Lxr( $r (^{'} a pp . m e d ia . 3^{'}),^{'} 测试^{'}), n e w Lx r ($ r(‘app.media.3’),‘测定’),
new Lxr( $r (^{'} a pp . m e d ia . 3^{'}),^{'} 测得^{'}), n e w Lx r ($ r(‘app.media.3’),‘侧入’),
new Lxr( $r (^{'} a pp . m e d ia . 3^{'}),^{'} 测啊^{'}), n e w Lx r ($ r(‘app.media.3’),‘测温’),
new Lxr( $r (^{'} a pp . m e d ia . 3^{'}),^{'} 测试^{'}), n e w Lx r ($ r(‘app.media.3’),‘测定’),
new Lxr( $r (^{'} a pp . m e d ia . 3^{'}),^{'} 测得^{'}), n e w Lx r ($ r(‘app.media.3’),‘侧入’),
new Lxr( $r (^{'} a pp . m e d ia . 3^{'}),^{'} 测啊^{'}), n e w Lx r ($ r(‘app.media.3’),‘测温’),
new Lxr( $r (^{'} a pp . m e d ia . 3^{'}),^{'} 测试^{'}), n e w Lx r ($ r(‘app.media.3’),‘测定’),
new Lxr( $r (^{'} a pp . m e d ia . 3^{'}),^{'} 测得^{'}), n e w Lx r ($ r(‘app.media.3’),‘侧入’),
new Lxr( $r (^{'} a pp . m e d ia . 3^{'}),^{'} 测啊^{'}), n e w Lx r ($ r(‘app.media.3’),‘测温’),
new Lxr( $r (^{'} a pp . m e d ia . 3^{'}),^{'} 测试^{'}), n e w Lx r ($ r(‘app.media.3’),‘测定’),
new Lxr( $r (^{'} a pp . m e d ia . 3^{'}),^{'} 测得^{'}), n e w Lx r ($ r(‘app.media.3’),‘侧入’),
new Lxr($r(‘app.media.3’),‘测完’)
]),
]
@State selectIndex:number=0
@State strs2:string[]=[] // 显示具体内容
@Builder tou(str:string){
Text(str).width(‘100%’).backgroundColor(‘gray’)
}
@Builder test1(){
Stack(){
List(){
ForEach(this.txls,(txl:Txl,index)=>{
ListItemGroup({header:this.tou(txl.key)}){
ForEach(txl.lxr,(lxr:Lxr,i)=>{
ListItem(){
Row(){
Image(lxr.tImg).width(30).height(30).borderRadius(100)
Text(lxr.names)
}.width(‘100%’)
.backgroundColor(i%2==0?‘#abc’:‘#faf’)
}
})
}
})
}.sticky(StickyStyle.Header)
.onScrollIndex((first)=>{
this.selectIndex=first
})
AlphabetIndexer({arrayValue:this.strs,selected:0})
.font({size:25})
.selectedFont({size:30})
.itemSize(60)
.selected(this.selectIndex)
.usingPopup(true)
.onRequestPopupData((index:number)=>{
//1.清空数组
this.strs2=[]
for (let i=0;i<this.txls[index].lxr.length;i++){
// 添加数据
this.strs2.push(this.txls[index].lxr[i].names)
}
return this.strs2
})
}
.height(‘100%’)
.width(‘100%’)
}

（1）属性值
属性值
参数名类型必填说明
color ResourceColor 是文字颜色
selectedColor ResourceColor 是选中项文字颜色
popupColor ResourceColor 是提示弹窗文字颜色
selectedBackgroundColor ResourceColor 是选中项背景颜色
popupBackground ResourceColor 是
提示弹窗背景色。

弹窗的背景模糊材质效果会对背景色产生影响，可通过设置popupBackgroundBlurStyle属性值为NONE关闭背景模糊材质效果

usingPopup boolean 是
是否使用提示弹窗

默认值：false

selectedFont Font 是选中项文字样式
popupFont Font 是提示弹窗字体样式
font Font 是字母索引条默认字体样式
itemSize string|number 是字母索引条字母区域大小，字母区域为正方形，即正方形边长。不支持设置为百分比
alignStyle IndexerAlign 是
字母索引条弹框的对齐样式，支持弹窗显示在索引条右侧和左侧。

默认值：IndexerAlign.End

alignStyle offset 否提示弹窗与索引条之间间距，大于等于0为有效值，在不设置或设置为小于0的情况下间距与popupPosition.x相同。与popupPosition同时设置时，水平方向上offset生效，竖直方向上popupPosition.y生效。
selected number 是选中项索引值
默认值：0
popupPosition position 是弹出窗口相对于索引器条上边框中点的位置
popupSelectedColor ResourceColor 是提示弹窗非字母部分选中文字色
popupUnselectedColor ResourceColor 是提示弹窗非字母部分未选中文字色
popupItemFont Font 是提示弹窗非字母部分字体样式
popupItemBackgroundColor ResourceColor 是提示弹窗非字母部分背景色
autoCollapse boolean 是是否使用自适应折叠模式
popupItemBorderRadius number 是设置提示弹窗索引项背板圆角半径。
itemBorderRadius number 是设置索引项背板圆角半径
popupBackgroundBlurStyle BlurStyle 是
设置提示弹窗的背景模糊材质

弹窗的背景模糊材质效果会对背景色popupBackground产生影响，可通过设置属性值为NONE关闭背景模糊材质效果。

popupTitleBackground ResourceColor 是设置提示弹窗首个索引项背板颜色
enbleHapticFeedback boolean 否
支持触控反馈

默认值：true

IndexAlign枚举说明
名称说明
Left 弹窗显示在索引条右侧
Right 弹窗显示在索引条左侧
START
在LTR场景下，弹框显示在索引条右侧的位置。

在RTL场景下，弹框显示在索引条左侧的位置。

END
在LTR场景下，弹框显示在索引条左侧的位置。

在RTL场景下，弹框显示在索引条右侧的位置。

（2）事件
参数名类型必填说明
onSelect number 是索引条选中回调，返回值为当前选中索引。
onRequestPopupData number 是选中字母索引后，请求索引提示弹窗显示内容回调。
onPopupSelect number 是字母索引提示弹窗字符串列表选中回调。
二. Blank
空白填充组件，在容器主轴方向上，空白填充组件具有自动填充容器空余部分的能力。仅当父组件为Row/Column/Flex时生效。

Blank在父容器Row、Column、Flex主轴方向上未设置大小时会自动拉伸、压缩，设置了大小或容器自适应子节点大小时不会自动拉伸、压缩。

Blank设置主轴方向大小（size）与min时约束关系为max(min, size)。

Blank在父容器交叉轴上设置大小时不会撑满父容器交叉轴，交叉轴不设置大小时alignSelf默认值为ItemAlign.Stretch，会撑满容器交叉轴。

@Builder test2(){
Row(){
Text(‘左边’)
Blank().color(‘red’)
Text(‘右边’)
}
.width(‘100%’)
.backgroundColor(‘#abcdef’)
Column(){
Text(‘上边’)
Blank().color(‘red’)
Text(‘下边’)
}
.height(100).width(‘100%’)
.backgroundColor(‘#abc’)
}

三. CalendarPicker
日期选择器组件，提供下拉日历弹窗，可以让用户选择日期。

@State selectDate:Date=new Date(‘2023-09-08’)
now:Date=new Date(‘2023-08-09’)
@Builder CalendarTest(){
Text(‘日期文本’)
CalendarPicker({
hintRadius:10,// 底板的圆角0-16
selected:this.now // 默认选中的日期
})
// .edgeAlign(CalendarAlign.CENTER,{dx:10,dy:20})
.textStyle({
color:‘red’,
font:{size:30,weight:900}
})
.onChange(val=>{
this.selectDate=val
})
Text(‘选中的日期’+this.selectDate)

}

（1）属性
edgeAlign：设置选择器与入口组件的对齐方式
参数名类型必填说明
alignType CalendarAlign 是
对齐方式类型

默认值：CalendarAlign .END

offset Offset 否
按照对齐类型对齐后，选择器相对入口组件的偏移量。

默认值：{dx: 0, dy: 0}

CalendarAlign枚举
名称描述
Start 设置选择器与入口组件左对齐的对齐方式
Center 设置选择器与入口组件居中对齐的对齐方式。
END 设置选择器与入口组件右对齐的对齐方式。
textStyle：入口区的文本颜色、字号、字体粗细。
参数名类型必填说明
value PickerTextStyle 是设置入口区的文本颜色、字号、字体粗细
CalendarOptions对象说明
名称类型必填说明
hintRadius number|Resource 否
描述日期选中态底板样式。

默认值：底板样式为圆形。

selected Date 否
设置选中项的日期。选中的日期未设置或日期格式不符合规范则为默认值。

默认值：当前系统日期。

（2）事件
onChange：选择日期时触发该事件。
参数名类型必填说明
value Date 是选中的日期值
四. Checkbox
提供多选框组件，通常用于某选项的打开或关闭。

（1）属性
CheckboxOptions对象说明
名称类型必填说明
name string 否用于指定多选框名称。
group string 否
用于指定多选框所属群组的名称（即所属CheckboxGroup的名称）。

说明：

未配合使用CheckboxGroup组件时，此值无用。

indicatorBuilder CustomBuilder 否配置多选框的选中样式为自定义组件。自定义组件与Checkbox组件为中心点对齐显示。indicatorBuilder设置为undefined/null时，默认为indicatorBuilder未设置状态。
参数名类型必填说明
select boolean 是多选框是否选中
selectedColor ResourceColor 是多选框选中状态颜色
unselectedColor ResourceColor 是多选框非选中状态边框颜色
mark MarkStyle 是设置多选框内部图标样式
shape CheckBoxShape 是 CheckBox组件形状, 包括圆形和圆角方形。
contentModifier ContentModifier 是
在CheckBox组件上，定制内容区的方法。

modifier: 内容修改器，开发者需要自定义class实现ContentModifier接口。

CheckBoxShape11+枚举类型说明
名称值说明
CIRCLE 0 圆形
ROUNDED_SQUARE 1 圆角方形
CheckBoxConfiguration对象说明

开发者需要自定义class实现ContentModifier接口。

名称类型只读可选说明
name string 否否当前多选框名称。
selected boolean 否否
指示多选框是否被选中。

如果select属性没有设置默认值是false。

如果设置select属性，此值与设置select属性的值相同。

triggerChange Callback 否否触发多选框选中状态变化。
（2）事件
onChange：当选中状态发生变化时，触发该回调。
参数名类型必填说明
value boolean 是返回true时，表示已选中。返回false时，表示未选中
@Builder conStyleTest(){
SymbolGlyph($r(‘sys.symbol.star_fill’))
.fontColor([‘red’])
}
@Builder conStyleTest1(num:number){
Text(num>99?‘99+’:num.toString())
.fontSize(num>99?10:16)
}
@Builder cheakBoxTest(){
Row(){
Text(‘爱好:’)
Checkbox({
name:‘ah’,
group:‘hobby’
})
.select(true)
.selectedColor(‘red’)
.unselectedColor(‘blue’)
.mark({
strokeColor:‘green’,
size:20,strokeWidth:100
})
.shape(CheckBoxShape.ROUNDED_SQUARE)
Checkbox({
name:‘ah’,
group:‘hobby’,
indicatorBuilder:()=>{
this.conStyleTest()
}
})
Checkbox({
name:‘ah’,
group:‘hobby’,
indicatorBuilder:()=>{
this.conStyleTest1(10)
}
})

}
Column(){Row(){Text('全选')CheckboxGroup({group:'ah'})}Row(){Checkbox({name:'c',group:'ah'})Text('唱')Checkbox({name:'c',group:'ah'})Text('跳')Checkbox({name:'c',group:'ah'})Text('rap')}}

}

五. ContainerSpan
Text组件的子组件，用于统一管理多个Span、ImageSpan的背景色及圆角弧度。

参数名类型必填说明
textBackgroundStyle TextBackgroundStyle 是
文本背景样式。

默认值：

{

color: Color.Transparent,

radius: 0

}

attributeModiffer
AttributeModifier
是设置组件的动态属性。
@Builder container(){
Text(){
SymbolSpan( $KaTeX parse error: Expected '}', got 'EOF' at end of input: \dots ImageSpan($ r(‘app.media.1’))
.height(30)
}
.textBackgroundStyle({color:‘#abc’,radius:5})
}.width(‘100%’)
}

六. DataPanel
数据面板组件，用于将多个数据占比情况使用占比图进行展示。

DataPanelOptions对象说明
名称类型必填说明
values number【】是数据值列表，最多包含9个数据，大于9个数据则取前9个数据。若数据值小于0则置为0。
max number 否

max大于0，表示数据的最大值。
max小于等于0，max等于value数组各项的和，按比例显示。

默认值：100

type DataPanelType 否
数据面板的类型（不支持动态修改）。

默认值：DataPanelType.Circle

DataPanelType8+枚举说明
名称说明
Line 线性数据面板
Circle 环形数据面板
参数名类型必填说明
closeEffect boolean 是
关闭数据占比图表旋转动效和投影效果。

默认值：false

valueColoes Array<ResourceColor | LinearGradient> 是设置各数据段颜色
trackBackgroundColor ResourceColor 是
底板颜色。

默认值：‘#08182431’，格式为十六进制ARGB值，前俩位代表透明度。

strokeWidth length 是设置圆环粗细。数据面板的类型为DataPanelType.Line时该属性不生效。
trackShadow DataPanelShadowOptions 是
投影样式。

说明：

设置null为不开启投影。

contentModiffer ContentModifier 是
在DataPanel组件上，定制内容区的方法。

modifier: 内容修改器，开发者需要自定义class实现ContentModifier接口。

DatePanelShadowOptions Array<ResourceColor | LinearGradient> 否
各数据段投影的颜色。

默认值：与valueColors值相同

说明：

若设置的投影颜色的个数少于数据段个数时，则显示的投影颜色的个数和设置的投影颜色个数一致。

若设置的投影颜色的个数多于数据段个数时，则显示的投影颜色的个数和数据段个数一致。

LinearGradient ColorStop[] 是存储渐变颜色和渐变点。
ColorStop对象说明：颜色断点类型，用于描述渐进色颜色断点。
名称类型必填说明
color ResourceColor 是颜色值
offset length 是
渐变色断点（0~1之间的比例值，若数据值小于0则置为0，若数据值大于1则置为1）。

说明：

若传入字符串类型且内容为数字，则转换为对应的数值。

例如’10vp’转换为10，'10%'转换为0.1。

DataPanelConfiguration1对象说明

开发者需要自定义class实现ContentModifier接口。

名称类型必填说明
values number[] 是当前DataPanel的数据值，最大长度为9。
maxValue number 是
DataPanel显示的最大值。

默认值：100。

@State ages:number[]=[18,19,18,19,27,40,30,10,20]
@Builder DatePanelTest(){
DataPanel({values:this.ages,max:300,type:DataPanelType.Circle})
// .width(200)
.closeEffect(false)
.valueColors([Color.Black,Color.Blue,Color.Brown,Color.Gray,Color.Green,Color.Orange,Color.Pink])
.trackBackgroundColor(‘#03ff1f’)
.strokeWidth(50)
DataPanel({values:this.ages,max:300,type:DataPanelType.Line})

}

七. DatePicker
日期选择器组件，用于根据指定日期范围创建日期滑动选择器。

（1）DatePickerOptions对象说明
名称类型必填说明
start Date 否
指定选择器的起始日期。

默认值：Date(‘1970-1-1’)

end Date 否
指定选择器的结束日期。

默认值：Date(‘2100-12-31’)

selected Date 否
设置选中项的日期。

默认值：当前系统日期

从API version 10开始，该参数支持$$双向绑定变量。

（2）异常情形说明:
异常情形对应结果
起始日期晚于结束日期，选中日期未设置起始日期、结束日期和选中日期都为默认值
起始日期晚于结束日期，选中日期早于起始日期默认值起始日期、结束日期都为默认值，选中日期为起始日期默认值
起始日期晚于结束日期，选中日期晚于结束日期默认值起始日期、结束日期都为默认值，选中日期为结束日期默认值
起始日期晚于结束日期，选中日期在起始日期与结束日期默认值范围内起始日期、结束日期都为默认值，选中日期为设置的值
选中日期早于起始日期选中日期为起始日期
选中日期晚于结束日期选中日期为结束日期
起始日期晚于当前系统日期，选中日期未设置选中日期为起始日期
结束日期早于当前系统日期，选中日期未设置选中日期为结束日期
日期格式不符合规范，如‘1999-13-32’ 取默认值
起始日期或结束日期早于系统有效范围起始日期或结束日期取起始日期默认值
起始日期或结束日期晚于系统有效范围起始日期或结束日期取结束日期默认值
起始日期与结束日期同时早于系统有效范围起始日期与结束日期取系统有效范围最早日期
起始日期与结束日期同时晚于系统有效范围起始日期与结束日期取系统有效范围最晚日期
系统日期范围：1900-1-31 ~ 2100-12-31

选中日期会在起始日期与结束日期异常处理完成后再进行异常情形判断处理

（3）属性
参数名类型必填说明
lunar boolean 是
日期是否显示农历。

true：展示农历。
false：不展示农历。

默认值：false

disappearTextStyle PickerTextStyle 是所有选项中最上和最下两个选项的文本颜色、字号、字体粗细。
textStyle PickerTextStyle 是所有选项中除了最上、最下及选中项以外的文本颜色、字号、字体粗细。
selectedTextStyle PickerTextStyle 是选中项的文本颜色、字号、字体粗细。
PickerTextStyle类型说明
参数名参数类型必填参数描述
color ResourceColor 否文本颜色
font Font 否文本样式，picker只支持字号、字体粗细的设置。
（4）事件
参数名类型必填说明
onChange DatePickerResult 是返回选中的时间。
onDateChange Date 是返回选中的时间，年月日为选中的日期，时分取决于当前系统时间的时分，秒恒为00。
DatePickerResult对象说明
名称类型只读可选说明
year number 否否选中日期的年
month number 否否选中日期的月(0~11)，0表示1月，11表示12月。
day number 否否选中日期的日。
@Builder datePickerTest(){
DatePicker({start:new Date(‘2020-01-01’),end:new Date(),selected:new Date()})
.lunar(true)
.disappearTextStyle({
color:‘red’,
font:{size:16,weight:700}
})
.textStyle({
color:‘green’,
font:{size:20,weight:700}
})
.selectedTextStyle({
color:Color.Pink,
font:{size:30,weight:700}
})

}

八. Divider
提供分隔器组件，分隔不同内容块/内容元素。

（1）属性
参数名类型必填说明
vertical boolean 是
使用水平分割线还是垂直分割线。

false：水平分割线；true：垂直分割线。

默认值：false

color ResourceColor 是分割线颜色。
storkWidth number|string 是
分割线宽度。

默认值：1px

单位：vp

说明：

分割线的宽度不支持百分比设置。优先级低于通用属性height，超过通用属性设置大小时，按照通用属性进行裁切。部分设备硬件中存在1像素取整后分割线不显示问题，建议使用2像素。

lineCap LineCapStyle 是
分割线的端点样式。

默认值：LineCapStyle.Butt

Divider()
.width(100).height(100)
.vertical(true).color(‘red’).strokeWidth(10)
.lineCap(LineCapStyle.Square)

九.Gauge
数据量规图表组件，用于将数据展示为环形图表。

（1）接口
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支持负数。

（2）属性
参数名类型必填说明
value number 是
量规图的数据值，可用于动态修改量规图的数据值。

默认值：0

angle number 是
起始角度位置，时钟0点为0度，顺时针方向为正角度。

默认值：0

engAngle number 是
终止角度位置，时钟0点为0度，顺时针方向为正角度。

默认值：360

colors ResourceColor| LinearGradient| Array<[ResourceColor | LinearGradient, number]> 是量规图的颜色，支持分段颜色设置
strokeWidth Length 是
环形量规图的环形厚度。

默认值：4

单位：vp

说明：

设置小于0的值时，按默认值显示。

不支持百分比。

description CustomBuilder 是
说明内容。

说明：

@Builder中的内容由开发者自定义，建议使用文本或者图片。

若自定义部分的宽高为百分比形式，则基准范围为圆环直径的44.4%*25.4%的矩形（图片为28.6%*28.6%），距离圆环底部0vp，左右居中。

trackShadow GaugeShadowOptions 是
阴影样式。

说明：

阴影颜色与圆环颜色一致。

设置null为不开启投影。

indicator GaugeShadowOptions 是
指针样式。

说明：

设置null则不显示指针。

privacySensitive [Optional] 是
设置隐私敏感，隐私模式下Gauge指针指向0位置，最大值最小值文本将被遮罩，量程显示灰色或者底色。

说明：

设置null则不敏感。

需要卡片框架支持。

contentModiffer ContentModifier 是
在Gauge组件上，定制内容区的方法。

modifier: 内容修改器，开发者需要自定义class实现ContentModifier接口。

GaugeIndicatorOptions对象说明
名称类型必填说明
icon ResourceStr 否
图标资源路径。

说明：

不配置则使用默认的三角形样式指针。

支持使用svg格式的图标，若使用其他格式，则使用默认的三角形样式指针。

space Dimension 否指针距离圆环外边的间距。(不支持百分比)
GaugeConfiguration对象说明
名称类型必填说明
value number 是当前数据值
min number 是当前数据段最小值
max number 是当前数据段最大值
@Builder
function cuss(arrs_0:GaugeConfiguration){
Column(){
Text(arrs_0.value+‘%’).textAlign(TextAlign.Center).fontSize(20)
Gauge({
value:arrs_0.value,
min:arrs_0.min,
max:arrs_0.max
})
}
.width(‘100%’)

}

class myTest implements ContentModifier{
value:number
max:number
min:number

constructor(value: number, max: number, min: number) {
this.value = value
this.max = max
this.min = min
}

applyContent(): WrappedBuilder<[GaugeConfiguration]> {
return wrapBuilder(cuss)
}

}

@Entry
@Component
struct Component2Page {
@State message: string = ‘Hello World’;

build() {
Column(){
// this.container()
// this.DatePanelTest()
// this.datePickerTest()
this.gaugeTest()
// this.imageTest()
// this.loadTest()
// this.marqueeTest()
}

.height('100%')
.width('100%')

}

@Builder datePickerTest(){
DatePicker({start:new Date(‘2020-01-01’),end:new Date(),selected:new Date()})
.lunar(true)
.disappearTextStyle({
color:‘red’,
font:{size:16,weight:700}
})
.textStyle({
color:‘green’,
font:{size:20,weight:700}
})
.selectedTextStyle({
color:Color.Pink,
font:{size:30,weight:700}
})

Divider().width(100).height(100).vertical(true).color('red').strokeWidth(10).lineCap(LineCapStyle.Square)

}

@State num:number=50
lColor:LinearGradient=new LinearGradient([{color:‘red’,offset:0},{color:‘blue’,offset:1}])
@Builder cus(num:number){
Row(){
Text(‘0’+‘%’)
.textAlign(TextAlign.Center)
.fontSize(20)
Text(‘50’+‘%’)
.textAlign(TextAlign.Center)
.fontSize(20)
Text(‘100’+‘%’)
.textAlign(TextAlign.Center)
.fontSize(20)
}
.width(‘100%’)

}

@Builder gaugeTest(){
Gauge({value:this.num,max:100,min:0}){
Text(this.num+‘%’)
.textAlign(TextAlign.Center)
.fontSize(30)
}
.value(this.num)
.startAngle(270) //开始的角度
.endAngle(90) // 结束的角度
.colors(this.lColor)
.strokeWidth(20)
.description(this.cus(this.num))
.trackShadow({radius:50,offsetX:10,offsetY:20})
.indicator({icon:$r(‘sys.symbol.paperplane’),space:5})

Gauge({value:this.num,max:100,min:0}).contentModifier(new myTest(this.num,100,0))Button('增加').onClick(()=>{this.num+=10})
Button('减少').onClick(()=>{this.num-=10
})

}

十. ImageAnimator
提供帧动画组件来实现逐帧播放图片的能力，可以配置需要播放的图片列表，每张图片可以配置时长。

(1) 属性
参数名类型必填说明
images Array 是
设置图片帧信息集合。每一帧的帧信息(ImageFrameInfo)包含图片路径、图片大小、图片位置和图片播放时长信息，详见ImageFrameInfo属性说明。

默认值：[]

state AnimationStatus 是控制播放状态。
duration number 是
播放时长。

value为0时，不播放图片。

value的改变只会在下一次循环开始时生效。

reverse boolean 是
播放方向。

false表示从第1张图片播放到最后1张图片，true表示从最后1张图片播放到第1张图片。

默认值：false

fixedSize boolean 是
设置图片大小是否固定为组件大小。 true表示图片大小与组件大小一致，此时设置图片的width 、height 、top 和left属性是无效的。false表示每一张图片的width 、height 、top和left属性都要单独设置。

默认值：true

fillMode FillMode 是
当前播放方向下，动画开始前和结束后的状态。

默认值：FillMode.Forwards

iterations number 是
默认播放一次，设置为-1时表示无限次播放。

默认值：1

ImageFrameInfo对象说明
名称类型必填说明
src string | Resource| PixelMap 是图片路径，图片格式为jpg、jpeg、svg、png、bmp、webp、ico和heif，从API Version9开始支持Resource类型的路径，从API version 12开始支持PixelMap类型。
width number|string 否
图片宽度。

默认值：0

height number|string 否
图片高度。

默认值：0

Top number|string 否
图片相对于组件左上角的纵向坐标。

默认值：0

left number|string 否
图片相对于组件左上角的横向坐标。

默认值：0

duration number 否每一帧图片的播放时长，单位毫秒。
（2）事件
事件名说明
onStart 状态回调，动画开始播放时触发。
onPause

状态回调，动画暂停播放时触发。
onRepeat 状态回调，动画重复播放时触发。
onCancel 状态回调，动画返回最初状态时触发。
onFinish 状态回调，动画播放完成时或者停止播放时触发。
@State state:AnimationStatus=AnimationStatus.Initial
@Builder imageTest(){
ImageAnimator()
.images([
{src: $KaTeX parse error: Expected 'EOF', got '}' at position 67: \dots,left:60,top:20}̲, {src:$ r(‘app.media.2’),width:200,height:200,duration:1000,left:60,top:20},
{src: $KaTeX parse error: Expected 'EOF', got '}' at position 67: \dots,left:60,top:20}̲, {src:$ r(‘app.media.1’),width:200,height:200,duration:1000,left:60,top:20},
{src: $KaTeX parse error: Expected 'EOF', got '}' at position 67: \dots,left:60,top:20}̲, {src:$ r(‘app.media.3’),width:200,height:200,duration:1000,left:60,top:20},
{src: $KaTeX parse error: Expected 'EOF', got '}' at position 67: \dots,left:60,top:20}̲, {src:$ r(‘app.media.2’),width:200,height:200,duration:1000,left:60,top:20},
{src: $KaTeX parse error: Expected 'EOF', got '}' at position 67: \dots,left:60,top:20}̲, {src:$ r(‘app.media.1’),width:200,height:200,duration:1000,left:60,top:20},
{src: $KaTeX parse error: Expected 'EOF', got '}' at position 67: \dots,left:60,top:20}̲, {src:$ r(‘app.media.3’),width:200,height:200,duration:1000,left:60,top:20}
]).width(‘100%’)
.state(this.state) //是否开启播放
.reverse(true) //播放的方向
.fixedSize(false)
.fillMode(FillMode.Both)
.iterations(1) // 播放的次数
.onStart(()=>{
console.log(‘开始了’);
})
.onPause(()=>{
console.log(‘暂停了’);
})
.onRepeat(()=>{
console.log(‘重复播放’)
})
.onCancel(()=>{
console.log(‘返回最初状态’)
})
.onFinish(()=>{
console.log(‘播放完成’)
})
Button(‘初始’).onClick(()=>{
this.state=AnimationStatus.Initial
})
Button(‘开始’).onClick(()=>{
this.state=AnimationStatus.Running
})
Button(‘暂停’).onClick(()=>{
this.state=AnimationStatus.Paused
})
Button(‘停止’).onClick(()=>{
this.state=AnimationStatus.Stopped
})
}

十一. LoadingProgress
用于显示加载动效的组件。

（1）属性
参数名类型必填说明
color ResourceColor 是加载进度条的前景色
enableLoading boolean 是
LoadingProgress动画是否显示。

默认值：true

contentModdifier ContentModifier 是
在LoadingProgress组件上，定制内容区的方法。

modifier: 内容修改器，开发者需要自定义class实现ContentModifier接口。

@Builder loadTest(){
LoadingProgress()
.color(‘red’)
.width(100)
.enableLoading(true) // 是否开启动画显示
Text('donghua ')
}

十二. Marquee
跑马灯组件，用于滚动展示一段单行文本。仅当文本内容宽度超过跑马灯组件宽度时滚动，不超过时不滚动。

（1）接口
Marquee(value: { start: boolean, step?: number, loop?: number, fromStart?: boolean, src: string })

参数名类型必填说明
value start：boolean 是 start：控制跑马灯是否进入播放状态。
value step?:number 是 step：滚动动画文本滚动步长，当step大于Marquee的文本宽度时，取默认值。
value loop?:number 是
loop：设置重复滚动的次数，小于等于零时无限循环。

默认值：-1

value fromStart?:boolean 是
fromStart：设置文本从头开始滚动或反向滚动。

默认值：true

value src:string 是 src：需要滚动的文本。
（2）属性
参数名类型必填说明
fontColor ResourceColor 是字体颜色
fontSize Length 是字体大小。fontSize为number类型时，使用fp单位。字体默认大小16fp。不支持设置百分比字符串。
fontWeight number | FontWeight | string 是文本的字体粗细，number类型取值[100, 900]，取值间隔为100，默认为400，取值越大，字体越粗。string类型仅支持number类型取值的字符串形式
fontFamily string|Resource 是字体列表。默认字体’HarmonyOS Sans’。
allowScale boolean 是
是否允许文本缩放。

默认值：false

说明：

仅当fontSize为fp单位时生效。

marqueeUpdateStrategy MarqueeUpdateStrategy 是
跑马灯组件属性更新后，跑马灯的滚动策略。

默认值: MarqueeUpdateStrategy.DEFAULT

（3）事件
参数说明
onStart 当滚动的文本内容变化或者开始滚动时触发回调
onBounce 完成一次滚动时触发，若循环次数不为1，则该事件会多次触发。
onFinish 滚动全部循环次数完成时触发回调。
@Builder marqueeTest(){
Marquee({start:true,step:6,loop:-1,fromStart:true,
src:‘这是滚动的文字不得不哈睡觉哦到时间到死u都i饿啊的就的就哦啊司机哦啊’})
.width(100)
.backgroundColor(‘#abcdef’)
.marqueeUpdateStrategy(MarqueeUpdateStrategy.PRESERVE_POSITION)
}

十三.Menu
以垂直列表形式显示的菜单。

Menu组件需和bindMenu或bindContextMenu方法配合使用，不支持作为普通组件单独使用。

Menu的子组件包含MenuItem、MenuItemGroup

菜单和菜单项宽度计算规则：

布局过程中，期望每个菜单项的宽度一致。若子组件设置了宽度，则以尺寸计算规则为准。

不设置宽度的情况：菜单组件会对子组件MenuItem、MenuItemGroup设置默认2栅格的宽度，若菜单项内容区比2栅格宽，则会自适应撑开。

设置宽度的情况：菜单组件会对子组件MenuItem、MenuItemGroup设置减去padding后的固定宽度。

1.Menu属性
参数名类型必填说明
font Font 是
Menu中所有文本的尺寸。

默认值：

{

size: 16,

family: ‘HarmonyOS Sans’,

weight: FontWeight.Medium,

style: FontStyle.Normal

}

fontColor ResourceColor 是统一设置Menu中所有文本的颜色。
radius Dimension|BorderRadiuses 是 Menu边框圆角半径。
width Length 是 Menu边框宽度
menultemDivider DividerStyleOptions|undefined 是
设置menuItem分割线样式。

-strokeWidth:分割线的线宽。

-color：分割线的颜色。

-startMargin：分割线与menuItem侧边起端的距离。

-endMargin：分割线与menuItem侧边结束端的距离。

menuItemGroupDivider DividerStyleOptions|undefined 是
设置menuItemGroup顶部和底部分割线样式。

-strokeWidth:分割线的线宽, 默认值是1px。

-color：分割线的颜色, 默认值是 #33000000。

-startMargin：分割线与menuItemGroup侧边起端的距离, 默认值是16。

-endMargin：分割线与menuItemGroup侧边结束端的距离, 默认值是16。

subMenuExpandingMode SubMenuExpandingMode 是
Menu子菜单展开样式。

默认值：SubMenuExpandingMode.SIDE_EXPAND

SubMenuExpandingMode 枚举说明
名称说明
SIDE_EXPAND 默认展开样式，子菜单位于同一平面侧边展开
EMBEDDED_EXPAND 直接展开样式，子菜单嵌于主菜单内展开
STACK_EXPAND 堆叠样式，子菜单浮于主菜单上方展开
2. MenuItem
用来展示菜单Menu中具体的item菜单项

（1）接口
MenuItem(value?: MenuItemOptions| CustomBuilder)

MenuItemOptions对象说明
名称类型必填说明
starticon ResourceStr 否 item中显示在左侧的图标信息路径。
content ResourceStr 否 item的内容信息。
endicon ResourceStr 否 item中显示在右侧的图标信息路径
labellnfo ResourceStr 否定义结束标签信息，如快捷方式Ctrl+C等。
buider CustomBuilder 否用于构建二级菜单。
symbolStartIcon SymbolGlyphModiffier 否 item中显示在左侧的HMSymbol图标信息路径。配置该项时，原先startIcon图标不显示。
symbolEndIcon SymbolGlyphModiffier 否 item中显示在右侧的HMSymbol图标信息路径。配置该项时，原先endIcon图标不显示。
（2）MenuItem属性
参数名类型必填说明
selected boolean 是
菜单项是否选中。

默认值：false

selectIcon
boolean|ResourceStr|

SymbolGlyphModiffer

是
菜单项被选中时，是否显示被选中的图标。

默认值：false

true: 菜单项被选中时，显示默认的对勾图标

false: 即使菜单项被选中也不显示图标

ResourceStr: 菜单项被选中时，显示指定的图标

SymbolGlyphModifier: 菜单项被选中时，显示指定的HMSymbol图标。

contentFont Font 是菜单项中内容信息的字体样式
contentFontColor ResourceColor 是菜单项中内容信息的字体颜色。
labelFont Font 是菜单项中标签信息的字体样式
labelFontColor ResourceColor 是菜单项中标签信息的字体颜色
（3）MenuItem事件
参数名类型必填说明
onChange boolean 是
选中状态发生变化时，触发该回调。

返回值为true时，表示已选中，为false时，表示未选中。

MenuItemGrop
该组件用来展示菜单MenuItem的分组。

子组件包含MenuItem子组件

（1）MenuItemGrop接口
MenuItemGroup(value?: MenuItemGroupOptions)

MenuItemGroupOptions对象说明
名称类型必填说明
header ResourceStr | CustomBuilder 否设置对应group的标题显示信息。
footer ResourceStr | CustomBuilder 否设置对应group的尾部显示信息。
@Entry
@Component
struct Component3Page {
@State message: string = ‘Hello World’;

build() {
Column(){

}.height('100%')
.width('100%')
.bindMenu(this.menuTest())

}
// 自定义图标
sIcon:SymbolGlyphModifier= new SymbolGlyphModifier( $r (^{'} sys . sy mb o l . c a r^{'})) e I co n : S y mb o lGl y p h M o d i f i er = n e wS y mb o lGl y p h M o d i f i er ($ r(‘sys.symbol.person_crop_circle_fill_1’))

// Menu菜单组件
@Builder menuTest(){
Menu(){
MenuItem({startIcon: $r (^{'} a pp . m e d ia . 1^{'}), co n t e n t :^{'} 首页^{'}, e n d I co n :$ r(‘app.media.2’),
builder:():void=>this.subMenuTest()
})
.selected(true) //默认选中
.selectIcon(this.sIcon)
.contentFont({size:16,style:FontStyle.Normal,weight:900})
.contentFontColor(‘blue’)
.contentFont({size:16,style:FontStyle.Normal})
.labelFontColor(‘red’)
MenuItem({symbolStartIcon:this.sIcon,content:‘图标选项’,symbolEndIcon:this.eIcon})

// 分组MenuItemGroup({header:'头',footer:'底部'}){MenuItem({symbolStartIcon:this.sIcon,content:'图标选项',symbolEndIcon:this.eIcon})MenuItem({symbolStartIcon:this.sIcon,content:'图标选项',symbolEndIcon:this.eIcon})}}
.backgroundColor('#ccc')
.height(300)
.font({size:20,weight:700,style:FontStyle.Italic})
.fontColor('red')
.radius(10)
.width(200)
.menuItemDivider({strokeWidth:LengthMetrics.vp(2),color:'red',startMargin:LengthMetrics.vp(10),endMargin:LengthMetrics.vp(10)})
// .subMenuExpandingMode(SubMenuExpandingMode.STACK_EXPAND)

}
//菜单子菜单
@Builder subMenuTest(){
Menu(){
MenuItem({content:‘子菜单’})
MenuItem({content:‘子菜单’})
MenuItem({content:‘子菜单’})
}
}

}

十四. Navigation
1.Navigation
Navigation组件是路由导航的根视图容器，一般作为Page页面的根容器使用，其内部默认包含了标题栏、内容区和工具栏，其中内容区默认首页显示导航内容（Navigation的子组件）或非首页显示（NavDestination的子组件），首页和非首页通过路由进行切换。

（1）Navigation接口
Navigation(pathInfos: NavPathStack)：绑定路由栈到Navigation组件。

参数名类型必填说明
pathInfos NavPathStack 是路由栈信息。
（2）Navigation所有属性

title属性：设置页面标题
参数名类型必填说明
value
ResourceStr10+ | CustomBuilder |

NavigationCommonTitle9+ |

NavigationCustomTitle9+

是页面标题，使用NavigationCustomTitle类型设置height高度时，titleMode属性不会生效。字符串超长时，如果不设置副标题，先缩小再换行（2行）最后…截断。如果设置副标题，先缩小最后…截断。
options NavigationTitleOptions 否标题栏选项
NavigationCommonTitle
名称类型必填说明
main string 是设置主标题。
sub string 是设置副标题。
NavigationCustomTitle
名称类型必填说明
builder CustomBuilder 是设置标题栏内容。
height TitleHeight | Length 是设置标题栏高度。
2. Menus属性：设置页面右上角菜单
不支持通过SymbolGlyphModifier对象的fontSize属性修改图标大小、effectStrategy属性修改动效、symbolEffect属性修改动效类型。

设置页面右上角菜单。不设置时不显示菜单项。使用Array 写法时，竖屏最多支持显示3个图标，横屏最多支持显示5个图标，多余的图标会被放入自动生成的更多图标。

参数名类型必填说明
value Array | CustomBuilder 是页面右上角菜单。
3.titleMode属性：设置页面标题栏显示模式
参数名类型必填说明
value NavigationTitleMode 是
页面标题栏显示模式。

默认值：NavigationTitleMode.Free

NavigationTitleMode枚举说明
名称说明
Free
当内容为满一屏的可滚动组件时，标题随着内容向上滚动而缩小（子标题的大小不变、淡出）。向下滚动内容到顶时则恢复原样。

说明：

标题随着内容滚动大小联动的动效在title设置为ResourceStr和NavigationCommonTitle时生效，设置成其余自定义节点类型时字体样式无法变化，下拉时只影响标题栏偏移。

可滚动组件不满一屏时，如果想使用联动效果，就要使用滚动组件提供的edgeEffect接口将options参数设置为true。未滚动状态，标题栏高度与Full模式一致；滚动时，标题栏的最小高度与Mini模式一致。

Mini
固定为小标题模式。

默认值：API version 12之前，只有主标题时，标题栏高度为56vp；同时有主标题和副标题时，标题栏高度为82vp。从API version 12开始，该模式下标题栏高度为56vp。

Full
固定为大标题模式。

默认值：只有主标题时，标题栏高度为112vp；同时有主标题和副标题时，标题栏高度为138vp。

4.toolbarConfiguration属性：设置工具栏内容，不设置时不显示工具栏
不支持通过SymbolGlyphModifier对象的fontSize属性修改图标大小、effectStrategy属性修改动效、symbolEffect属性修改动效类型。

参数名类型必填说明
value Array | CustomBuilder 是
工具栏内容，使用Array写法设置的工具栏有如下特性：

工具栏所有选项均分底部工具栏，在每个均分内容区布局文本和图标。

文本超长时，若工具栏选项个数小于5个，优先拓展选项的宽度，最大宽度与屏幕等宽，其次逐级缩小，缩小之后换行，最后…截断。

竖屏最多支持显示5个图标，多余的图标会被放入自动生成的更多图标。横屏时，如果为Split模式，仍按照竖屏规则显示，如果为Stack模式需配合menus属性的Array使用，底部工具栏会自动隐藏，同时底部工具栏所有选项移动至页面右上角菜单。

使用CustomBuilder写法为用户自定义工具栏选项，除均分底部工具栏外不具备以上功能。

options NavigationToolbarOptions1 否工具栏选项。
5.hideToolBar属性：设置是否隐藏工具栏
参数名类型必填说明
value Boolean 是
是否隐藏工具栏。

默认值：false

true: 隐藏工具栏。

false: 显示工具栏。

6.hideTitleBar属性：设置是否隐藏标题栏
参数名类型必填说明
value Boolean 是
是否隐藏标题栏。

默认值：false

true: 隐藏标题栏。

false: 显示标题栏。

7.hideBackButton属性：设置是否隐藏标题栏中的返回键。
返回键仅针对titleMode为NavigationTitleMode.Mini时才生效。

参数名类型必填说明
value Boolean 是
是否隐藏标题栏中的返回键。

默认值：false

true: 隐藏返回键。

false: 显示返回键。

8.navBarWidth：设置导航栏宽度
仅在Navigation组件分栏时生效。

参数名类型必填说明
value Length 是
导航栏宽度。

默认值：240

单位：vp

undefined：行为不做处理，导航栏宽度与默认值保持一致。

9.navBarPosition：设置导航栏位置
仅在Navigation组件分栏时生效。

参数名类型必填说明
value NavBarPosition 是
导航栏位置。

默认值：NavBarPosition.Start

NavBarPosition枚举说明
名称说明
Start 双栏显示时，主列在主轴方向首部。
End 双栏显示时，主列在主轴方向尾部。
10.mode：设置导航栏的显示模式。
支持Stack、Split与Auto模式。

参数名类型必填说明
value NavigationMode 是
导航栏的显示模式。

默认值：NavigationMode.Auto

自适应：基于组件宽度自适应单栏和双栏。

NavigationMode枚举说明
名称说明
Stack 导航栏与内容区独立显示，相当于两个页面。
Split
导航栏与内容区分两栏显示。

以下navBarWidthRange的值用[minNavBarWidth,maxNavBarWidth]表示

1.当navBarWidth属性的值，在navBarWidthRange属性的值范围以外时，navBarWidth按如下规则显示：

navBarWidth < minNavBarWidth时，navBarWidth修正为minNavBarWidth;

navBarWidth > maxNavBarWidth，且组件宽度 - minContentWidth - 分割线宽度(1vp) > maxNavBarWidth时，navBarWidth修正为maxNavBarWidth;

navBarWidth > maxNavBarWidth，且组件宽度 - minContentWidth - 分割线宽度(1vp) < minNavBarWidth时，navBarWidth修正为minNavBarWidth;

navBarWidth > maxNavBarWidth，且组件宽度 - minContentWidth - 分割线宽度(1vp)在navBarWidthRange范围内，navBarWidth修正为组件宽度 - 分割线宽度(1vp) - minContentWidth。

2.当navBarWidth属性的值，在navBarWidthRange属性的值范围以内时，navBarWidth按如下规则显示：

minNavBarWidth + minContentWidth + 分割线宽度(1vp) >= 组件宽度时，navBarWidth修正为minNavBarWidth；

minNavBarWidth + minContentWidth + 分割线宽度(1vp) < 组件宽度，且navBarWidth + minContentWidth + 分割线宽度(1vp) >= 组件宽度时，navBarWidth修正为组件宽度 - 分割线宽度(1vp) - minContentWidth;

minNavBarWidth + minContentWidth + 分割线宽度(1vp) < 组件宽度，且navBarWidth + minContentWidth + 分割线宽度(1vp) < 组件宽度时，navBarWidth为设置的值。

3.缩小组件尺寸时，先缩小内容区的尺寸至minContentWidth，然后再缩小导航栏的尺寸至minNavBarWidth。若继续缩小，先缩小内容区，内容区消失后再缩小导航栏。

4.设置导航栏为固定尺寸时，若持续缩小组件尺寸，导航栏最后压缩显示。

5.若只设置了navBarWidth属性，则导航栏宽度为navBarWidth，且分割线不可拖动。

Auto
API version 9之前：窗口宽度>=520vp时，采用Split模式显示；窗口宽度<520vp时，采用Stack模式显示。

API version 10及以上：窗口宽度>=600vp时，采用Split模式显示；窗口宽度<600vp时，采用Stack模式显示，600vp等于minNavBarWidth(240vp) + minContentWidth (360vp)。

11.backButtonIcon：设置标题栏中返回键图标
不支持通过SymbolGlyphModifier对象的fontSize属性修改图标大小、effectStrategy属性修改动效、symbolEffect属性修改动效类型。

参数名类型必填说明
value string | PixelMap | Resource | SymbolGlyphModifier12+ 是标题栏中返回键图标。
12.hideNavBar：设置是否隐藏导航栏
设置是否隐藏导航栏。设置为true时，隐藏Navigation的导航栏，包括标题栏、内容区和工具栏。如果此时路由栈中存在NavDestination页面，则直接显示栈顶NavDestination页面，反之显示空白。

参数名类型必填说明
value boolean 是
是否隐藏导航栏。

默认值：false

13.navDestination属性：创建NavDestination组件
创建NavDestination组件。使用builder函数，基于name和param构造NavDestination组件。builder下只能有一个根节点。builder中允许在NavDestination组件外包含一层自定义组件，但自定义组件不允许设置属性和事件，否则仅显示空白。

参数名类型必填说明
builder (name: string, param: unknown) => void 是创建NavDestination组件。name：NavDestination页面名称。param：Navdestination页面详细参数。
14.navBarWidthRange：设置导航栏最小和最大宽度（双栏模式下生效）。
参数名类型必填说明
value [Dimension, Dimension] 是
导航栏最小和最大宽度。

默认值：最小默认值 240，最大默认值为组件宽度的40% ，且不大于 432，如果只设置一个值，则未设置的值按照默认值计算。

单位：vp

15.minContentWidth：设置导航栏内容区最小宽度（双栏模式下生效）
参数名类型必填说明
value Dimension 是
导航栏内容区最小宽度。

默认值：360

单位：vp

undefined：行为不做处理，导航栏内容区最小宽度与默认值保持一致。

Auto模式断点计算：默认600vp，minNavBarWidth(240vp) + minContentWidth (360vp)

仅设置navBarWidth，不支持Navigation分割线拖拽。

navBarWidthRange指定分割线可以拖拽范围。如果不设置值，则按照默认值处理。拖拽范围需要满足navBarWidthRange设置的范围和minContentWidth限制。

Navigation显示范围缩小：a. 缩小内容区大小。如果不设置minContentWidth属性，则可以缩小内容区至0，否则最小缩小至minContentWidth。b. 缩小导航栏大小，缩小时需要满足导航栏宽度大于navBarRange的下限。c. 对显示内容进行裁切。

16.ignoreLayoutSafeArea：控制组件的布局，使其扩展到非安全区域
参数名类型必填说明
types Array 否
配置扩展安全区域的类型。

默认值:

[LayoutSafeAreaType.SYSTEM]

edges Array 否
配置扩展安全区域的方向。

默认值:

[LayoutSafeAreaEdge.TOP, LayoutSafeAreaEdge.BOTTOM]。

组件设置LayoutSafeArea之后生效的条件为：

设置LayoutSafeAreaType.SYSTEM时，组件的边界与非安全区域重合时组件能够延伸到非安全区域下。例如：设备顶部状态栏高度100，组件在屏幕中纵向方位的绝对偏移需要在0到100之间。

若组件延伸到非安全区域内，此时在非安全区域里触发的事件（例如：点击事件）等可能会被系统拦截，优先响应状态栏等系统组件。

17.systemBarStyle：当Navigation中显示Navigation首页时，设置对应系统状态栏的样式。
参数名类型必填说明
style Optional 是系统状态栏样式
不建议混合使用systemBarStyle属性和window设置状态栏样式的相关接口，例如：setWindowSystemBarProperties。
初次设置Navigation/NavDestination的systemBarStyle属性时，会备份当前状态栏样式用于后续的恢复场景。
Navigation总是以首页（页面栈内没有NavDestination时）或者栈顶NavDestination设置的状态栏样式为准。
Navigation首页或者任何栈顶NavDestination页面，如果设置了有效的systemBarStyle，则会使用设置的样式，反之如果之前已经备份了样式，则使用备份的样式，否则不做任何处理。
Split模式下的Navigation，如果内容区没有NavDestination，则遵从Navigation首页的设置，反之则遵从栈顶NavDestination的设置。
仅支持在主窗口的主页面中使用systemBarStyle设置状态栏样式。
仅当Navigation占满整个页面时，设置的样式才会生效，当Navigation没有占满整个页面时，如果有备份的样式，则恢复备份的样式。
当页面设置不同样式时，在页面转场开始时生效。
非全屏窗口下，Navigation/NavDestination设置的状态栏不生效。
（3）Navigation事件
1.onTitleModeChange
当titleMode为NavigationTitleMode.Free时，随着可滚动组件的滑动标题栏模式发生变化时触发此回调。

参数名类型必填说明
titleMode NavigationTitleMode 是标题模式。
2.onNavBarStateChange
导航栏显示状态切换时触发该回调。

参数名类型必填说明
isVisible boolean 是 isVisible为true时表示显示，为false时表示隐藏。
3.onNavigationModeChange
当Navigation首次显示或者单双栏状态发生变化时触发该回调。

参数名类型必填说明
mode NavigationMode 是
NavigationMode.Split: 当前Navigation显示为双栏;

NavigationMode.Stack: 当前Navigation显示为单栏。

4.customNavContentTransition
自定义转场动画回调。

参数名类型必填说明
from NavContentInfo 是退场Destination的页面。
to NavContentInfo 是进场Destination的页面。
operation NavigationOperation 是转场类型。
返回值：

类型说明
NavigationAnimatedTransition | undefined
自定义转场动画协议。

undefined: 返回未定义，执行默认转场动效。

5.NavPathStack
Navigation路由栈，允许被继承。开发者可以在派生类中新增属性方法，也可以重写基类NavPathStack的方法。派生类对象可以替代基类NavPathStack对象使用。

6.pushPath
将info指定的NavDestination页面信息入栈，具体根据options中指定不同的LaunchMode，有不同的行为

参数名类型必填说明
info NavPathInfo 是 NavDestination页面的信息。
options NavigationOptions 否页面栈操作选项。
7.pushPathByName
将name指定的NavDestination页面信息入栈，传递的数据为param，添加onPop回调接收入栈页面出栈时的返回结果，并进行处理。

参数名类型必填说明
name string 是 NavDestination页面名称。
param Object 是 NavDestination页面详细参数。
onPop Callback 是 Callback回调，用于页面出栈时触发该回调处理返回结果。仅pop中设置result参数后触发。
animated boolean 否是否支持转场动画，默认值：true。
8.pushDestination
将info指定的NavDestination页面信息入栈，使用Promise异步回调返回接口调用结果，具体根据options中指定不同的LaunchMode，有不同的行为。

参数：

参数名类型必填说明
info NavPathInfo 是 NavDestination页面的信息。
options NavigationOptions 否页面栈操作选项。
返回值：

类型说明
Promise 异常返回结果。
错误码：

以下错误码的详细介绍请参见通用错误码和ohos.router(页面路由)错误码。

错误码ID 错误信息
401 Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2.Incorrect parameters types; 3. Parameter verification failed.
100001 Internal error.
100005 Builder function not registered.
100006 NavDestination not found.
9.pushDestinationByName
将name指定的NavDestination页面信息入栈，传递的数据为param，并且添加用于页面出栈时处理返回结果的OnPop回调，使用Promise异步回调返回接口调用结果。

参数：

参数名类型必填说明
name string 是 NavDestination页面名称。
param Object 是 NavDestination页面详细参数。
onPop Callback 是 Callback回调，用于页面出栈时处理返回结果。仅pop中设置result参数后触发。
animated boolean 否是否支持转场动画，默认值：true。
返回值：

类型说明
Promise 异常返回结果。
错误码：

以下错误码的详细介绍请参见通用错误码和ohos.router(页面路由)错误码。

错误码ID 错误信息
401 Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2.Incorrect parameters types; 3. Parameter verification failed.
100001 Internal error.
100005 Builder function not registered.
100006 NavDestination not found.
10.replacePath
替换页面栈操作，具体根据options中指定不同的LaunchMode，有不同的行为

参数名类型必填说明
info NavPathInfo 是新栈顶页面参数信息。
options NavigationOptions 否页面栈操作选项。
11.replacePathByName
将当前页面栈栈顶退出，将name指定的页面入栈。

参数：

参数名类型必填说明
name string 是 NavDestination页面名称。
param Object 是 NavDestination页面详细参数。
animated11+ boolean 否是否支持转场动画，默认值：true。
12.removeByIndexes
将页面栈内索引值在indexes中的NavDestination页面删除。

参数：

参数名类型必填说明
indexes Array 是待删除NavDestination页面的索引值数组。
返回值：

类型说明
number 返回删除的NavDestination页面数量。
13.removeByName
将页面栈内指定name的NavDestination页面删除。

参数：

参数名类型必填说明
name string 是删除的NavDestination页面的名字。
返回值：

类型说明
number 返回删除的NavDestination页面数量。
14.removeByNavDestinationId
将页面栈内指定navDestinationId的NavDestination页面删除。navDestinationId可以在NavDestination的onReady回调中获取，也可以在NavDestinationInfo中获取。

参数：

参数名类型必填说明
navDestinationId string 是删除的NavDestination页面的唯一标识符navDestinationId。
返回值：

类型说明
boolean 返回是否成功删除该页面，true为删除成功。
15.pop
弹出路由栈栈顶元素，并触发onPop回调传入页面处理结果。

参数：

参数名类型必填说明
result Object 是页面自定义处理结果。不支持boolean类型。
animated boolean 否是否支持转场动画，默认值：true。
返回值：

类型说明
NavPathInfo 返回栈顶NavDestination页面的信息。
undefined 当路由栈为空时返回undefined。
16.popToName
回退路由栈到由栈底开始第一个名为name的NavDestination页面，并触发onPop回调传入页面处理结果。

参数：

参数名类型必填说明
name string 是 NavDestination页面名称。
result Object 是页面自定义处理结果。不支持boolean类型。
animated boolean 否是否支持转场动画，默认值：true。
返回值：

类型说明
number 如果栈中存在名为name的NavDestination页面，则返回由栈底开始第一个名为name的NavDestination页面的索引，否则返回-1。
17.popToIndex
回退路由栈到index指定的NavDestination页面，并触发onPop回调传入页面处理结果。

参数：

参数名类型必填说明
index number 是 NavDestination页面的位置索引。
result Object 是页面自定义处理结果。不支持boolean类型。
animated boolean 否是否支持转场动画，默认值：true。
18.moveToTop
将由栈底开始第一个名为name的NavDestination页面移到栈顶。

参数：

参数名类型必填说明
name string 是 NavDestination页面名称。
animated11+ boolean 否是否支持转场动画，默认值：true。
返回值：

类型说明
number 如果栈中存在名为name的NavDestination页面，则返回由栈底开始第一个名为name的NavDestination页面的当前索引，否则返回-1。
19.moveIndexToTop
将index指定的NavDestination页面移到栈顶。

参数：

参数名类型必填说明
index number 是 NavDestination页面的位置索引。
animated11+ boolean 否是否支持转场动画，默认值：true。
20.clear
清除栈中所有页面。

参数：

参数名类型必填说明
animated11+ boolean 否是否支持转场动画，默认值：true。
21.getAllPathName
获取栈中所有NavDestination页面的名称。

返回值：

类型说明
Array 返回栈中所有NavDestination页面的名称。
22.getParamByIndex
获取index指定的NavDestination页面的参数信息。

参数：

参数名类型必填说明
index number 是 NavDestination页面的位置索引。
返回值：

类型说明
unknown 返回对应NavDestination页面的参数信息。
undefined 传入index无效时返回undefined。
23.getParamByName
获取全部名为name的NavDestination页面的参数信息。

参数：

参数名类型必填说明
name string 是 NavDestination页面名称。
返回值：

类型说明
Array 返回全部名为name的NavDestination页面的参数信息。
24.getIndexByName
获取全部名为name的NavDestination页面的位置索引。

参数：

参数名类型必填说明
name string 是 NavDestination页面名称。
返回值：

类型说明
Array 返回全部名为name的NavDestination页面的位置索引。
25.size
获取栈大小。

返回值：

类型说明
number 返回栈大小。
26.disableAnimation
参数：

参数名类型必填说明
value boolean 是是否关闭转场动画，默认值：false。
27.getParent
获取父NavPathStack

返回值：

类型说明
NavPathStack | null 如果当前NavPathStack所属Navigation的外层有另外的一层Navigation，则能够获取到外层Navigation的NavPathStack。否则获取不到NavPathStack，返回null。
28.setInterception
设置Navigation页面跳转拦截回调。

参数：

参数名类型必填说明
interception NavigationInterception 是设置Navigation跳转拦截对象。
29.NavPathInfo
路由页面信息。

30.constructor
constructor(name: string, param: unknown, onPop?: Callback, isEntry?: boolean)

参数名类型必填说明
name string 是 NavDestination页面名称。
param unknown 否 NavDestination页面详细参数。
onPop11+ Callback 否 NavDestination页面触发pop时返回的回调。
isEntry12+ boolean 否
标记NavDestination是否为入口页面。

默认值：false

标记清理时机：1、在当前navDestination页面触发一次全局back事件。2、应用退至后台。

说明：

入口NavDestination不响应应用内的全局back事件，直接触发应用间的全局back事件

31.PopInfo
下一个页面返回的回调信息载体。

名称类型必填说明
info NavPathInfo 是页面触发返回时的当前页面信息，系统自动获取填入，无需开发者传入。
result Object 是页面触发返回时的结果，开发者自定义对象。
32.NavContentInfo
跳转Destination信息

名称类型必填说明
name string 否 NavDestination名称，如果为根视图(NavBar)，则返回值为undefined。
index number 是 NavDestination在NavPathStack中的序号，如果为根视图(NavBar)，则返回值为 -1。
mode NavDestinationMode 否 NavDestination的模式，如果是根视图(NavBar)，则返回值为undefined。
param12+ Object 否 NavDestination页面加载的参数。
navDestinationId12+ string 否 NavDestination的唯一标识符。
33.NavigationAnimatedTransition
自定义转场动画协议，开发者需实现该协议来定义Navigation路由跳转的跳转动画。

名称类型必填说明
timeout number 否
动画超时结束时间。

单位：ms。

默认值：可交互动画无默认值，不可交互动画默认超时时间为1000ms。

transition (transitionProxy : NavigationTransitionProxy) => void 是
自定义转场动画执行回调。

transitionProxy: 自定义转场动画代理对象。

onTransitionEnd (success: boolean) => void 否
转场完成回调。

success: 转场是否成功。

isInteractive12+ boolean 否
本次转场动画是否为可交互转场。

默认值：false。

34.NavigationTransitionProxy
自定义转场动画代理对象

名称类型必填说明
from NavContentInfo 是退场页面信息。
to NavContentInfo 是进场页面信息。
isInteractive12+ boolean 否是否为可交互转场动画。
35.finishTransition
结束本次自定义转场动画，开发者需要主动触发该方法来结束本次转场，否则系统会在timeout的时间后结束本次转场。

36.cancelTransition
取消本次交互转场，恢复到页面跳转前的页面栈(不支持取消不可交互转场动画)。

37.updateTransition
更新交互转场动画进度(不可交互动画不支持动画进度设置)。

参数：

参数名类型必填说明
progress number 是设置交互转场动画进度百分比。取值范围 0-1。
38.NavigationInterception
Navigation跳转拦截对象。

名称类型必填说明
willShow InterceptionShowCallback 否页面跳转前拦截，允许操作栈，在当前跳转中生效。
didShow InterceptionShowCallback 否页面跳转后回调。在该回调中操作栈在下一次跳转中刷新。
modeChange InterceptionModeCallback 否 Navigation单双栏显示状态发生变更时触发该回调。
39.InterceptionShowCallback
navigation页面跳转前和页面跳转后的拦截回调

参数名类型必填说明
from NavDestinationContext |NavBar 是页面跳转之前的栈顶页面信息。参数值为navBar，则表示跳转前的页面为Navigation首页。
to NavDestinationContext |NavBar 是页面跳转之后的栈顶页面信息。参数值为navBar，则表示跳转的目标页面为Navigation首页。
operation NavigationOperation 是当前页面跳转类型。
isAnimated boolean 是页面跳转是否有动画。
40.InterceptionModeCallback
navigation单双栏显示状态发生变更时的拦截回调。

参数名类型必填说明
mode NavigationMode 是导航栏的显示模式。
41.NavBar
Navigation首页名字

类型说明
‘navBar’ Navigation首页。
42.NavigationMenuItem
名称类型必填说明
value string 是
API Version 9: 显示菜单栏单个选项的文本。

API Version 10: 不显示菜单栏单个选项的文本。

元服务API：从API version 11开始，该接口支持在元服务中使用。

icon string 否
菜单栏单个选项的图标资源路径。

元服务API：从API version 11开始，该接口支持在元服务中使用。

isEnabled12+ boolean 否
使能状态，默认使能（false未使能，true使能）。

元服务API：从API version 12开始，该接口支持在元服务中使用。

action () => void 否
当前选项被选中的事件回调。

元服务API：从API version 11开始，该接口支持在元服务中使用。

symbolIcon12+ SymbolGlyphModifier 否
菜单栏单个选项的symbol资源（优先级高于icon）。

元服务API：从API version 12开始，该接口支持在元服务中使用。

43.ToolbarItem
名称类型必填说明
value ResourceStr 是工具栏单个选项的显示文本。
icon ResourceStr 否工具栏单个选项的图标资源路径。
action () => void 否当前选项被选中的事件回调。
status ToolbarItemStatus 否
工具栏单个选项的状态。

默认值：ToolbarItemStatus.NORMAL

activeIcon ResourceStr 否工具栏单个选项处于ACTIVE态时的图标资源路径。
symbolIcon12+ SymbolGlyphModifier 否
工具栏单个选项的symbol资源（优先级高于icon）。

元服务API：从API version 12开始，该接口支持在元服务中使用。

activeSymbolIcon12+ SymbolGlyphModifier 否
工具栏单个选项处于ACTIVE态时的symbol资源（优先级高于activeIcon）。

元服务API：从API version 12开始，该接口支持在元服务中使用。

ToolbarItemStatus枚举说明
名称说明
NORMAL 设置工具栏单个选项为NORMAL态，该选项显示默认样式，可以触发Hover，Press，Focus事件并显示对应的多态样式。
DISABLED 设置工具栏单个选项为DISABLED态，该选项显示DISABLED态样式，并且不可交互。
ACTIVE 设置工具栏单个选项为ACTIVE态，该选项通过点击事件可以将icon图标更新为activeIcon对应的图片资源。
44.NavigationOperation枚举说明
名称说明
PUSH 本次转场为页面进场。
POP 本次转场为页面退场。
REPLACE 本次转场为页面替换。
45.BarStyle枚举说明
名称说明
STANDARD 标题栏与内容区采用上下布局。
STACK 标题栏与内容区采用层叠布局，标题栏布局在内容区上层。
46.NavigationTitleOptions
名称类型必填说明
backgroundColor ResourceColor 否
标题栏背景颜色，不设置时为系统默认颜色。

元服务API：从API version 11开始，该接口支持在元服务中使用。

backgroundBlurStyle BlurStyle 否
标题栏背景模糊样式，不设置时关闭背景模糊效果。

元服务API：从API version 11开始，该接口支持在元服务中使用。

barStyle12+ BarStyle 否
标题栏布局方式设置。

默认值：BarStyle.STANDARD

元服务API：从API version 12开始，该接口支持在元服务中使用。

paddingStart12+ LengthMetrics 否
标题栏起始端内间距。

仅支持以下任一场景:

显示返回图标，即hideBackButton为false；
使用非自定义标题，即标题value类型为ResourceStr或NavigationCommonTitle。

默认值：

LengthMetrics.resource($r(‘sys.float.margin_left’))。

元服务API：从API version 12开始，该接口支持在元服务中使用。

paddingEnd12+ LengthMetrics 否
标题栏结束端内间距。

仅支持以下任一场景:

使用非自定义菜单，即菜单value为Array；
没有右上角菜单，且使用非自定义标题，即标题value类型为ResourceStr或NavigationCommonTitle。

默认值：

LengthMetrics.resource($r(‘sys.float.margin_right’))。

元服务API：从API version 12开始，该接口支持在元服务中使用。

mainTitleModifier13+ TextModifier 否
主标题属性修改器。

有如下几点使用规则：

通过Modifier设置的属性会覆盖系统默认的属性（如果Modifier设置了fontSize, maxFontSize, minFontSize任一属性，则系统设置的大小相关属性不生效，以开发者的设置为准）；
不设该属性或者设置了异常值，则恢复系统默认设置；
Free模式下设置字体大小时，原有滑动改变标题大小的效果失效。

元服务API：从API version 13开始，该接口支持在元服务中使用。

subTitleModifier13+ TextModifier 否
子标题属性修改器。

有如下几点使用规则：

通过Modifier设置的属性会覆盖系统默认的属性（如果Modifier设置了fontSize, maxFontSize, minFontSize任一属性，则系统设置的大小相关属性不生效，以开发者的设置为准）；
不设该属性或者设置了异常值，则恢复系统默认设置。

元服务API：从API version 13开始，该接口支持在元服务中使用。

47.NavigationToolbarOptions
名称类型必填说明
backgroundColor ResourceColor 否工具栏背景颜色，不设置时为系统默认颜色。
backgroundBlurStyle BlurStyle 否工具栏背景模糊样式，不设置时关闭背景模糊效果。
48.LaunchMode枚举说明
名称说明
STANDARD
系统默认的栈操作模式。

push操作会将指定的NavDestination入栈；replace操作会将当前栈顶NavDestination替换。

MOVE_TO_TOP_SINGLETON 从栈底向栈顶查找，如果指定的名称已经存在，则将对应的NavDestination页面移到栈顶（replace操作会将最后的栈顶替换成指定的NavDestination），否则行为和STANDARD一致。
POP_TO_SINGLETON 从栈底向栈顶查找，如果指定的名称已经存在，则将其上方的NavDestination页面全部移除（replace操作会将最后的栈顶替换成指定的NavDestination），否则行为和STANDARD一致。
NEW_INSTANCE 创建新的NavDestination实例。与STANDARD模式相比，该方法不会复用栈中同名实例。
49.NavigationOptions
名称类型必填说明
launchMode LaunchMode 否
页面栈的操作模式。

默认值：LaunchMode.STANDARD

animated boolean 否
是否支持转场动画。

默认值：true。

2.NavRouter
导航组件，默认提供点击响应处理，不需要开发者自定义点击事件逻辑。

子组件
必须包含两个子组件，其中第二个子组件必须为NavDestination。

子组件个数异常时：

有且仅有1个时，触发路由到NavDestination的能力失效。
有且仅有1个时，且使用NavDestination场景下，不进行路由。
大于2个时，后续的子组件不显示。
第二个子组件不为NavDestination时，触发路由功能失效。
（1）NavRouter所有属性
1.mode属性：设置指定点击NavRouter跳转到NavDestination页面时，使用的路由模式。
参数：

参数名类型必填说明
mode NavRouteMode 是
指定点击NavRouter跳转到NavDestination页面时，使用的路由模式。

默认值：NavRouteMode.PUSH_WITH_RECREATE

NavRouteMode枚举类型说明
名称说明
PUSH_WITH_RECREATE 跳转到新的NavDestination页面时，替换当前显示的NavDestination页面，页面销毁，但该页面信息仍保留在路由栈中。
PUSH 跳转到新的NavDestination页面时，覆盖当前显示的NavDestination页面，该页面不销毁，且页面信息保留在路由栈中。
REPLACE 跳转到新的NavDestination页面时，替换当前显示的NavDestination页面，页面销毁，且该页面信息从路由栈中清除。
2.RouteInfo对象说明
名称类型必填说明
name string 是点击NavRouter跳转到的NavDestination页面的名称。
param unknown 否点击NavRouter跳转到NavDestination页面时，传递的参数。
（2）事件
onStateChange
组件激活状态切换时触发该回调。开发者点击激活NavRouter，加载对应的NavDestination子组件时，回调onStateChange(true)。NavRouter对应的NavDestination子组件不再显示时，回调onStateChange(false)。

参数：

参数名类型必填说明
isActivated boolean 是 isActivated为true时表示激活，为false时表示未激活。
3.NavDestination
作为子页面的根容器，用于显示Navigation的内容区。

NavDestination组件必须配合Navigation使用，作为Navigation目的页面的根节点，单独使用只能作为普通容器组件，不具备路由相关属性能力。

如果页面栈中间页面的生命周期发生变化，跳转之前的栈顶Destination的生命周期（onWillshow,onShown,onHidden,onWillDisappear）与跳转之后的栈顶Destination的生命周期（onWillShow,onShown,onHidden,onWillDisappear）均在最后触发。

（1）子组件
子组件类型：系统组件和自定义组件，支持渲染控制类型（if/else、ForEach和LazyForEach）

子组件个数：多个

（2）NavDestination所有属性
不推荐设置位置、大小等布局相关属性，可能会造成页面显示异常

1.title
设置页面标题，使用NavigationCustomTitle类型设置height高度时，titleMode属性不会生效。字符串超长时，如果不设置副标题，先缩小再换2行后以…截断。如果设置副标题，先缩小后以…截断。

参数：

参数名类型必填说明
value string | CustomBuilder | NavDestinationCommonTitle | NavDestinationCustomTitle | Resource 是页面标题。
options12+ NavigationTitleOptions 否标题栏选项。
NavDestinationCommonTitle
名称类型必填说明
main string 是设置主标题。
sub string 是设置副标题。
NavDestinationCustomTitle
名称类型必填说明
builder CustomBuilder 是设置标题栏内容。
height TitleHeight | Length 是设置标题栏高度。
2.hideTitleBar
设置是否隐藏标题栏

参数：

参数名类型必填说明
value boolean 是
是否隐藏标题栏。

默认值：false

true: 隐藏标题栏。

false: 显示标题栏。

3.mode
设置NavDestination类型，不支持动态修改

参数：

参数名类型必填说明
value NavDestinationMode 是
NavDestination类型。

默认值: NavDestinationMode.STANDARD

NavDestinationMode枚举说明
名称说明
STANDARD 标准模式的NavDestination。
DIALOG 默认透明，进出页面栈不影响下层NavDestination的生命周期，不支持系统转场动画。
4.backButtinIcon
设置标题栏返回键图标

参数：

参数名类型必填说明
value ResourceStr | PixelMap | SymbolGlyphModifier12+ 是标题栏返回键图标。
5.Menus
设置页面右上角菜单，不设置时不显示菜单项。使用Array写法时，竖屏最多支持显示3个图标，横屏最多支持显示5个图标，多余的图标会被放入自动生成的更多图标

参数：

参数名类型必填说明
value Array | CustomBuilder 是页面右上角菜单。
6.ignoreLayoutSafeArea
控制组件的布局，使其扩展到非安全区域

参数名类型必填说明
types Array 否
配置扩展安全区域的类型。

默认值:

[LayoutSafeAreaType.SYSTEM]

edges Array 否
配置扩展安全区域的方向。

默认值:

[LayoutSafeAreaEdge.TOP, LayoutSafeAreaEdge.BOTTOM]。

组件设置LayoutSafeArea之后生效的条件为：

若组件延伸到非安全区域内，此时在非安全区域里触发的事件（例如：点击事件）等可能会被系统拦截，优先响应状态栏等系统组件。

7.sysTemBarStyle
当Navigation中显示当前NavDestination时，设置对应系统状态栏的样式

参数：

参数名类型必填说明
style Optional 是系统状态栏样式。
说明：

1.必须配合Navigation使用，作为其Navigation目的页面的根节点时才能生效。

（3）NavDestination事件
事件名说明
onShown 当该NavDestination页面显示时触发此回调
onHidden 当该NavDestination页面隐藏时触发此回调
onWillAppear 当该Destination挂载之前触发此回调，在该回调中允许修改页面栈，当前帧生效
onWillShow 当该Destination显示之前触发此回调
onWillHide 当该Destination隐藏之前触发此回调
onWillDisappear 当该Destination卸载之前触发的生命周期（有转场动画时，在转场动画开始之前触发）
onBackPressed
当与Navigation绑定的页面栈中存在内容时，此回调生效。当点击返回键时，触发该回调

返回值为true时，表示重写返回键逻辑，返回值为false时，表示回退到上一个页面。

onReady 当NavDestination即将构建子组件之前会触发此回调
（4）NavDestination接口
1.NavDestinationContext
名称类型必填说明
pathInfo NavPathInfo 是
跳转NavDestination时指定的参数。

元服务API：从API version 11开始，该接口支持在元服务中使用。

pathStack NavPathStack 是
当前NavDestination所处的页面栈。

元服务API：从API version 11开始，该接口支持在元服务中使用。

navDestinationId12+ string 否
当前NavDestination的唯一ID，由系统自动生成，和组件通用属性id无关。

元服务API：从API version 12开始，该接口支持在元服务中使用。

2.getConfigInRouteMap
返回值

类型说明
RouteMapConfig 当前页面路由配置信息。
undefined 当该页面不是通过路由表配置时返回undefined。
3.RouteMapConfig
名称类型必填说明
name string 是页面名称。
pageSourceFile string 是页面在当前包中的路径。
data Object 是页面自定义字段信息。
十五. NodeContainer
基础组件，不支持尾随添加子节点。组件接受一个NodeController的实例接口。需要NodeController组合使用

说明：

该组件下仅支持挂载自定义节点FrameNode或者是BuilderNode中获取的根节点FrameNode。

不支持挂载查询获得的原生系统组件代理节点。

当前不支持使用动态属性设置

不支持子组件

1.NodeContainer接口
参数：

参数名类型必填说明
controller NodeController 是 NodeController用于控制NodeContainer中的节点的上树和下树，反映NodeContainer容器的生命周期。
十六. PatternLock
图案密码锁组件，以九宫格图案的方式输入密码，用于密码验证场景。手指在PatternLock组件区域按下时开始进入输入状态，手指离开屏幕时结束输入状态完成密码输入。

1.接口
PatternLock(controller?: PatternLockController)

参数：

参数名类型必填说明
controller PatternLockController 否设置PatternLock组件控制器，可用于控制组件状态重置。
2.属性
参数名类型必填说明
sideLength Length 是组件的宽度和高度
circleRadius Length 是设置宫格中圆点的半径。设置为0或负数时取默认值。
backgroundColor ResourceColor 是背景颜色
regularColor ResourceColor 是宫格圆点在“未选中”状态的填充颜色。
selectedColor ResourceColor 是宫格圆点在“选中”状态的填充颜色。
activeColor ResourceColor 是宫格圆点在“激活”状态的填充颜色。
pathColor ResourceColor 是连线的颜色。
PathStrokeWidth number|string 是连线的宽度。
autoReset boolean 是
在完成密码输入后再次在组件区域按下时是否重置组件状态。

为true时，完成密码输入后再次在组件区域按下时会重置组件状态（即清除之前输入的密码）；为false时，不会重置组件状态。

默认值：true

activateCircleStyle CircleStyleOptions 是宫格圆点在“激活”状态的背景圆环样式。
CirleStyleOptions对象

名称类型必填说明
color ResourceColor 否
背景圆环颜色。

默认值：与pathColor值相同

radius LengthMetrics 否
背景圆环的半径。

默认值：circleRadius的11/6

enableWaveEffect boolean 否
波浪效果开关。

默认值：true

3.事件
（1）onPatternComplete
密码输入结束时触发该回调。

参数：

参数名类型必填说明
input Array 是与选中宫格圆点顺序一致的数字数组，数字为选中宫格圆点的索引值（第一行圆点从左往右依次为0、1、2，第二行圆点依次为3、4、5，第三行圆点依次为6、7、8）。
（2）onDotConnect
密码输入选中宫格圆点时触发该回调。

回调参数为选中宫格圆点顺序的数字，数字为选中宫格圆点的索引值（第一行圆点从左往右依次为0、1、2，第二行圆点依次为3、4、5，第三行圆点依次为6、7、8）。

1.PatternLockController
PatternLock组件的控制器，可以通过它进行组件状态重置。

导入对象
let patternLockController: PatternLockController = new PatternLockController()
2.constructor
constructor()

PatternLockController的构造函数。

3.reset
reset()

重置组件状态。

4.setChallengeResult
用于设置图案密码正确或错误状态。

名称类型必填说明
result PatternLockChallengeResult 是图案密码状态。
PatternLockChallengeResult枚举说明
名称说明
CORRECT 图案密码正确。
WRONG 图案密码错误。
@State onPattern:number[]=[]
@State pwdMsg:string=‘请设置密码’
patternLockController: PatternLockController = new PatternLockController() // 控制器
acs:LengthMetrics=new LengthMetrics(10)
@Builder PatternLockTest(){
Text(this.pwdMsg).fontSize(30)
Text(this.onPattern.toString())
PatternLock(this.patternLockController)
.sideLength(‘100%’)
.circleRadius(10) // 圆点半径
.regularColor(‘#ccc’) // 未选中的颜色
.selectedColor(‘red’) //选中的颜色
.activeColor(‘blue’) // 激活状态的颜色
.pathColor(‘blue’) // 连线的颜色
.pathStrokeWidth(5) // 连线的宽度
.autoReset(true) // 自动重置
.activateCircleStyle({color:‘green’,radius:this.acs,enableWaveEffect:true})
.onPatternComplete((input:Array)=>{ //input: 输入的数字的数组
// 输入完成后重置
this.patternLockController.reset()
if (input.length<5){
this.pwdMsg=‘最少连接5个’
return // 结束函数
}
if (this.onPattern.length==0) {
this.onPattern=input
this.pwdMsg=‘请确认密码’
}else {
if (this.onPattern.toString()==input.toString()) {
this.pwdMsg=‘两次密码一致’
this.patternLockController.setChallengeResult(PatternLockChallengeResult.CORRECT)
// todo 密码一致后跳转新页面
}else {
this.pwdMsg=‘两次密码不一致’
this.patternLockController.setChallengeResult(PatternLockChallengeResult.WRONG)

      }}}).onDotConnect((num)=>{ // num:输入的单个数字console.log('选中的数字:'+num)})

}

未设置密码样式

设置密码时的样式

第一次密码设置

两次密码设置不一致的效果

两次密码一致时的样式

最少连接五个
十七.Progress
进度条组件，用于显示内容加载或操作处理等进度。

1.Progress接口
Progress(options: ProgressOptions)

参数名类型必填说明
options ProgressOptions 是按进度条类型不同，设置不同属性的进度条组件参数。
ProgressOptions对象说明
名称类型必填说明
value number 是
指定当前进度值。设置小于0的数值时置为0，设置大于total的数值时置为total。

默认值：0

total number 否
指定进度总长。设置小于等于0的数值时置为100。

默认值：100

type ProgressType 否
指定进度条类型。

默认值：ProgressType.Linear

ProgressType枚举说明
名称说明
Linear 线性样式。从API version9开始，高度大于宽度的时候自适应垂直显示。
Ring 环形无刻度样式，环形圆环逐渐显示至完全填充效果。
Eclipse 圆形样式，显示类似月圆月缺的进度展示效果，从月牙逐渐变化至满月。
ScaleRing 环形有刻度样式，显示类似时钟刻度形式的进度展示效果。从API version9开始，刻度外圈出现重叠的时候自动转换为环形无刻度进度条。
Capsule 胶囊样式，头尾两端圆弧处的进度展示效果与Eclipse相同；中段处的进度展示效果与Linear相同。高度大于宽度的时候自适应垂直显示。
2.属性
（1）value
设置当前进度值。设置小于0的数值时置为0，设置大于total的数值时置为total。非法数值不生效。

参数名类型必填说明
value number 是
当前进度值。

默认值：0

（2）color
设置进度条前景色。

参数名类型必填说明
value ResourceColor | LinearGradient10+ 是
进度条前景色。

（3）style
设置组件的样式

参数名类型必填说明
value
ProgressStyleOptions8+ | CapsuleStyleOptions10+ |

RingStyleOptions10+ | LinearStyleOptions10+ |

ScaleRingStyleOptions10+ | EclipseStyleOptions10+

是
组件的样式。

CapsuleStyleOptions：设置Capsule的样式。
RingStyleOptions：设置Ring的样式。
LinearStyleOptions：设置Linear的样式。
ScaleRingStyleOptions：设置ScaleRing的样式。
EclipseStyleOptions：设置Eclipse的样式。
ProgressStyleOptions：仅可设置各类型进度条的基本样式。

ProgressStyleOptions，暂不支持其它的参数类型

1.ProgressStyleOptions：仅可设置各类型进度条的基本样式
名称类型必填说明
strokeWidth Length 否
设置进度条宽度（不支持百分比设置）。

默认值：4.0vp

scaleCount number 否
设置环形进度条总刻度数。

默认值：120

scaleWidth Length 否
设置环形进度条刻度粗细（不支持百分比设置），刻度粗细大于进度条宽度时，为系统默认粗细。

默认值：2.0vp

2.CapsuleStyleOptions：设置Capsule（胶囊样式）的样式
名称类型必填说明
borderColor ResourceColor 否
内描边颜色。

默认值：

API version 10：‘#33006cde’

API version 11及以上：‘#33007dff’

borderWidth Length 否
内描边宽度（不支持百分比设置）。

默认值：1vp

content string 否文本内容，应用可自定义。
font Font 否
文本样式。

默认值：

文本大小（不支持百分比设置）：12fp

其他文本参数跟随text组件的主题值。

fontColor ResourceColor 否
文本颜色。

默认值：‘#ff182431’

showDefaultPercentage boolean 否
显示百分比文本的开关，开启后会在进度条上显示当前进度的百分比。设置了content属性时该属性不生效。

默认值：false

3.RingStyleOptions：设置Ring（环形无刻度样式）的样式
名称类型必填说明
strokeWidth Length 否
设置进度条宽度（不支持百分比设置），宽度大于等于半径时，默认修改宽度至半径值的二分之一。

默认值：4.0vp

shadow boolean 否
进度条阴影开关。

默认值：false

status ProgressStatus 否
进度条状态，当设置为LOADING时会开启检查更新动效，此时设置进度值不生效。当从LOADING设置为PROGRESSING，检查更新动效会执行到终点再停止。

默认值： ProgressStatus.PROGRESSING

ProgressStatus枚举说明
名称说明
LOADING 加载中。
PROGRESSING 进度更新中。
4.LinearStyleOptions：设置Linear（线性样式）的样式
名称类型必填说明
strokeWidth Length 否
设置进度条宽度（不支持百分比设置）。

默认值：4.0vp

strokeRadius PX | VP | LPX | Resource 否
设置线性进度条圆角半径。

取值范围[0, strokeWidth / 2]。默认值：strokeWidth / 2。

5.ScaleRingStyleOptions：设置ScaleRing（环形有刻度样式）的样式。
名称类型必填说明
strokeWidth Length 否
设置进度条宽度（不支持百分比设置）。

默认值：4.0vp

scaleCount number 否
设置环形进度条总刻度数。

默认值：120

scaleWidth Length 否
设置环形进度条刻度粗细（不支持百分比设置），刻度粗细大于进度条宽度时，为系统默认粗细。

默认值：2.0vp

（4）privacySensitive
设置隐私敏感。

参数名类型必填说明
isPrivacySensitiveMode [Optional] 是
设置隐私敏感，隐私模式下进度清零，文字将被遮罩。

说明：

设置null则不敏感。

需要卡片框架支持。

（5）ProgressConfiguration
名称类型必填说明
value number 是当前进度值。
total number 是进度总长。
（6）CommonProgressStyleOptions
进度平滑动效的开关

名称类型必填说明
enableSmoothEffect boolean 否
进度平滑动效的开关。开启平滑动效后设置进度，进度会从当前值渐变至设定值，否则进度从当前值突变至设定值。

默认值：true

（7）ScanEffectOptions
扫光效果的开关

名称类型必填说明
enableScanEffect boolean 否
扫光效果的开关。

默认值：false

@State ProValue:number=30
@Builder ProgressTest(){
Scroll(){
Column({space:10}){
Progress({value:50,total:100,type:ProgressType.Linear}) // 线性样式
Progress({value:50,total:100,type:ProgressType.Ring}) //环形无刻度样式
.height(200)
.style({
strokeWidth:10,
shadow:true,
status:ProgressStatus.PROGRESSING

      })Progress({value:50,total:100,type:ProgressType.Eclipse}) //圆形样式Progress({value:50,total:100,type:ProgressType.ScaleRing}) //环形有刻度样式Progress({value:50,total:100,type:ProgressType.Capsule}) //胶囊型样式.value(this.ProValue) // 默认值// .color('blue') //进度条颜色.backgroundColor('#ccc') // 进度条底色.style({borderColor:'red', //边框颜色borderWidth:1, // 边框宽度// content:`下载进度${this.ProValue}%`,font:({size:14,style:FontStyle.Italic}),fontColor:'white',enableScanEffect:true, //扫光效果showDefaultPercentage:true, //显示百分比,和content后无效enableSmoothEffect:true})Progress({value:50,total:100,type:ProgressType.ScaleRing}) //环形有刻度样式.height(300).value(this.ProValue).style({strokeWidth:10,scaleCount:100, //总刻数scaleWidth:5, // 刻度线宽度enableSmoothEffect:true //平滑进度开关}).onClick(()=>{this.ProValue+=10})}
}

}

进度条效果
3. 自定义样式
class MyProgressModifier implements ContentModifier {
color: Color = Color.White

constructor(color:Color) {
this.color = color
}
applyContent() : WrappedBuilder<[ProgressConfiguration]>
{
return wrapBuilder(myProgress)
}
}
@Builder function myProgress(config: ProgressConfiguration ) {

Column({space:30}) {
Text(“当前进度：” + config.value + “/” + config.total).fontSize(20)
Row() {
Flex({ justifyContent: FlexAlign.SpaceBetween }) {
Path()
.width(‘20%’)
.height(‘20%’)
.commands(‘M108 0 L141 70 L218 78.3 L162 131 L175 205 L108 170 L41.2 205 L55 131 L1 78 L75 68 L108 0 Z’)
.fill(config.enabled && config.value >=1 ? (config.contentModifier as MyProgressModifier).color : Color.White)
.stroke(Color.Black)
.strokeWidth(5)
Path()
.width(‘20%’)
.height(‘20%’)
.commands(‘M108 0 L141 70 L218 78.3 L162 131 L175 205 L108 170 L41.2 205 L55 131 L1 78 L75 68 L108 0 Z’)
.fill(config.enabled && config.value >=2 ? (config.contentModifier as MyProgressModifier).color : Color.White)
.stroke(Color.Black)
.strokeWidth(5)
Path()
.width(‘20%’)
.height(‘20%’)
.commands(‘M108 0 L141 70 L218 78.3 L162 131 L175 205 L108 170 L41.2 205 L55 131 L1 78 L75 68 L108 0 Z’)
.fill(config.enabled && config.value >=3 ? (config.contentModifier as MyProgressModifier).color : Color.White)
.stroke(Color.Black)
.strokeWidth(5)
Path()
.width(‘20%’)
.height(‘20%’)
.commands(‘M108 0 L141 70 L218 78.3 L162 131 L175 205 L108 170 L41.2 205 L55 131 L1 78 L75 68 L108 0 Z’)
.fill(config.enabled && config.value >=4 ? (config.contentModifier as MyProgressModifier).color : Color.White)
.stroke(Color.Black)
.strokeWidth(5)
Path()
.width(‘20%’)
.height(‘20%’)
.commands(‘M108 0 L141 70 L218 78.3 L162 131 L175 205 L108 170 L41.2 205 L55 131 L1 78 L75 68 L108 0 Z’)
.fill(config.enabled && config.value >=5 ? (config.contentModifier as MyProgressModifier).color : Color.White)
.stroke(Color.Black)
.strokeWidth(5)
}.width(‘100%’)
}
}.margin({bottom:100})
}

@Entry
@Component
struct Component4Page {
@State message: string = ‘Hello World’;

build() {
Column(){
this.ProgressTest2()
}

.height('100%')
.width('100%')

}

@State wjx:number=0
myModifer:MyProgressModifier=new MyProgressModifier(Color.Green)
@Builder ProgressTest2(){
Progress({value:this.wjx,total:5,type:ProgressType.Ring})
.contentModifier(this.myModifer)

Button('++').onClick(()=>{if (this.wjx<5) {this.wjx++}
})
Button('--').onClick(()=>{if (this.wjx>0) {this.wjx--}
})

}

无操作时样式

一星
十八. QRCode二维码
1.QRCode接口
QRCode(value: string)

参数名类型必填说明
value string 是
二维码内容字符串。最大支持512个字符，若超出，则截取前512个字符。

说明：

该字符串内容确保有效，不支持null、undefined以及空内容，当传入上述内容时，将生成无效二维码。

属性
参数名类型必填说明
color ResourceColor 是二维码颜色
backgroundColor ResourceColor 是二维码背景颜色。
contentOpactiy number|Resource 是二维码内容颜色的不透明度。
@Builder QrCodeTest(){
QRCode(‘hello world!’)
.color(‘green’)
.backgroundColor(‘#fdf’)
.contentOpacity(0.5)
}

hello word！二维码
十九. Radio
单选框，提供相应的用户交互选择项。

Radio接口
Radio(options: RadioOptions)：创建单选框组件。

参数名类型必填说明
options RadioOptions 是配置单选框的参数。
RadioOptions对象说明
名称类型必填说明
value string 是
当前单选框的值。

group string 是
当前单选框的所属群组名称，相同group的Radio只能有一个被选中。

indicatorType12+ RadioIndicatorType 否
配置单选框的选中样式。未设置时按照RadioIndicatorType.TICK进行显示。

indicatorBuilder12+ CustomBuilder 否
配置单选框的选中样式为自定义组件。自定义组件与Radio组件为中心点对齐显示。indicatorBuilder设置为undefined时，按照RadioIndicatorType.TICK进行显示。

RadioIndicatorType枚举说明
名称说明
TICK 选中样式为系统默认TICK图标。
DOT 选中样式为系统默认DOT图标。
CUSTOM 选中样式为indicatorBuilder中的内容。
2.属性
参数名类型必填说明
checked boolean 是
单选框的选中状态。

默认值：false

radioStyle RadioStyle 否单选框选中状态和非选中状态的样式。
contentModiffer ContentModifier 是
在Radio组件上，定制内容区的方法。

modifier: 内容修改器，开发者需要自定义class实现ContentModifier接口。

RadioStyle对象说明
名称类型必填说明
checkedBackgroundColor ResourceColor 否
开启状态底板颜色。

默认值：#007DFF

uncheckedBorderColor ResourceColor 否
关闭状态描边颜色。

默认值：#182431

indicatorColor ResourceColor 否
开启状态内部圆饼颜色。从API version 12开始，indicatorType设置为RadioIndicatorType.TICK和RadioIndicatorType.DOT时，支持修改内部颜色。indicatorType设置为RadioIndicatorType.CUSTOM时，不支持修改内部颜色。

默认值：#FFFFFF

RadioConfiguration对象说明
开发者需要自定义class实现ContentModifier接口。

名称类型只读可选说明
value string 否否当前单选框的值。
checked boolean 否否
设置单选框的选中状态。

默认值：false

triggerChange Callback 否否触发单选框选中状态变化。
3. 事件
onChange
单选框选中状态改变时触发回调。

参数名类型必填说明
isChecked boolean 是
单选框的状态。

为true时，表示从未选中变为选中。为false时，表示从选中变为未选中。

class MyRadio implements ContentModifier{
type: number = 0
selectedColor:Color = Color.Black

constructor(numberType: number, colorType:Color) {
this.type = numberType
this.selectedColor = colorType
}
applyContent(): WrappedBuilder<[RadioConfiguration]> {
return wrapBuilder(a)
}
}
@Builder function a(config:RadioConfiguration){
SymbolGlyph($r(‘sys.symbol.heart_fill’))
.fontColor(config.checked?[(config.contentModifier as MyRadio).selectedColor]:[‘gray’])
.onClick(()=>{
if (config.checked) {
config.triggerChange(false)
}else {
config.triggerChange(true)
}
})
}

@Entry
@Component
struct Component5Page {
@State message: string = ‘Hello World’;

build() {
Column(){
this.readioTest()
}

.height('100%')
.width('100%')

}

@Builder rs(){
Image( $r (^{'} a pp . m e d ia . 1^{'})) . b or d er R a d i u s (100) // S y mb o lGl y p h ($ r(‘sys.symbol.camera_metering_spot’))
}
myRadio:MyRadio=new MyRadio(0,Color.Red)
@Builder readioTest(){
Row(){
Text(‘性别:’)
Radio({value:‘男’,group:‘sex’,indicatorType:RadioIndicatorType.DOT})
.checked(true)
.radioStyle({
checkedBackgroundColor:Color.Green,
uncheckedBorderColor:Color.Brown,
indicatorColor:Color.Orange
})
Text(‘男’)
Radio({value:‘女’,group:‘sex’,indicatorType:RadioIndicatorType.CUSTOM})
.radioStyle({
checkedBackgroundColor:Color.Green,
uncheckedBorderColor:Color.Brown,
indicatorColor:Color.Orange
})
Text(‘女’)
Radio({value:‘未知’,group:‘sex’,indicatorType:RadioIndicatorType.CUSTOM,
indicatorBuilder:this.rs()
})
.radioStyle({
checkedBackgroundColor:Color.Green,
uncheckedBorderColor:Color.Brown,
indicatorColor:Color.Orange
})
Text(‘未知’)
Radio({value:‘未知’,group:‘sex’ })
.contentModifier(this.myRadio)

}
.width('100%')
Row(){Radio({value:'a',group:'a'}).contentModifier(new MyRadio(1,Color.Red))Radio({value:'a',group:'a'}).contentModifier(new MyRadio(2,Color.Red))
}

}
}

二十.Rating
提供在给定范围内选择评分的组件

1.接口
Rating(options?: { rating: number, indicator?: boolean })

参数名类型必填说明
rating number 是
设置并接收评分值。

默认值：0

取值范围： [0, stars]

小于0取0，大于stars取最大值stars。

从API version 10开始，该参数支持$$双向绑定变量。

indicator boolean 否
设置评分组件作为指示器使用，不可改变评分。

默认值：false, 可进行评分

说明：

indicator=true时，默认组件高度height=12.0vp，组件width=height * stars。

indicator=false时，默认组件高度height=28.0vp，组件width=height * stars。

属性
参数名类型必填说明
stars number 是
设置评分总数。

默认值：5

stepSize number 是
操作评级的步长。

默认值：0.5

取值范围：[0.1, stars]

starStyle
{

backgroundUri: string,

foregroundUri: string,

secondaryUri?: string

}

是
backgroundUri：未选中的星级的图片链接，可由用户自定义或使用系统默认图片。

foregroundUri：选中的星级的图片路径，可由用户自定义或使用系统默认图片。

secondaryUri：部分选中的星级的图片路径，可由用户自定义或使用系统默认图片。

说明：

backgroundUri或者foregroundUri或者secondaryUri设置的图片路径错误时，图片不显示。

backgroundUri或者foregroundUri设置为undefined或者空字符串时，rating会选择加载系统默认星型图源。

secondaryUri不设置或者设置的值为undefined或者空字符串时，优先设置为backgroundUri，效果上等同于只设置了foregroundUri、backgroundUri。

contentModiffer ContentModifier 是
在Rating组件上，定制内容区的方法。

modifier: 内容修改器，开发者需要自定义class实现ContentModifier接口。

RatingConfiguration对象说明
开发者需要自定义class实现ContentModifier接口

名称类型只读可选说明
rating number 否否
评分条当前评分数。

默认值：0

indicator boolean 否否
评分条是否作为一个指示器。

默认值：false

stars number 否否
评分条的星级总数。

默认值：5

stepSize number 否否
评分条的评分步长。

默认值：0.5

triggerChange Callback 否否触发评分数量变化。
3. 事件
onChange:操作评分条的评星发生改变时触发该回调。
参数名类型必填说明
value number 是评分条的评分。

键盘走焦规格
按键功能描述
Tab 组件间切换焦点。
左右方向键评分预览增加/减少（步长为step），不改变实际分值。
Home 移动到第一个星星，不改变实际分值。
End 移动到最后一个星星，不改变实际分值。
Space/Enter 根据当前评分提交评分结果。
Rating({rating:0.5,indicator:true}) // 不可改变
Rating({rating:0.5,indicator:false}) // 可以改变
.stars(5) // 总数
.stepSize(0.5) // 步长

默认样式
Rating({rating:0.5,indicator:false})
.stars(5) // 总数
.stepSize(0.5) // 步长
.starStyle({
backgroundUri:‘/img/1.jpg’,
foregroundUri:‘/img/2.jpg’,
secondaryUri:‘/img/3.jpg’
})

设置星级图片样式
class MyRating implements ContentModifier{
applyContent(): WrappedBuilder<[RatingConfiguration]> {
return wrapBuilder(rating)
}

}
@Builder function rating(config:RatingConfiguration){
Column(){
Row(){
SymbolGlyph(config.rating>0? $r('sys.symbol.star_fill'):$ r(‘sys.symbol.star’))
.fontColor([‘red’])
.onClick(()=>{
config.triggerChange(1)
})
SymbolGlyph(config.rating>1? $r('sys.symbol.star_fill'):$ r(‘sys.symbol.star’))
.fontColor([‘red’])
.onClick(()=>{
config.triggerChange(2)
})
SymbolGlyph(config.rating>2? $r('sys.symbol.star_fill'):$ r(‘sys.symbol.star’))
.fontColor([‘red’])
.onClick(()=>{
config.triggerChange(3)
})
}
.width(‘100%’)
}
}

@Entry
@Component
struct Component5Page {
@State message: string = ‘Hello World’;

build() {
Column(){
// this.readioTest()
this.RatingTest()
// this.richTest()
}

.height('100%')
.width('100%')

}

@Builder RatingTest(){
Rating({rating:1,indicator:false})
.stars(3)
.stepSize(1)
.contentModifier(new MyRating())
}
}

自定义内容区
二十一. RichEditor
支持图文混排和文本交互式编辑的组件

不包含子组件

1.RichEdiitor接口
RichEditor(value: RichEditorOptions)

参数名类型必填说明
value RichEditorOptions 是富文本组件初始化选项。
RichEditor(options: RichEditorStyledStringOptions)

参数名类型必填说明
options RichEditorStyledStringOptions 是富文本组件初始化选项。
2. 属性
（1）customKeyboard
customKeyboard(value: CustomBuilder, options?: KeyboardOptions)

设置自定义键盘。

当设置自定义键盘时，输入框激活后不会打开系统输入法，而是加载指定的自定义组件。

自定义键盘的高度可以通过自定义组件根节点的height属性设置，宽度不可设置，使用系统默认值。

自定义键盘无法获取焦点，但是会拦截手势事件。

默认在输入控件失去焦点时，关闭自定义键盘。

如果设备支持拍摄输入，设置自定义键盘后，该输入框会不支持拍摄输入。

参数名类型必填说明
value CustomBuilder 是
自定义键盘。

options KeyboardOptions 否设置自定义键盘是否支持避让功能。
（2）bindSelectionMenu
bindSelectionMenu(spanType: RichEditorSpanType, content: CustomBuilder, responseType: ResponseType | RichEditorResponseType,options?: SelectionMenuOptions)

设置自定义选择菜单。自定义菜单超长时，建议内部嵌套Scroll组件使用，避免键盘被遮挡。

参数名类型必填说明
spanType RichEditorSpanType 是
菜单的类型。

默认值：

RichEditorSpanType.TEXT

content CustomBuilder 是菜单的内容。
responseType ResponseType | RichEditorResponseType 是
菜单的响应类型。

默认值：

ResponseType.LongPress

options SelectionMenuOptions 否菜单的选项。
（3）copyOptions
copyOptions(value: CopyOptions)

设置组件是否支持文本内容可复制粘贴。

copyOptions不为CopyOptions.None时，长按组件内容，会弹出文本选择弹框。如果通过bindSelectionMenu等方式自定义文本选择菜单，则会弹出自定义的菜单。

参数名类型必填说明
value CopyOptions 是
组件支持文本内容是否可复制粘贴。

默认值：CopyOptions.LocalDevice

（4）enableDataDetector
enableDataDetector(enable: boolean)

设置是否进行文本特殊实体识别。该接口依赖设备底层应具有文本识别能力，否则设置不会生效。

当enableDataDetector设置为true，同时不设置dataDetectorConfig属性时，默认识别所有类型的实体，所识别实体的color和decoration会被更改为如下样式：

color: ‘#ff007dff’
decoration:{
type: TextDecorationType.Underline,
color: ‘#ff007dff’,
style: TextDecorationStyle.SOLID
}
触摸点击和鼠标右键点击实体，会根据实体类型弹出对应的实体操作菜单，鼠标左键点击实体会直接响应菜单的第一个选项。

对addBuilderSpan的节点文本，该功能不会生效。

当copyOption设置为CopyOptions.None时，点击实体弹出的菜单没有选择文本和复制功能。

参数名类型必填说明
enable boolean 是
使能文本识别。

默认值： false

（5）dataDetectorConfig
dataDetectorConfig(config: TextDataDetectorConfig)

设置文本识别配置。

需配合enableDataDetector一起使用，设置enableDataDetector为true时，dataDetectorConfig的配置才能生效。

当有两个实体A、B重叠时，按以下规则保留实体：

若A ⊂ B，则保留B，反之则保留A。
当A ⊄ B且B ⊄ A时，若A.start < B.start，则保留A，反之则保留B。

参数名类型必填说明
config TextDataDetectorConfig 是文本识别配置。
（6）enablePreviewText
enablePreviewText(enable: boolean)

设置是否开启预上屏功能。

参数名类型必填说明
enable boolean 是
使能预上屏功能。

默认值： true

该接口在CAPI场景使用时下，默认关闭。可以在工程的module.json5中配置metadata字段控制是否启用预上屏，配置如下：

“metadata”: [
{
“name”: “can_preview_text”,
“value”: “true”,
}
]
（7）placeholder
placeholder(value: ResourceStr, style?: PlaceholderStyle)

设置无输入时的提示文本

参数名类型必填说明
value ResourceStr 是无输入时的提示文本。
style PlaceholderStyle 否
添加提示文本的字体样式。

style缺省时默认跟随主题。

（8）careColor
caretColor(value:ResourceColor)

设置输入框光标、手柄颜色

参数名类型必填说明
value ResourceColor 是
输入框光标、手柄颜色。

默认值：‘#007DFF’

（9）selectedBackgroundColor
selectedBackgroundColor(value: ResourceColor)

设置文本选中底板颜色。如果未设置不透明度，默认为20%不透明度

参数名类型必填说明
value ResourceColor 是
文本选中底板颜色。

默认为20%不透明度。

（10）editMenuOptions
editMenuOptions(editMenu:EditMenuOptions)

设置自定义菜单扩展项，允许用户设置扩展项的文本内容、图标、回调方法。

参数名类型必填说明
editMenu EditMenuOptions 是扩展菜单选项。
（11）enterKeyType
enterKeyType(value:EnterKeyType)

设置软键盘输入法回车键类型。

参数名类型必填说明
value EnterKeyType 是
键盘输入法回车键类型。

默认为EnterKeyType.NEW_LINE。

（12）enableKeyboardOnFocus
enableKeyboardOnFocus(isEnabled: boolean)

设置RichEditor通过点击以外的方式获焦时，是否绑定输入法。

参数名类型必填说明
isEnabled boolean 是
通过点击以外的方式获焦时，是否绑定输入法。

默认值：true

（13）barState
barState(state: BarState)

设置RichEditor编辑态时滚动条的显示模式。

参数名类型必填说明
value BarState 是
输入框编辑态时滚动条的显示模式。

默认值：BarState.Auto

（14）enableHapticFeedback
enableHapticFeedback(isEnabled:boolean)

设置RichEditor是否支持触控反馈。

参数名类型必填说明
isEnabled boolean 是
是否支持触控反馈。

默认值：true，true表示开启触控反馈，false表示不开启触控反馈。

设置为true后是否生效，还取决于系统的硬件是否支持。

3.事件
除支持通用事件外，还支持OnDidChangeCallback、StyledStringChangedListener、StyledStringChangeValue和以下事件：
————————————————

                        版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

原文链接：https://blog.csdn.net/2301_80107415/article/details/144561986

查看全文

http://www.mrgr.cn/news/81246.html

链原生 Web3 AI 网络 Chainbase 推出 AVS 主网，拓展 EigenLayer AVS 场景

EasyGBS国标GB28181平台P2P远程访问故障排查指南：客户端角度的排查思路

第一部分：mybatisPlus

Windows、CentOS环境下搭建自己的版本管理资料库：GitBlit

flink+kafka实现流数据处理学习

精准提升：从94.5%到99.4%——目标检测调优全纪录

简单了解函数递归

navicat在pg数据库中设置自增

虚幻引擎结构之GName

ubuntu paddle ocr 部署bug问题解决

【EthIf-14】EthIfGeneral容器配置-02

树型实验

eNSP安装教程（内含安装包）

Python+QQ邮箱调用定时监控——以网站监测为例

MySQL中Seconds_Behind_Master是怎么计算的

‘pnpm’ 不是内部或外部命令，也不是可运行的程序或批处理文件。

24.12.25 AOP

【C++】模板与泛型编程（一）：定义模板，控制实例化、效率与灵活性

NLP 中文拼写检测纠正论文-02-2019-SOTA FASPell Chinese Spell Checke github 源码介绍

本科阶段最后一次竞赛Vlog——2024年智能车大赛智慧医疗组准备全过程——12使用YOLO-Bin

MacroSan 2500_24A配置

重温设计模式--工厂模式(简单、工厂、抽象)

相关文章：