ArkTs组件的学习

一. AlphabetIndexer

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

|------------|-----------------|----|------------------------|
| 参数名 | 类型 | 必填 | 说明 |
| arrayValue | Array<string> | 是 | 字母索引字符串数组，不可设置为空 |
| selected | number | 是 | 初始选中项索引值若超出索引值范围则取默认值0 |

TypeScript 复制代码

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('app.media.1'),'哎'),
      new Lxr($r('app.media.2'),'哎呀'),
      new Lxr($r('app.media.3'),'奥运'),
      new Lxr($r('app.media.1'),'阿里'),
      new Lxr($r('app.media.1'),'阿里巴巴'),
      new Lxr($r('app.media.2'),'爱吃'),
      new Lxr($r('app.media.3'),'爱人')
    ]),
    new Txl('B',[
      new Lxr($r('app.media.1'),'白色的'),
      new Lxr($r('app.media.2'),'部分'),
      new Lxr($r('app.media.3'),'博大精深'),
      new Lxr($r('app.media.3'),'把你的'),
      new Lxr($r('app.media.3'),'把你的'),
      new Lxr($r('app.media.3'),'不会'),
      new Lxr($r('app.media.3'),'部门')
    ]),
    new Txl('C',[
      new Lxr($r('app.media.3'),'测试'),
      new Lxr($r('app.media.3'),'测定'),
      new Lxr($r('app.media.3'),'测得'),
      new Lxr($r('app.media.3'),'侧入'),
      new Lxr($r('app.media.3'),'测啊'),
      new Lxr($r('app.media.3'),'测温'),
      new Lxr($r('app.media.3'),'测试'),
      new Lxr($r('app.media.3'),'测定'),
      new Lxr($r('app.media.3'),'测得'),
      new Lxr($r('app.media.3'),'侧入'),
      new Lxr($r('app.media.3'),'测啊'),
      new Lxr($r('app.media.3'),'测温'),
      new Lxr($r('app.media.3'),'测试'),
      new Lxr($r('app.media.3'),'测定'),
      new Lxr($r('app.media.3'),'测得'),
      new Lxr($r('app.media.3'),'侧入'),
      new Lxr($r('app.media.3'),'测啊'),
      new Lxr($r('app.media.3'),'测温'),
      new Lxr($r('app.media.3'),'测试'),
      new Lxr($r('app.media.3'),'测定'),
      new Lxr($r('app.media.3'),'测得'),
      new Lxr($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](#属性值参数名类型必填说明 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)产生影响，可通过设置属性值为NONE关闭背景模糊材质效果。 |
| popupTitleBackground | ResourceColor | 是 | 设置提示弹窗首个索引项背板颜色 |
| enbleHapticFeedback | boolean | 否 | 支持触控反馈默认值：true |
[属性值]

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

（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，会撑满容器交叉轴。

TypeScript 复制代码

@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

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

TypeScript 复制代码

 @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）属性

|-----------|---------------|----|---------------------------------------------|
| 参数名 | 类型 | 必填 | 说明 |
| alignType | CalendarAlign | 是 | 对齐方式类型默认值：CalendarAlign .END |
| offset | Offset | 否 | 按照对齐类型对齐后，选择器相对入口组件的偏移量。默认值：{dx: 0, dy: 0} |
[edgeAlign：设置选择器与入口组件的对齐方式]

|--------|----------------------|
| 名称 | 描述 |
| Start | 设置选择器与入口组件左对齐的对齐方式 |
| Center | 设置选择器与入口组件居中对齐的对齐方式。 |
| END | 设置选择器与入口组件右对齐的对齐方式。 |
[CalendarAlign枚举]

|-------|------------------------------------------------------------------------------------------------------------------------------------------|----|--------------------|
| 参数名 | 类型 | 必填 | 说明 |
| value | PickerTextStyle | 是 | 设置入口区的文本颜色、字号、字体粗细 |
[textStyle：入口区的文本颜色、字号、字体粗细。]

|------------|------------------|----|-----------------------------------------------------------------------------------------------------|
| 名称 | 类型 | 必填 | 说明 |
| hintRadius | number|Resource | 否 | 描述日期选中态底板样式。默认值：底板样式为圆形。 |
| selected | Date | 否 | |-----------------------------------------------| | 设置选中项的日期。选中的日期未设置或日期格式不符合规范则为默认值。默认值：当前系统日期。 | |
[CalendarOptions对象说明]

（2）事件

|-------|------|----|--------|
| 参数名 | 类型 | 必填 | 说明 |
| value | Date | 是 | 选中的日期值 |
[onChange：选择日期时触发该事件。]

四. Checkbox

提供多选框组件，通常用于某选项的打开或关闭。

（1）属性

|------------------|-------------------------------------------------------------------------------------------------|----|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 名称 | 类型 | 必填 | 说明 |
| name | string | 否 | 用于指定多选框名称。 |
| group | string | 否 | |---------------------------------------------------------------------------------------------------------------| | 用于指定多选框所属群组的名称（即所属CheckboxGroup的名称）。 说明： 未配合使用CheckboxGroup组件时，此值无用。 | |
| indicatorBuilder | CustomBuilder | 否 | 配置多选框的选中样式为自定义组件。自定义组件与Checkbox组件为中心点对齐显示。indicatorBuilder设置为undefined/null时，默认为indicatorBuilder未设置状态。 |
[CheckboxOptions对象说明]

|-----------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----|--------------------------------------------------------------------------|
| 参数名 | 类型 | 必填 | 说明 |
| select | boolean | 是 | 多选框是否选中 |
| selectedColor | ResourceColor | 是 | 多选框选中状态颜色 |
| unselectedColor | ResourceColor | 是 | 多选框非选中状态边框颜色 |
| mark | MarkStyle | 是 | 设置多选框内部图标样式 |
| shape | CheckBoxShape | 是 | CheckBox组件形状, 包括圆形和圆角方形。 |
| contentModifier | [ContentModifier<CheckBoxConfiguration>](#参数名类型必填说明 select boolean 是多选框是否选中 selectedColor ResourceColor 是多选框选中状态颜色 unselectedColor ResourceColor 是多选框非选中状态边框颜色 mark MarkStyle 是设置多选框内部图标样式 shape CheckBoxShape 是 CheckBox组件形状, 包括圆形和圆角方形。 contentModifier ContentModifier<CheckBoxConfiguration> 是在CheckBox组件上，定制内容区的方法。 modifier: 内容修改器，开发者需要自定义class实现ContentModifier接口。) | 是 | 在CheckBox组件上，定制内容区的方法。 modifier: 内容修改器，开发者需要自定义class实现ContentModifier接口。 |

|----------------|---|------|
| 名称 | 值 | 说明 |
| CIRCLE | 0 | 圆形 |
| ROUNDED_SQUARE | 1 | 圆角方形 |
[CheckBoxShape11+枚举类型说明]

|---------------|---------------------|----|----|----------------------------------------------------------------------|
| 名称 | 类型 | 只读 | 可选 | 说明 |
| name | string | 否 | 否 | 当前多选框名称。 |
| selected | boolean | 否 | 否 | 指示多选框是否被选中。如果select属性没有设置默认值是false。如果设置select属性，此值与设置select属性的值相同。 |
| triggerChange | Callback<boolean> | 否 | 否 | 触发多选框选中状态变化。 |
[CheckBoxConfiguration对象说明
开发者需要自定义class实现ContentModifier接口。]

（2）事件

|-------|---------|----|------------------------------|
| 参数名 | 类型 | 必填 | 说明 |
| value | boolean | 是 | 返回true时，表示已选中。返回false时，表示未选中 |
[onChange：当选中状态发生变化时，触发该回调。]

TypeScript 复制代码

@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<ContainerSpanAttribute> | | 是 | 设置组件的动态属性。 |

TypeScript 复制代码

@Builder container(){
    Text(){
      SymbolSpan($r('sys.symbol.car_below_drop_3'))
      ContainerSpan(){
        Span('文字')
        ImageSpan($r('app.media.1'))
          .height(30)
      }
      .textBackgroundStyle({color:'#abc',radius:5})
    }.width('100%')
  }

六. DataPanel

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

|--------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----|---------------------------------------------------------------|
| 名称 | 类型 | 必填 | 说明 |
| values | number【】 | 是 | 数据值列表，最多包含9个数据，大于9个数据则取前9个数据。若数据值小于0则置为0。 |
| max | number | 否 | - max大于0，表示数据的最大值。 - max小于等于0，max等于value数组各项的和，按比例显示。默认值：100 |
| type | [DataPanelType](#DataPanelOptions对象说明名称类型必填说明 values number【】是数据值列表，最多包含9个数据，大于9个数据则取前9个数据。若数据值小于0则置为0。 max number 否 - max大于0，表示数据的最大值。 - max小于等于0，max等于value数组各项的和，按比例显示。默认值：100 type DataPanelType 否数据面板的类型（不支持动态修改）。默认值：DataPanelType.Circle) | 否 | 数据面板的类型（不支持动态修改）。默认值：DataPanelType.Circle |
[DataPanelOptions对象说明]

|--------|--------|
| 名称 | 说明 |
| Line | 线性数据面板 |
| Circle | 环形数据面板 |
[DataPanelType8+枚举说明]

|------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----|------------------------------------------------------------------------------------------------------------------------------|
| 参数名 | 类型 | 必填 | 说明 |
| closeEffect | boolean | 是 | 关闭数据占比图表旋转动效和投影效果。默认值：false |
| valueColoes | Array<ResourceColor | [LinearGradient](#08182431'，格式为十六进制ARGB值，前俩位代表透明度。 strokeWidth length 是设置圆环粗细。数据面板的类型为DataPanelType.Line时该属性不生效。 trackShadow DataPanelShadowOptions 是投影样式。说明：设置null为不开启投影。 contentModiffer ContentModifier<DataPanelConfiguration> 是在DataPanel组件上，定制内容区的方法。 modifier: 内容修改器，开发者需要自定义class实现ContentModifier接口。 DatePanelShadowOptions Array<ResourceColor | LinearGradient> 否各数据段投影的颜色。默认值：与valueColors值相同说明：若设置的投影颜色的个数少于数据段个数时，则显示的投影颜色的个数和设置的投影颜色个数一致。若设置的投影颜色的个数多于数据段个数时，则显示的投影颜色的个数和数据段个数一致。 LinearGradient ColorStop[] 是存储渐变颜色和渐变点。)> | 是 | 设置各数据段颜色 |
| trackBackgroundColor | ResourceColor | 是 | |----------------------------------------------| | 底板颜色。默认值：'#08182431'，格式为十六进制ARGB值，前俩位代表透明度。 | |
| strokeWidth | length | 是 | 设置圆环粗细。数据面板的类型为DataPanelType.Line时该属性不生效。 |
| trackShadow | [DataPanelShadowOptions](#08182431'，格式为十六进制ARGB值，前俩位代表透明度。 strokeWidth length 是设置圆环粗细。数据面板的类型为DataPanelType.Line时该属性不生效。 trackShadow DataPanelShadowOptions 是投影样式。说明：设置null为不开启投影。 contentModiffer ContentModifier<DataPanelConfiguration> 是在DataPanel组件上，定制内容区的方法。 modifier: 内容修改器，开发者需要自定义class实现ContentModifier接口。 DatePanelShadowOptions Array<ResourceColor | LinearGradient> 否各数据段投影的颜色。默认值：与valueColors值相同说明：若设置的投影颜色的个数少于数据段个数时，则显示的投影颜色的个数和设置的投影颜色个数一致。若设置的投影颜色的个数多于数据段个数时，则显示的投影颜色的个数和数据段个数一致。 LinearGradient ColorStop[] 是存储渐变颜色和渐变点。) | 是 | 投影样式。 说明： 设置null为不开启投影。 |
| contentModiffer | [ContentModifier<DataPanelConfiguration>](#08182431'，格式为十六进制ARGB值，前俩位代表透明度。 strokeWidth length 是设置圆环粗细。数据面板的类型为DataPanelType.Line时该属性不生效。 trackShadow DataPanelShadowOptions 是投影样式。说明：设置null为不开启投影。 contentModiffer ContentModifier<DataPanelConfiguration> 是在DataPanel组件上，定制内容区的方法。 modifier: 内容修改器，开发者需要自定义class实现ContentModifier接口。 DatePanelShadowOptions Array<ResourceColor | LinearGradient> 否各数据段投影的颜色。默认值：与valueColors值相同说明：若设置的投影颜色的个数少于数据段个数时，则显示的投影颜色的个数和设置的投影颜色个数一致。若设置的投影颜色的个数多于数据段个数时，则显示的投影颜色的个数和数据段个数一致。 LinearGradient ColorStop[] 是存储渐变颜色和渐变点。) | 是 | 在DataPanel组件上，定制内容区的方法。 modifier: 内容修改器，开发者需要自定义class实现ContentModifier接口。 |
| DatePanelShadowOptions | Array<ResourceColor | [LinearGradient](#08182431'，格式为十六进制ARGB值，前俩位代表透明度。 strokeWidth length 是设置圆环粗细。数据面板的类型为DataPanelType.Line时该属性不生效。 trackShadow DataPanelShadowOptions 是投影样式。说明：设置null为不开启投影。 contentModiffer ContentModifier<DataPanelConfiguration> 是在DataPanel组件上，定制内容区的方法。 modifier: 内容修改器，开发者需要自定义class实现ContentModifier接口。 DatePanelShadowOptions Array<ResourceColor | LinearGradient> 否各数据段投影的颜色。默认值：与valueColors值相同说明：若设置的投影颜色的个数少于数据段个数时，则显示的投影颜色的个数和设置的投影颜色个数一致。若设置的投影颜色的个数多于数据段个数时，则显示的投影颜色的个数和数据段个数一致。 LinearGradient ColorStop[] 是存储渐变颜色和渐变点。)> | 否 | 各数据段投影的颜色。默认值：与valueColors值相同 说明： 若设置的投影颜色的个数少于数据段个数时，则显示的投影颜色的个数和设置的投影颜色个数一致。若设置的投影颜色的个数多于数据段个数时，则显示的投影颜色的个数和数据段个数一致。 |
| LinearGradient | [ColorStop](#08182431'，格式为十六进制ARGB值，前俩位代表透明度。 strokeWidth length 是设置圆环粗细。数据面板的类型为DataPanelType.Line时该属性不生效。 trackShadow DataPanelShadowOptions 是投影样式。说明：设置null为不开启投影。 contentModiffer ContentModifier<DataPanelConfiguration> 是在DataPanel组件上，定制内容区的方法。 modifier: 内容修改器，开发者需要自定义class实现ContentModifier接口。 DatePanelShadowOptions Array<ResourceColor | LinearGradient> 否各数据段投影的颜色。默认值：与valueColors值相同说明：若设置的投影颜色的个数少于数据段个数时，则显示的投影颜色的个数和设置的投影颜色个数一致。若设置的投影颜色的个数多于数据段个数时，则显示的投影颜色的个数和数据段个数一致。 LinearGradient ColorStop[] 是存储渐变颜色和渐变点。)[] | 是 | 存储渐变颜色和渐变点。 |

|--------|---------------|----|---------------------------------------------------------------------------------------------------------|
| 名称 | 类型 | 必填 | 说明 |
| color | ResourceColor | 是 | 颜色值 |
| offset | length | 是 | 渐变色断点（0~1之间的比例值，若数据值小于0则置为0，若数据值大于1则置为1）。 说明： 若传入字符串类型且内容为数字，则转换为对应的数值。例如'10vp'转换为10，'10%'转换为0.1。 |
[ColorStop对象说明：颜色断点类型，用于描述渐进色颜色断点。]

|----------|------------|----|---------------------------|
| 名称 | 类型 | 必填 | 说明 |
| values | number[] | 是 | 当前DataPanel的数据值，最大长度为9。 |
| maxValue | number | 是 | DataPanel显示的最大值。默认值：100。 |
[DataPanelConfiguration1对象说明
开发者需要自定义class实现ContentModifier接口。]

TypeScript 复制代码

@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

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

|----------|------|----|--------------------------------------------------------------------------------------------------------------------------------------------------------|
| 名称 | 类型 | 必填 | 说明 |
| start | Date | 否 | 指定选择器的起始日期。默认值：Date('1970-1-1') |
| end | Date | 否 | 指定选择器的结束日期。默认值：Date('2100-12-31') |
| selected | Date | 否 | 设置选中项的日期。默认值：当前系统日期从API version 10开始，该参数支持$$双向绑定变量。 |
[### （1）DatePickerOptions对象说明]

（2）异常情形说明:

异常情形	对应结果
起始日期晚于结束日期，选中日期未设置	起始日期、结束日期和选中日期都为默认值
起始日期晚于结束日期，选中日期早于起始日期默认值	起始日期、结束日期都为默认值，选中日期为起始日期默认值
起始日期晚于结束日期，选中日期晚于结束日期默认值	起始日期、结束日期都为默认值，选中日期为结束日期默认值
起始日期晚于结束日期，选中日期在起始日期与结束日期默认值范围内	起始日期、结束日期都为默认值，选中日期为设置的值
选中日期早于起始日期	选中日期为起始日期
选中日期晚于结束日期	选中日期为结束日期
起始日期晚于当前系统日期，选中日期未设置	选中日期为起始日期
结束日期早于当前系统日期，选中日期未设置	选中日期为结束日期
日期格式不符合规范，如'1999-13-32'	取默认值
起始日期或结束日期早于系统有效范围	起始日期或结束日期取起始日期默认值
起始日期或结束日期晚于系统有效范围	起始日期或结束日期取结束日期默认值
起始日期与结束日期同时早于系统有效范围	起始日期与结束日期取系统有效范围最早日期
起始日期与结束日期同时晚于系统有效范围	起始日期与结束日期取系统有效范围最晚日期

系统日期范围：1900-1-31 ~ 2100-12-31

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

（3）属性

|--------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----|-------------------------------------------------|
| 参数名 | 类型 | 必填 | 说明 |
| lunar | boolean | 是 | 日期是否显示农历。 - true：展示农历。 - false：不展示农历。默认值：false |
| disappearTextStyle | [PickerTextStyle](#参数名类型必填说明 lunar boolean 是日期是否显示农历。 - true：展示农历。 - false：不展示农历。默认值：false disappearTextStyle PickerTextStyle 是所有选项中最上和最下两个选项的文本颜色、字号、字体粗细。 textStyle PickerTextStyle 是所有选项中除了最上、最下及选中项以外的文本颜色、字号、字体粗细。 selectedTextStyle PickerTextStyle 是选中项的文本颜色、字号、字体粗细。) | 是 | 所有选项中最上和最下两个选项的文本颜色、字号、字体粗细。 |
| textStyle | [PickerTextStyle](#参数名类型必填说明 lunar boolean 是日期是否显示农历。 - true：展示农历。 - false：不展示农历。默认值：false disappearTextStyle PickerTextStyle 是所有选项中最上和最下两个选项的文本颜色、字号、字体粗细。 textStyle PickerTextStyle 是所有选项中除了最上、最下及选中项以外的文本颜色、字号、字体粗细。 selectedTextStyle PickerTextStyle 是选中项的文本颜色、字号、字体粗细。) | 是 | 所有选项中除了最上、最下及选中项以外的文本颜色、字号、字体粗细。 |
| selectedTextStyle | [PickerTextStyle](#参数名类型必填说明 lunar boolean 是日期是否显示农历。 - true：展示农历。 - false：不展示农历。默认值：false disappearTextStyle PickerTextStyle 是所有选项中最上和最下两个选项的文本颜色、字号、字体粗细。 textStyle PickerTextStyle 是所有选项中除了最上、最下及选中项以外的文本颜色、字号、字体粗细。 selectedTextStyle PickerTextStyle 是选中项的文本颜色、字号、字体粗细。) | 是 | 选中项的文本颜色、字号、字体粗细。 |

|-------|---------------|----|---------------------------|
| 参数名 | 参数类型 | 必填 | 参数描述 |
| color | ResourceColor | 否 | 文本颜色 |
| font | Font | 否 | 文本样式，picker只支持字号、字体粗细的设置。 |
[PickerTextStyle类型说明]

（4）事件

|--------------|------------------------------------------------------------------------------------------------------------------------------------|----|-----------------------------------------|
| 参数名 | 类型 | 必填 | 说明 |
| onChange | [DatePickerResult](#参数名类型必填说明 onChange DatePickerResult 是返回选中的时间。 onDateChange Date 是返回选中的时间，年月日为选中的日期，时分取决于当前系统时间的时分，秒恒为00。) | 是 | 返回选中的时间。 |
| onDateChange | Date | 是 | 返回选中的时间，年月日为选中的日期，时分取决于当前系统时间的时分，秒恒为00。 |

|-------|--------|----|----|------------------------------|
| 名称 | 类型 | 只读 | 可选 | 说明 |
| year | number | 否 | 否 | 选中日期的年 |
| month | number | 否 | 否 | 选中日期的月(0~11)，0表示1月，11表示12月。 |
| day | number | 否 | 否 | 选中日期的日。 |
[DatePickerResult对象说明]

TypeScript 复制代码

@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 |

TypeScript 复制代码

 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<boolean>] | 是 | 设置隐私敏感，隐私模式下Gauge指针指向0位置，最大值最小值文本将被遮罩，量程显示灰色或者底色。 说明： 设置null则不敏感。需要卡片框架支持。 |
| contentModiffer | [ContentModifier<GaugeConfiguration>](#参数名类型必填说明 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<boolean>] 是设置隐私敏感，隐私模式下Gauge指针指向0位置，最大值最小值文本将被遮罩，量程显示灰色或者底色。说明：设置null则不敏感。需要卡片框架支持。 contentModiffer ContentModifier<GaugeConfiguration> 是在Gauge组件上，定制内容区的方法。 modifier: 内容修改器，开发者需要自定义class实现ContentModifier接口。) | 是 | 在Gauge组件上，定制内容区的方法。 modifier: 内容修改器，开发者需要自定义class实现ContentModifier接口。 |

|-------|-------------|----|-----------------------------------------------------------------------|
| 名称 | 类型 | 必填 | 说明 |
| icon | ResourceStr | 否 | 图标资源路径。 说明： 不配置则使用默认的三角形样式指针。支持使用svg格式的图标，若使用其他格式，则使用默认的三角形样式指针。 |
| space | Dimension | 否 | 指针距离圆环外边的间距。(不支持百分比) |
[GaugeIndicatorOptions对象说明]

|-------|--------|----|----------|
| 名称 | 类型 | 必填 | 说明 |
| value | number | 是 | 当前数据值 |
| min | number | 是 | 当前数据段最小值 |
| max | number | 是 | 当前数据段最大值 |
[GaugeConfiguration对象说明]

TypeScript 复制代码

@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<GaugeConfiguration>{
  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](#参数名类型必填说明 images Array<ImageFrameInfo> 是设置图片帧信息集合。每一帧的帧信息(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)包含图片路径、图片大小、图片位置和图片播放时长信息，详见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 |

|----------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 名称 | 类型 | 必填 | 说明 |
| 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 | 否 | 每一帧图片的播放时长，单位毫秒。 |
[ImageFrameInfo对象说明]

（2）事件

|----------|------------------------|
| 事件名 | 说明 |
| onStart | 状态回调，动画开始播放时触发。 |
| onPause | 状态回调，动画暂停播放时触发。 |
| onRepeat | 状态回调，动画重复播放时触发。 |
| onCancel | 状态回调，动画返回最初状态时触发。 |
| onFinish | 状态回调，动画播放完成时或者停止播放时触发。 |

TypeScript 复制代码

@State state:AnimationStatus=AnimationStatus.Initial
  @Builder imageTest(){
    ImageAnimator()
      .images([
        {src:$r('app.media.1'),width:200,height:200,duration:1000,left:60,top:20},
        {src:$r('app.media.2'),width:200,height:200,duration:1000,left:60,top:20},
        {src:$r('app.media.3'),width:200,height:200,duration:1000,left:60,top:20},
        {src:$r('app.media.1'),width:200,height:200,duration:1000,left:60,top:20},
        {src:$r('app.media.2'),width:200,height:200,duration:1000,left:60,top:20},
        {src:$r('app.media.3'),width:200,height:200,duration:1000,left:60,top:20},
        {src:$r('app.media.1'),width:200,height:200,duration:1000,left:60,top:20},
        {src:$r('app.media.2'),width:200,height:200,duration:1000,left:60,top:20},
        {src:$r('app.media.3'),width:200,height:200,duration:1000,left:60,top:20},
        {src:$r('app.media.1'),width:200,height:200,duration:1000,left:60,top:20},
        {src:$r('app.media.2'),width:200,height:200,duration:1000,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）属性

TypeScript 复制代码

@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 | 滚动全部循环次数完成时触发回调。 |

TypeScript 复制代码

@Builder marqueeTest(){
    Marquee({start:true,step:6,loop:-1,fromStart:true,
      src:'这是滚动的文字不得不哈睡觉哦到时间到死u都i饿啊的就的就哦啊司机哦啊'})
      .width(100)
      .backgroundColor('#abcdef')
      .marqueeUpdateStrategy(MarqueeUpdateStrategy.PRESERVE_POSITION)
  }

以垂直列表形式显示的菜单。

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

Menu的子组件包含MenuItem、MenuItemGroup

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

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

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

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

|----------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 参数名 | 类型 | 必填 | 说明 |
| 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](#33000000。 -startMargin：分割线与menuItemGroup侧边起端的距离, 默认值是16。 -endMargin：分割线与menuItemGroup侧边结束端的距离, 默认值是16。 subMenuExpandingMode SubMenuExpandingMode 是 Menu子菜单展开样式。默认值：SubMenuExpandingMode.SIDE_EXPAND) | 是 | Menu子菜单展开样式。默认值：SubMenuExpandingMode.SIDE_EXPAND |

|-----------------|----------------------|
| 名称 | 说明 |
| SIDE_EXPAND | 默认展开样式，子菜单位于同一平面侧边展开 |
| EMBEDDED_EXPAND | 直接展开样式，子菜单嵌于主菜单内展开 |
| STACK_EXPAND | 堆叠样式，子菜单浮于主菜单上方展开 |
[SubMenuExpandingMode 枚举说明]

2. MenuItem

用来展示菜单Menu中具体的item菜单项

（1）接口

MenuItem(value?: MenuItemOptions| CustomBuilder)

|-----------------|----------------------|----|---------------------------------------------------|
| 名称 | 类型 | 必填 | 说明 |
| 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图标不显示。 |
[MenuItemOptions对象说明]

（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时，表示未选中。 |

3. MenuItemGrop

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

子组件包含MenuItem子组件

（1）MenuItemGrop接口

MenuItemGroup(value?: MenuItemGroupOptions)

|--------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----|-------------------|
| 名称 | 类型 | 必填 | 说明 |
| header | ResourceStr | CustomBuilder | 否 | 设置对应group的标题显示信息。 |
| footer | ResourceStr | CustomBuilder | 否 | 设置对应group的尾部显示信息。 |
[MenuItemGroupOptions对象说明]

TypeScript 复制代码

@Entry
@Component
struct Component3Page {
  @State message: string = 'Hello World';

  build() {
    Column(){
     
    }

    .height('100%')
    .width('100%')
    .bindMenu(this.menuTest())
 
  }
// 自定义图标
  sIcon:SymbolGlyphModifier= new SymbolGlyphModifier($r('sys.symbol.car'))
  eIcon:SymbolGlyphModifier= new SymbolGlyphModifier($r('sys.symbol.person_crop_circle_fill_1'))

  // Menu菜单组件
  @Builder menuTest(){
    Menu(){
      MenuItem({startIcon:$r('app.media.1'),
        content:'首页',endIcon:$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组件是路由导航的根视图容器，一般作为Page页面的根容器使用，其内部默认包含了标题栏、内容区和工具栏，其中内容区默认首页显示导航内容（Navigation的子组件）或非首页显示（NavDestination的子组件），首页和非首页通过路由进行切换。

**Navigation(pathInfos: NavPathStack)：**绑定路由栈到Navigation组件。

|-----------|--------------|----|--------|
| 参数名 | 类型 | 必填 | 说明 |
| pathInfos | NavPathStack | 是 | 路由栈信息。 |

1. title属性：设置页面标题

NavigationCommonTitle

名称	类型	必填	说明
main	string	是	设置主标题。
sub	string	是	设置副标题。

NavigationCustomTitle

名称	类型	必填	说明
builder	CustomBuilder	是	设置标题栏内容。
height	TitleHeight \| Length	是	设置标题栏高度。

2. Menus属性：设置页面右上角菜单

不支持通过SymbolGlyphModifier对象的fontSize属性修改图标大小、effectStrategy属性修改动效、symbolEffect属性修改动效类型。

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

|-------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----|----------|
| 参数名 | 类型 | 必填 | 说明 |
| value | Array<[NavigationMenuItem](#参数名类型必填说明 value Array<NavigationMenuItem> | CustomBuilder 是页面右上角菜单。)> | CustomBuilder | 是 | 页面右上角菜单。 |

3.titleMode属性：设置页面标题栏显示模式

|-------|----------------------------------------------------------------------------------------------------------|----|-----------------------------------------|
| 参数名 | 类型 | 必填 | 说明 |
| value | [NavigationTitleMode](#参数名类型必填说明 value NavigationTitleMode 是页面标题栏显示模式。默认值：NavigationTitleMode.Free) | 是 | 页面标题栏显示模式。默认值：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<[ToolbarItem](#参数名类型必填说明 value Array<ToolbarItem> | CustomBuilder 是工具栏内容，使用Array<ToolbarItem>写法设置的工具栏有如下特性：工具栏所有选项均分底部工具栏，在每个均分内容区布局文本和图标。文本超长时，若工具栏选项个数小于5个，优先拓展选项的宽度，最大宽度与屏幕等宽，其次逐级缩小，缩小之后换行，最后...截断。竖屏最多支持显示5个图标，多余的图标会被放入自动生成的更多图标。横屏时，如果为Split模式，仍按照竖屏规则显示，如果为Stack模式需配合menus属性的Array<NavigationMenuItem>使用，底部工具栏会自动隐藏，同时底部工具栏所有选项移动至页面右上角菜单。使用CustomBuilder写法为用户自定义工具栏选项，除均分底部工具栏外不具备以上功能。 options NavigationToolbarOptions1 否工具栏选项。)> | CustomBuilder | 是 | 工具栏内容，使用Array<[ToolbarItem](#参数名类型必填说明 value Array<ToolbarItem> | CustomBuilder 是工具栏内容，使用Array<ToolbarItem>写法设置的工具栏有如下特性：工具栏所有选项均分底部工具栏，在每个均分内容区布局文本和图标。文本超长时，若工具栏选项个数小于5个，优先拓展选项的宽度，最大宽度与屏幕等宽，其次逐级缩小，缩小之后换行，最后...截断。竖屏最多支持显示5个图标，多余的图标会被放入自动生成的更多图标。横屏时，如果为Split模式，仍按照竖屏规则显示，如果为Stack模式需配合menus属性的Array<NavigationMenuItem>使用，底部工具栏会自动隐藏，同时底部工具栏所有选项移动至页面右上角菜单。使用CustomBuilder写法为用户自定义工具栏选项，除均分底部工具栏外不具备以上功能。 options NavigationToolbarOptions1 否工具栏选项。)>写法设置的工具栏有如下特性：工具栏所有选项均分底部工具栏，在每个均分内容区布局文本和图标。文本超长时，若工具栏选项个数小于5个，优先拓展选项的宽度，最大宽度与屏幕等宽，其次逐级缩小，缩小之后换行，最后...截断。竖屏最多支持显示5个图标，多余的图标会被放入自动生成的更多图标。横屏时，如果为[Split](#参数名类型必填说明 value Array<ToolbarItem> | CustomBuilder 是工具栏内容，使用Array<ToolbarItem>写法设置的工具栏有如下特性：工具栏所有选项均分底部工具栏，在每个均分内容区布局文本和图标。文本超长时，若工具栏选项个数小于5个，优先拓展选项的宽度，最大宽度与屏幕等宽，其次逐级缩小，缩小之后换行，最后...截断。竖屏最多支持显示5个图标，多余的图标会被放入自动生成的更多图标。横屏时，如果为Split模式，仍按照竖屏规则显示，如果为Stack模式需配合menus属性的Array<NavigationMenuItem>使用，底部工具栏会自动隐藏，同时底部工具栏所有选项移动至页面右上角菜单。使用CustomBuilder写法为用户自定义工具栏选项，除均分底部工具栏外不具备以上功能。 options NavigationToolbarOptions1 否工具栏选项。)模式，仍按照竖屏规则显示，如果为[Stack](#参数名类型必填说明 value Array<ToolbarItem> | CustomBuilder 是工具栏内容，使用Array<ToolbarItem>写法设置的工具栏有如下特性：工具栏所有选项均分底部工具栏，在每个均分内容区布局文本和图标。文本超长时，若工具栏选项个数小于5个，优先拓展选项的宽度，最大宽度与屏幕等宽，其次逐级缩小，缩小之后换行，最后...截断。竖屏最多支持显示5个图标，多余的图标会被放入自动生成的更多图标。横屏时，如果为Split模式，仍按照竖屏规则显示，如果为Stack模式需配合menus属性的Array<NavigationMenuItem>使用，底部工具栏会自动隐藏，同时底部工具栏所有选项移动至页面右上角菜单。使用CustomBuilder写法为用户自定义工具栏选项，除均分底部工具栏外不具备以上功能。 options NavigationToolbarOptions1 否工具栏选项。)模式需配合menus属性的Array<[NavigationMenuItem](#参数名类型必填说明 value Array<ToolbarItem> | CustomBuilder 是工具栏内容，使用Array<ToolbarItem>写法设置的工具栏有如下特性：工具栏所有选项均分底部工具栏，在每个均分内容区布局文本和图标。文本超长时，若工具栏选项个数小于5个，优先拓展选项的宽度，最大宽度与屏幕等宽，其次逐级缩小，缩小之后换行，最后...截断。竖屏最多支持显示5个图标，多余的图标会被放入自动生成的更多图标。横屏时，如果为Split模式，仍按照竖屏规则显示，如果为Stack模式需配合menus属性的Array<NavigationMenuItem>使用，底部工具栏会自动隐藏，同时底部工具栏所有选项移动至页面右上角菜单。使用CustomBuilder写法为用户自定义工具栏选项，除均分底部工具栏外不具备以上功能。 options NavigationToolbarOptions1 否工具栏选项。)>使用，底部工具栏会自动隐藏，同时底部工具栏所有选项移动至页面右上角菜单。使用CustomBuilder写法为用户自定义工具栏选项，除均分底部工具栏外不具备以上功能。 |
| options | [NavigationToolbarOptions](#参数名类型必填说明 value Array<ToolbarItem> | CustomBuilder 是工具栏内容，使用Array<ToolbarItem>写法设置的工具栏有如下特性：工具栏所有选项均分底部工具栏，在每个均分内容区布局文本和图标。文本超长时，若工具栏选项个数小于5个，优先拓展选项的宽度，最大宽度与屏幕等宽，其次逐级缩小，缩小之后换行，最后...截断。竖屏最多支持显示5个图标，多余的图标会被放入自动生成的更多图标。横屏时，如果为Split模式，仍按照竖屏规则显示，如果为Stack模式需配合menus属性的Array<NavigationMenuItem>使用，底部工具栏会自动隐藏，同时底部工具栏所有选项移动至页面右上角菜单。使用CustomBuilder写法为用户自定义工具栏选项，除均分底部工具栏外不具备以上功能。 options NavigationToolbarOptions1 否工具栏选项。)1 | 否 | 工具栏选项。 |

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](#参数名类型必填说明 value NavBarPosition 是导航栏位置。默认值：NavBarPosition.Start) | 是 | 导航栏位置。默认值：NavBarPosition.Start |

NavBarPosition枚举说明

名称	说明
Start	双栏显示时，主列在主轴方向首部。
End	双栏显示时，主列在主轴方向尾部。

10.mode：设置导航栏的显示模式。

支持Stack、Split与Auto模式。

|-------|--------------------------------------------------------------------------------------------------------------|----|-------------------------------------------------------|
| 参数名 | 类型 | 必填 | 说明 |
| value | [NavigationMode](#参数名类型必填说明 value NavigationMode 是导航栏的显示模式。默认值：NavigationMode.Auto 自适应：基于组件宽度自适应单栏和双栏。) | 是 | 导航栏的显示模式。默认值：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>	否	配置扩展安全区域的类型。默认值: [LayoutSafeAreaType.SYSTEM]
edges	Array <LayoutSafeAreaEdge>	否	配置扩展安全区域的方向。默认值: [LayoutSafeAreaEdge.TOP, LayoutSafeAreaEdge.BOTTOM]。

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

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

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

参数名	类型	必填	说明
style	Optional<SystemBarStyle>	是	系统状态栏样式

不建议混合使用systemBarStyle属性和window设置状态栏样式的相关接口，例如：setWindowSystemBarProperties。
初次设置Navigation/NavDestination的systemBarStyle属性时，会备份当前状态栏样式用于后续的恢复场景。
Navigation总是以首页（页面栈内没有NavDestination时）或者栈顶NavDestination设置的状态栏样式为准。
Navigation首页或者任何栈顶NavDestination页面，如果设置了有效的systemBarStyle，则会使用设置的样式，反之如果之前已经备份了样式，则使用备份的样式，否则不做任何处理。
Split模式下的Navigation，如果内容区没有NavDestination，则遵从Navigation首页的设置，反之则遵从栈顶NavDestination的设置。
仅支持在主窗口的主页面中使用systemBarStyle设置状态栏样式。
仅当Navigation占满整个页面时，设置的样式才会生效，当Navigation没有占满整个页面时，如果有备份的样式，则恢复备份的样式。
当页面设置不同样式时，在页面转场开始时生效。
非全屏窗口下，Navigation/NavDestination设置的状态栏不生效。

1.onTitleModeChange

当titleMode为NavigationTitleMode.Free时，随着可滚动组件的滑动标题栏模式发生变化时触发此回调。

参数名	类型	必填	说明
titleMode	[NavigationTitleMode](#参数名类型必填说明 titleMode NavigationTitleMode 是标题模式。)	是	标题模式。

2.onNavBarStateChange

导航栏显示状态切换时触发该回调。

参数名	类型	必填	说明
isVisible	boolean	是	isVisible为true时表示显示，为false时表示隐藏。

3.onNavigationModeChange

当Navigation首次显示或者单双栏状态发生变化时触发该回调。

参数名	类型	必填	说明
mode	[NavigationMode](#参数名类型必填说明 mode NavigationMode 是 NavigationMode.Split: 当前Navigation显示为双栏; NavigationMode.Stack: 当前Navigation显示为单栏。)	是	NavigationMode.Split: 当前Navigation显示为双栏; NavigationMode.Stack: 当前Navigation显示为单栏。

4.customNavContentTransition

自定义转场动画回调。

参数名	类型	必填	说明
from	[NavContentInfo](#参数名类型必填说明 from NavContentInfo 是退场Destination的页面。 to NavContentInfo 是进场Destination的页面。 operation NavigationOperation 是转场类型。)	是	退场Destination的页面。
to	[NavContentInfo](#参数名类型必填说明 from NavContentInfo 是退场Destination的页面。 to NavContentInfo 是进场Destination的页面。 operation NavigationOperation 是转场类型。)	是	进场Destination的页面。
operation	[NavigationOperation](#参数名类型必填说明 from NavContentInfo 是退场Destination的页面。 to NavContentInfo 是进场Destination的页面。 operation NavigationOperation 是转场类型。)	是	转场类型。

返回值：

类型	说明
[NavigationAnimatedTransition](#类型说明 NavigationAnimatedTransition	undefined 自定义转场动画协议。 undefined: 返回未定义，执行默认转场动效。) \| undefined

5.NavPathStack

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

6.pushPath

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

参数名	类型	必填	说明
info	[NavPathInfo](#参数名类型必填说明 info NavPathInfo 是 NavDestination页面的信息。 options NavigationOptions 否页面栈操作选项。)	是	NavDestination页面的信息。
options	[NavigationOptions](#参数名类型必填说明 info NavPathInfo 是 NavDestination页面的信息。 options NavigationOptions 否页面栈操作选项。)	否	页面栈操作选项。

7.pushPathByName

将name指定的NavDestination页面信息入栈，传递的数据为param，添加onPop回调接收入栈页面出栈时的返回结果，并进行处理。

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

8.pushDestination

将info指定的NavDestination页面信息入栈，使用Promise异步回调返回接口调用结果，具体根据options中指定不同的LaunchMode，有不同的行为。

参数：

参数名	类型	必填	说明
info	[NavPathInfo](#参数名类型必填说明 info NavPathInfo 是 NavDestination页面的信息。 options NavigationOptions 否页面栈操作选项。)	是	NavDestination页面的信息。
options	[NavigationOptions](#参数名类型必填说明 info NavPathInfo 是 NavDestination页面的信息。 options NavigationOptions 否页面栈操作选项。)	否	页面栈操作选项。

返回值：

类型	说明
Promise<void>	异常返回结果。

错误码：

以下错误码的详细介绍请参见通用错误码和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<[PopInfo](#参数名类型必填说明 name string 是 NavDestination页面名称。 param Object 是 NavDestination页面详细参数。 onPop Callback<PopInfo> 是 Callback回调，用于页面出栈时处理返回结果。仅pop中设置result参数后触发。 animated boolean 否是否支持转场动画，默认值：true。)>	是	Callback回调，用于页面出栈时处理返回结果。仅pop中设置result参数后触发。
animated	boolean	否	是否支持转场动画，默认值：true。

返回值：

类型	说明
Promise<void>	异常返回结果。

错误码：

以下错误码的详细介绍请参见通用错误码和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](#参数名类型必填说明 info NavPathInfo 是新栈顶页面参数信息。 options NavigationOptions 否页面栈操作选项。)	是	新栈顶页面参数信息。
options	[NavigationOptions](#参数名类型必填说明 info NavPathInfo 是新栈顶页面参数信息。 options NavigationOptions 否页面栈操作选项。)	否	页面栈操作选项。

11.replacePathByName

将当前页面栈栈顶退出，将name指定的页面入栈。

参数：

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

12.removeByIndexes

将页面栈内索引值在indexes中的NavDestination页面删除。

参数：

参数名	类型	必填	说明
indexes	Array<number>	是	待删除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](#类型说明 NavPathInfo 返回栈顶NavDestination页面的信息。 undefined 当路由栈为空时返回undefined。)	返回栈顶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<string>	返回栈中所有NavDestination页面的名称。

22.getParamByIndex

获取index指定的NavDestination页面的参数信息。

参数：

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

返回值：

类型	说明
unknown	返回对应NavDestination页面的参数信息。
undefined	传入index无效时返回undefined。

23.getParamByName

获取全部名为name的NavDestination页面的参数信息。

参数：

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

返回值：

类型	说明
Array<unknown>	返回全部名为name的NavDestination页面的参数信息。

24.getIndexByName

获取全部名为name的NavDestination页面的位置索引。

参数：

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

返回值：

类型	说明
Array<number>	返回全部名为name的NavDestination页面的位置索引。

25.size

获取栈大小。

返回值：

类型	说明
number	返回栈大小。

26.disableAnimation

参数：

参数名	类型	必填	说明
value	boolean	是	是否关闭转场动画，默认值：false。

27.getParent

获取父NavPathStack

返回值：

类型	说明
[NavPathStack](#类型说明 NavPathStack	null 如果当前NavPathStack所属Navigation的外层有另外的一层Navigation，则能够获取到外层Navigation的NavPathStack。否则获取不到NavPathStack，返回null。) \| null

28.setInterception

设置Navigation页面跳转拦截回调。

参数：

参数名	类型	必填	说明
interception	[NavigationInterception](#参数名类型必填说明 interception NavigationInterception 是设置Navigation跳转拦截对象。)	是	设置Navigation跳转拦截对象。

29.NavPathInfo

路由页面信息。

30.constructor

constructor(name: string, param: unknown, onPop?: Callback<PopInfo>, isEntry?: boolean)

参数名	类型	必填	说明
name	string	是	NavDestination页面名称。
param	unknown	否	NavDestination页面详细参数。
onPop11+	Callback<[PopInfo](#参数名类型必填说明 name string 是 NavDestination页面名称。 param unknown 否 NavDestination页面详细参数。 onPop11+ Callback<PopInfo> 否 NavDestination页面触发pop时返回的回调。 isEntry12+ boolean 否标记NavDestination是否为入口页面。默认值：false 标记清理时机：1、在当前navDestination页面触发一次全局back事件。2、应用退至后台。说明：入口NavDestination不响应应用内的全局back事件，直接触发应用间的全局back事件)>	否	NavDestination页面触发pop时返回的回调。
isEntry12+	boolean	否	标记NavDestination是否为入口页面。默认值：false 标记清理时机：1、在当前navDestination页面触发一次全局back事件。2、应用退至后台。说明：入口NavDestination不响应应用内的全局back事件，直接触发应用间的全局back事件

31.PopInfo

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

名称	类型	必填	说明
info	[NavPathInfo](#名称类型必填说明 info NavPathInfo 是页面触发返回时的当前页面信息，系统自动获取填入，无需开发者传入。 result Object 是页面触发返回时的结果，开发者自定义对象。)	是	页面触发返回时的当前页面信息，系统自动获取填入，无需开发者传入。
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](#名称类型必填说明 timeout number 否动画超时结束时间。单位：ms。默认值：可交互动画无默认值，不可交互动画默认超时时间为1000ms。 transition (transitionProxy : NavigationTransitionProxy) => void 是自定义转场动画执行回调。 transitionProxy: 自定义转场动画代理对象。 onTransitionEnd (success: boolean) => void 否转场完成回调。 success: 转场是否成功。 isInteractive12+ boolean 否本次转场动画是否为可交互转场。默认值：false。)) => void	是	自定义转场动画执行回调。 transitionProxy: 自定义转场动画代理对象。
onTransitionEnd	(success: boolean) => void	否	转场完成回调。 success: 转场是否成功。
isInteractive12+	boolean	否	本次转场动画是否为可交互转场。默认值：false。

34.NavigationTransitionProxy

自定义转场动画代理对象

名称	类型	必填	说明
from	[NavContentInfo](#名称类型必填说明 from NavContentInfo 是退场页面信息。 to NavContentInfo 是进场页面信息。 isInteractive12+ boolean 否是否为可交互转场动画。)	是	退场页面信息。
to	[NavContentInfo](#名称类型必填说明 from NavContentInfo 是退场页面信息。 to NavContentInfo 是进场页面信息。 isInteractive12+ boolean 否是否为可交互转场动画。)	是	进场页面信息。
isInteractive12+	boolean	否	是否为可交互转场动画。

35.finishTransition

结束本次自定义转场动画，开发者需要主动触发该方法来结束本次转场，否则系统会在timeout的时间后结束本次转场。

36.cancelTransition

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

37.updateTransition

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

参数：

参数名	类型	必填	说明
progress	number	是	设置交互转场动画进度百分比。取值范围 0-1。

38.NavigationInterception

Navigation跳转拦截对象。

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

39.InterceptionShowCallback

navigation页面跳转前和页面跳转后的拦截回调

参数名	类型	必填	说明
from	NavDestinationContext \|[NavBar](#参数名类型必填说明 from NavDestinationContext	NavBar 是页面跳转之前的栈顶页面信息。参数值为navBar，则表示跳转前的页面为Navigation首页。 to NavDestinationContext	NavBar 是页面跳转之后的栈顶页面信息。参数值为navBar，则表示跳转的目标页面为Navigation首页。 operation NavigationOperation 是当前页面跳转类型。 isAnimated boolean 是页面跳转是否有动画。)
to	NavDestinationContext \|[NavBar](#参数名类型必填说明 from NavDestinationContext	NavBar 是页面跳转之前的栈顶页面信息。参数值为navBar，则表示跳转前的页面为Navigation首页。 to NavDestinationContext	NavBar 是页面跳转之后的栈顶页面信息。参数值为navBar，则表示跳转的目标页面为Navigation首页。 operation NavigationOperation 是当前页面跳转类型。 isAnimated boolean 是页面跳转是否有动画。)
operation	[NavigationOperation](#参数名类型必填说明 from NavDestinationContext	NavBar 是页面跳转之前的栈顶页面信息。参数值为navBar，则表示跳转前的页面为Navigation首页。 to NavDestinationContext	NavBar 是页面跳转之后的栈顶页面信息。参数值为navBar，则表示跳转的目标页面为Navigation首页。 operation NavigationOperation 是当前页面跳转类型。 isAnimated boolean 是页面跳转是否有动画。)
isAnimated	boolean	是	页面跳转是否有动画。

40.InterceptionModeCallback

navigation单双栏显示状态发生变更时的拦截回调。

参数名	类型	必填	说明
mode	[NavigationMode](#参数名类型必填说明 mode NavigationMode 是导航栏的显示模式。)	是	导航栏的显示模式。

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](#名称类型必填说明 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
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](#名称类型必填说明 backgroundColor ResourceColor 否标题栏背景颜色，不设置时为系统默认颜色。元服务API：从API version 11开始，该接口支持在元服务中使用。 backgroundBlurStyle BlurStyle 否标题栏背景模糊样式，不设置时关闭背景模糊效果。元服务API：从API version 11开始，该接口支持在元服务中使用。 barStyle12+ BarStyle 否标题栏布局方式设置。默认值：BarStyle.STANDARD 元服务API：从API version 12开始，该接口支持在元服务中使用。 paddingStart12+ LengthMetrics 否标题栏起始端内间距。仅支持以下任一场景: 1. 显示返回图标，即hideBackButton为false； 2. 使用非自定义标题，即标题value类型为ResourceStr或NavigationCommonTitle。默认值： LengthMetrics.resource( $r('sys.float.margin_left'))。元服务API：从API version 12开始，该接口支持在元服务中使用。 paddingEnd12+ LengthMetrics 否标题栏结束端内间距。仅支持以下任一场景: 1. 使用非自定义菜单，即菜单value为Array ； 2. 没有右上角菜单，且使用非自定义标题，即标题value类型为ResourceStr或NavigationCommonTitle。默认值： LengthMetrics.resource($ r('sys.float.margin_right'))。元服务API：从API version 12开始，该接口支持在元服务中使用。 mainTitleModifier13+ TextModifier 否主标题属性修改器。有如下几点使用规则： 1. 通过Modifier设置的属性会覆盖系统默认的属性（如果Modifier设置了fontSize, maxFontSize, minFontSize任一属性，则系统设置的大小相关属性不生效，以开发者的设置为准）； 2. 不设该属性或者设置了异常值，则恢复系统默认设置； 3. Free模式下设置字体大小时，原有滑动改变标题大小的效果失效。元服务API：从API version 13开始，该接口支持在元服务中使用。 subTitleModifier13+ TextModifier 否子标题属性修改器。有如下几点使用规则： 1. 通过Modifier设置的属性会覆盖系统默认的属性（如果Modifier设置了fontSize, maxFontSize, minFontSize任一属性，则系统设置的大小相关属性不生效，以开发者的设置为准）； 2. 不设该属性或者设置了异常值，则恢复系统默认设置。元服务API：从API version 13开始，该接口支持在元服务中使用。)	否	标题栏布局方式设置。默认值：BarStyle.STANDARD 元服务API：从API version 12开始，该接口支持在元服务中使用。
paddingStart12+	LengthMetrics	否	标题栏起始端内间距。仅支持以下任一场景: 1. 显示返回图标，即[hideBackButton](#名称类型必填说明 backgroundColor ResourceColor 否标题栏背景颜色，不设置时为系统默认颜色。元服务API：从API version 11开始，该接口支持在元服务中使用。 backgroundBlurStyle BlurStyle 否标题栏背景模糊样式，不设置时关闭背景模糊效果。元服务API：从API version 11开始，该接口支持在元服务中使用。 barStyle12+ BarStyle 否标题栏布局方式设置。默认值：BarStyle.STANDARD 元服务API：从API version 12开始，该接口支持在元服务中使用。 paddingStart12+ LengthMetrics 否标题栏起始端内间距。仅支持以下任一场景: 1. 显示返回图标，即hideBackButton为false； 2. 使用非自定义标题，即标题value类型为ResourceStr或NavigationCommonTitle。默认值： LengthMetrics.resource( $r('sys.float.margin_left'))。元服务API：从API version 12开始，该接口支持在元服务中使用。 paddingEnd12+ LengthMetrics 否标题栏结束端内间距。仅支持以下任一场景: 1. 使用非自定义菜单，即菜单value为Array ； 2. 没有右上角菜单，且使用非自定义标题，即标题value类型为ResourceStr或NavigationCommonTitle。默认值： LengthMetrics.resource($ r('sys.float.margin_right'))。元服务API：从API version 12开始，该接口支持在元服务中使用。 mainTitleModifier13+ TextModifier 否主标题属性修改器。有如下几点使用规则： 1. 通过Modifier设置的属性会覆盖系统默认的属性（如果Modifier设置了fontSize, maxFontSize, minFontSize任一属性，则系统设置的大小相关属性不生效，以开发者的设置为准）； 2. 不设该属性或者设置了异常值，则恢复系统默认设置； 3. Free模式下设置字体大小时，原有滑动改变标题大小的效果失效。元服务API：从API version 13开始，该接口支持在元服务中使用。 subTitleModifier13+ TextModifier 否子标题属性修改器。有如下几点使用规则： 1. 通过Modifier设置的属性会覆盖系统默认的属性（如果Modifier设置了fontSize, maxFontSize, minFontSize任一属性，则系统设置的大小相关属性不生效，以开发者的设置为准）； 2. 不设该属性或者设置了异常值，则恢复系统默认设置。元服务API：从API version 13开始，该接口支持在元服务中使用。)为false； 2. 使用非自定义标题，即[标题value](#名称类型必填说明 backgroundColor ResourceColor 否标题栏背景颜色，不设置时为系统默认颜色。元服务API：从API version 11开始，该接口支持在元服务中使用。 backgroundBlurStyle BlurStyle 否标题栏背景模糊样式，不设置时关闭背景模糊效果。元服务API：从API version 11开始，该接口支持在元服务中使用。 barStyle12+ BarStyle 否标题栏布局方式设置。默认值：BarStyle.STANDARD 元服务API：从API version 12开始，该接口支持在元服务中使用。 paddingStart12+ LengthMetrics 否标题栏起始端内间距。仅支持以下任一场景: 1. 显示返回图标，即hideBackButton为false； 2. 使用非自定义标题，即标题value类型为ResourceStr或NavigationCommonTitle。默认值： LengthMetrics.resource( $r('sys.float.margin_left'))。元服务API：从API version 12开始，该接口支持在元服务中使用。 paddingEnd12+ LengthMetrics 否标题栏结束端内间距。仅支持以下任一场景: 1. 使用非自定义菜单，即菜单value为Array ； 2. 没有右上角菜单，且使用非自定义标题，即标题value类型为ResourceStr或NavigationCommonTitle。默认值： LengthMetrics.resource($ r('sys.float.margin_right'))。元服务API：从API version 12开始，该接口支持在元服务中使用。 mainTitleModifier13+ TextModifier 否主标题属性修改器。有如下几点使用规则： 1. 通过Modifier设置的属性会覆盖系统默认的属性（如果Modifier设置了fontSize, maxFontSize, minFontSize任一属性，则系统设置的大小相关属性不生效，以开发者的设置为准）； 2. 不设该属性或者设置了异常值，则恢复系统默认设置； 3. Free模式下设置字体大小时，原有滑动改变标题大小的效果失效。元服务API：从API version 13开始，该接口支持在元服务中使用。 subTitleModifier13+ TextModifier 否子标题属性修改器。有如下几点使用规则： 1. 通过Modifier设置的属性会覆盖系统默认的属性（如果Modifier设置了fontSize, maxFontSize, minFontSize任一属性，则系统设置的大小相关属性不生效，以开发者的设置为准）； 2. 不设该属性或者设置了异常值，则恢复系统默认设置。元服务API：从API version 13开始，该接口支持在元服务中使用。)类型为ResourceStr或NavigationCommonTitle。默认值： LengthMetrics.resource($r('sys.float.margin_left'))。元服务API：从API version 12开始，该接口支持在元服务中使用。
paddingEnd12+	LengthMetrics	否	标题栏结束端内间距。仅支持以下任一场景: 1. 使用非自定义菜单，即[菜单value](#名称类型必填说明 backgroundColor ResourceColor 否标题栏背景颜色，不设置时为系统默认颜色。元服务API：从API version 11开始，该接口支持在元服务中使用。 backgroundBlurStyle BlurStyle 否标题栏背景模糊样式，不设置时关闭背景模糊效果。元服务API：从API version 11开始，该接口支持在元服务中使用。 barStyle12+ BarStyle 否标题栏布局方式设置。默认值：BarStyle.STANDARD 元服务API：从API version 12开始，该接口支持在元服务中使用。 paddingStart12+ LengthMetrics 否标题栏起始端内间距。仅支持以下任一场景: 1. 显示返回图标，即hideBackButton为false； 2. 使用非自定义标题，即标题value类型为ResourceStr或NavigationCommonTitle。默认值： LengthMetrics.resource( $r('sys.float.margin_left'))。元服务API：从API version 12开始，该接口支持在元服务中使用。 paddingEnd12+ LengthMetrics 否标题栏结束端内间距。仅支持以下任一场景: 1. 使用非自定义菜单，即菜单value为Array ； 2. 没有右上角菜单，且使用非自定义标题，即标题value类型为ResourceStr或NavigationCommonTitle。默认值： LengthMetrics.resource($ r('sys.float.margin_right'))。元服务API：从API version 12开始，该接口支持在元服务中使用。 mainTitleModifier13+ TextModifier 否主标题属性修改器。有如下几点使用规则： 1. 通过Modifier设置的属性会覆盖系统默认的属性（如果Modifier设置了fontSize, maxFontSize, minFontSize任一属性，则系统设置的大小相关属性不生效，以开发者的设置为准）； 2. 不设该属性或者设置了异常值，则恢复系统默认设置； 3. Free模式下设置字体大小时，原有滑动改变标题大小的效果失效。元服务API：从API version 13开始，该接口支持在元服务中使用。 subTitleModifier13+ TextModifier 否子标题属性修改器。有如下几点使用规则： 1. 通过Modifier设置的属性会覆盖系统默认的属性（如果Modifier设置了fontSize, maxFontSize, minFontSize任一属性，则系统设置的大小相关属性不生效，以开发者的设置为准）； 2. 不设该属性或者设置了异常值，则恢复系统默认设置。元服务API：从API version 13开始，该接口支持在元服务中使用。)为Array<NavigationMenuItem>； 2. 没有右上角菜单，且使用非自定义标题，即[标题value](#名称类型必填说明 backgroundColor ResourceColor 否标题栏背景颜色，不设置时为系统默认颜色。元服务API：从API version 11开始，该接口支持在元服务中使用。 backgroundBlurStyle BlurStyle 否标题栏背景模糊样式，不设置时关闭背景模糊效果。元服务API：从API version 11开始，该接口支持在元服务中使用。 barStyle12+ BarStyle 否标题栏布局方式设置。默认值：BarStyle.STANDARD 元服务API：从API version 12开始，该接口支持在元服务中使用。 paddingStart12+ LengthMetrics 否标题栏起始端内间距。仅支持以下任一场景: 1. 显示返回图标，即hideBackButton为false； 2. 使用非自定义标题，即标题value类型为ResourceStr或NavigationCommonTitle。默认值： LengthMetrics.resource( $r('sys.float.margin_left'))。元服务API：从API version 12开始，该接口支持在元服务中使用。 paddingEnd12+ LengthMetrics 否标题栏结束端内间距。仅支持以下任一场景: 1. 使用非自定义菜单，即菜单value为Array ； 2. 没有右上角菜单，且使用非自定义标题，即标题value类型为ResourceStr或NavigationCommonTitle。默认值： LengthMetrics.resource($ r('sys.float.margin_right'))。元服务API：从API version 12开始，该接口支持在元服务中使用。 mainTitleModifier13+ TextModifier 否主标题属性修改器。有如下几点使用规则： 1. 通过Modifier设置的属性会覆盖系统默认的属性（如果Modifier设置了fontSize, maxFontSize, minFontSize任一属性，则系统设置的大小相关属性不生效，以开发者的设置为准）； 2. 不设该属性或者设置了异常值，则恢复系统默认设置； 3. Free模式下设置字体大小时，原有滑动改变标题大小的效果失效。元服务API：从API version 13开始，该接口支持在元服务中使用。 subTitleModifier13+ TextModifier 否子标题属性修改器。有如下几点使用规则： 1. 通过Modifier设置的属性会覆盖系统默认的属性（如果Modifier设置了fontSize, maxFontSize, minFontSize任一属性，则系统设置的大小相关属性不生效，以开发者的设置为准）； 2. 不设该属性或者设置了异常值，则恢复系统默认设置。元服务API：从API version 13开始，该接口支持在元服务中使用。)类型为ResourceStr或NavigationCommonTitle。默认值： LengthMetrics.resource($r('sys.float.margin_right'))。元服务API：从API version 12开始，该接口支持在元服务中使用。
mainTitleModifier13+	TextModifier	否	主标题属性修改器。有如下几点使用规则： 1. 通过Modifier设置的属性会覆盖系统默认的属性（如果Modifier设置了fontSize, maxFontSize, minFontSize任一属性，则系统设置的大小相关属性不生效，以开发者的设置为准）； 2. 不设该属性或者设置了异常值，则恢复系统默认设置； 3. [Free](#名称类型必填说明 backgroundColor ResourceColor 否标题栏背景颜色，不设置时为系统默认颜色。元服务API：从API version 11开始，该接口支持在元服务中使用。 backgroundBlurStyle BlurStyle 否标题栏背景模糊样式，不设置时关闭背景模糊效果。元服务API：从API version 11开始，该接口支持在元服务中使用。 barStyle12+ BarStyle 否标题栏布局方式设置。默认值：BarStyle.STANDARD 元服务API：从API version 12开始，该接口支持在元服务中使用。 paddingStart12+ LengthMetrics 否标题栏起始端内间距。仅支持以下任一场景: 1. 显示返回图标，即hideBackButton为false； 2. 使用非自定义标题，即标题value类型为ResourceStr或NavigationCommonTitle。默认值： LengthMetrics.resource( $r('sys.float.margin_left'))。元服务API：从API version 12开始，该接口支持在元服务中使用。 paddingEnd12+ LengthMetrics 否标题栏结束端内间距。仅支持以下任一场景: 1. 使用非自定义菜单，即菜单value为Array ； 2. 没有右上角菜单，且使用非自定义标题，即标题value类型为ResourceStr或NavigationCommonTitle。默认值： LengthMetrics.resource($ r('sys.float.margin_right'))。元服务API：从API version 12开始，该接口支持在元服务中使用。 mainTitleModifier13+ TextModifier 否主标题属性修改器。有如下几点使用规则： 1. 通过Modifier设置的属性会覆盖系统默认的属性（如果Modifier设置了fontSize, maxFontSize, minFontSize任一属性，则系统设置的大小相关属性不生效，以开发者的设置为准）； 2. 不设该属性或者设置了异常值，则恢复系统默认设置； 3. Free模式下设置字体大小时，原有滑动改变标题大小的效果失效。元服务API：从API version 13开始，该接口支持在元服务中使用。 subTitleModifier13+ TextModifier 否子标题属性修改器。有如下几点使用规则： 1. 通过Modifier设置的属性会覆盖系统默认的属性（如果Modifier设置了fontSize, maxFontSize, minFontSize任一属性，则系统设置的大小相关属性不生效，以开发者的设置为准）； 2. 不设该属性或者设置了异常值，则恢复系统默认设置。元服务API：从API version 13开始，该接口支持在元服务中使用。)模式下设置字体大小时，原有滑动改变标题大小的效果失效。元服务API：从API version 13开始，该接口支持在元服务中使用。
subTitleModifier13+	TextModifier	否	子标题属性修改器。有如下几点使用规则： 1. 通过Modifier设置的属性会覆盖系统默认的属性（如果Modifier设置了fontSize, maxFontSize, minFontSize任一属性，则系统设置的大小相关属性不生效，以开发者的设置为准）； 2. 不设该属性或者设置了异常值，则恢复系统默认设置。元服务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 LaunchMode 否页面栈的操作模式。默认值：LaunchMode.STANDARD animated boolean 否是否支持转场动画。默认值：true。)	否	页面栈的操作模式。默认值：LaunchMode.STANDARD
animated	boolean	否	是否支持转场动画。默认值：true。

2.NavRouter

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

子组件

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

子组件个数异常时：

有且仅有1个时，触发路由到NavDestination的能力失效。
有且仅有1个时，且使用NavDestination场景下，不进行路由。
大于2个时，后续的子组件不显示。
第二个子组件不为NavDestination时，触发路由功能失效。

（1）NavRouter所有属性

1.mode属性：设置指定点击NavRouter跳转到NavDestination页面时，使用的路由模式。

参数：

参数名	类型	必填	说明
mode	[NavRouteMode](#参数名类型必填说明 mode NavRouteMode 是指定点击NavRouter跳转到NavDestination页面时，使用的路由模式。默认值：NavRouteMode.PUSH_WITH_RECREATE)	是	指定点击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](#参数名类型必填说明 value string	CustomBuilder	NavDestinationCommonTitle
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](#参数名类型必填说明 value NavDestinationMode 是 NavDestination类型。默认值: NavDestinationMode.STANDARD)	是	NavDestination类型。默认值: NavDestinationMode.STANDARD

NavDestinationMode枚举说明

名称	说明
STANDARD	标准模式的NavDestination。
DIALOG	默认透明，进出页面栈不影响下层NavDestination的生命周期，不支持系统转场动画。

4.backButtinIcon

设置标题栏返回键图标

参数：

参数名	类型	必填	说明
value	ResourceStr \| PixelMap \| SymbolGlyphModifier12+	是	标题栏返回键图标。

5.Menus

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

参数：

参数名	类型	必填	说明
value	Array<NavigationMenuItem> \| CustomBuilder	是	页面右上角菜单。

6.ignoreLayoutSafeArea

控制组件的布局，使其扩展到非安全区域

参数名	类型	必填	说明
types	Array <LayoutSafeAreaType>	否	配置扩展安全区域的类型。默认值: [LayoutSafeAreaType.SYSTEM]
edges	Array <LayoutSafeAreaEdge>	否	配置扩展安全区域的方向。默认值: [LayoutSafeAreaEdge.TOP, LayoutSafeAreaEdge.BOTTOM]。

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

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

7.sysTemBarStyle

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

参数：

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

说明：

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](#类型说明 RouteMapConfig 当前页面路由配置信息。 undefined 当该页面不是通过路由表配置时返回undefined。)	当前页面路由配置信息。
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](#参数名类型必填说明 controller PatternLockController 否设置PatternLock组件控制器，可用于控制组件状态重置。)	否	设置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<number>	是	与选中宫格圆点顺序一致的数字数组，数字为选中宫格圆点的索引值（第一行圆点从左往右依次为0、1、2，第二行圆点依次为3、4、5，第三行圆点依次为6、7、8）。

（2）onDotConnect

密码输入选中宫格圆点时触发该回调。

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

1.PatternLockController

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

导入对象

TypeScript 复制代码

let patternLockController: PatternLockController = new PatternLockController()

2.constructor

constructor()

PatternLockController的构造函数。

3.reset

reset()

重置组件状态。

4.setChallengeResult

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

名称	类型	必填	说明
result	[PatternLockChallengeResult](#名称类型必填说明 result PatternLockChallengeResult 是图案密码状态。)	是	图案密码状态。

PatternLockChallengeResult枚举说明

名称	说明
CORRECT	图案密码正确。
WRONG	图案密码错误。

ArkTs组件的学习

一. AlphabetIndexer

（1）属性值

（2）事件

二. Blank

三. CalendarPicker

（1）属性

（2）事件

四. Checkbox

（1）属性

（2）事件

五. ContainerSpan

六. DataPanel

七. DatePicker

（2）异常情形说明:

（3）属性

（4）事件

八. Divider

（1）属性

九.Gauge

（1）接口

（2）属性

十. ImageAnimator

(1) 属性

（2）事件

十一. LoadingProgress

（1）属性

十二. Marquee

（1）接口

（2）属性

（3）事件

十三.Menu

1.Menu属性

2. MenuItem

（1）接口

（2）MenuItem属性

（3）MenuItem事件

3. MenuItemGrop

（1）MenuItemGrop接口

十四. Navigation

1.Navigation

（1）Navigation接口

（2）Navigation所有属性

1. title属性：设置页面标题

NavigationCommonTitle

NavigationCustomTitle

2. Menus属性：设置页面右上角菜单

3.titleMode属性：设置页面标题栏显示模式

NavigationTitleMode枚举说明

4.toolbarConfiguration属性：设置工具栏内容，不设置时不显示工具栏

5.hideToolBar属性：设置是否隐藏工具栏

6.hideTitleBar属性：设置是否隐藏标题栏

7.hideBackButton属性：设置是否隐藏标题栏中的返回键。

8.navBarWidth：设置导航栏宽度

9.navBarPosition：设置导航栏位置

NavBarPosition枚举说明

10.mode：设置导航栏的显示模式。

NavigationMode枚举说明

11.backButtonIcon：设置标题栏中返回键图标

12.hideNavBar：设置是否隐藏导航栏

13.navDestination属性：创建NavDestination组件

14.navBarWidthRange：设置导航栏最小和最大宽度（双栏模式下生效）。

15.minContentWidth：设置导航栏内容区最小宽度（双栏模式下生效）

16.ignoreLayoutSafeArea：控制组件的布局，使其扩展到非安全区域

17.systemBarStyle：当Navigation中显示Navigation首页时，设置对应系统状态栏的样式。

（3）Navigation事件

1.onTitleModeChange

2.onNavBarStateChange

3.onNavigationModeChange

4.customNavContentTransition

5.NavPathStack

6.pushPath

7.pushPathByName

8.pushDestination

9.pushDestinationByName

10.replacePath

11.replacePathByName

12.removeByIndexes

13.removeByName

14.removeByNavDestinationId