文章目录一、核心 API 定义1. toolbar 通用属性2. ToolBarItem 工具栏项3. 支持的子组件二、核心使用规则三、完整可运行示例代码四、代码中 toolbar 核心用法说明1. 主页面 Navigation 绑定 toolbar2. NavDestination 子页面独立 toolbar3. 多页面独立工具栏五、运行效果说明总结toolbar是 HarmonyOS ArkUI 提供的全局通用属性用于为支持的容器/页面组件绑定顶部工具栏、导航栏自定义布局。通过Builder自定义工具栏内容结合ToolBarItem实现按钮、滑块、搜索框等控件布局支持顶部导航栏左右侧LEADING / TRAILING灵活布局。核心作用为 Navigation、NavDestination、Page 等组件自定义工具栏支持多控件组合布局支持导航页、子页面独立配置不同工具栏实现页面级、导航级顶部菜单统一管理一、核心 API 定义1. toolbar 通用属性toolbar(builder:BuilderAttrParam):void作用为当前组件绑定自定义工具栏布局参数Builder自定义构建函数返回值无2. ToolBarItem 工具栏项ToolBarItem(options:{placement:ToolBarItemPlacement})用于定义工具栏内子元素的位置TOP_BAR_LEADING顶部栏左侧前导位置TOP_BAR_TRAILING顶部栏右侧尾随位置3. 支持的子组件Button、Slider、Search、Text、Image 等系统组件均可放入工具栏。二、核心使用规则必须使用 Builder 定义工具栏内容内部必须使用 ToolBarItem 包裹子控件支持一个页面绑定独立 toolbar支持 NavDestination 子页面独立配置不同 toolbar支持左右分栏布局leading / trailing三、完整可运行示例代码// xxx.etsEntryComponentstruct SideBarContainerExample{normalIcon:Resource$r(app.media.startIcon)selectedIcon:Resource$r(app.media.startIcon)Statearr:number[][1,2,3]Statecurrent:number1Provide(navPathStack)navPathStack:NavPathStacknewNavPathStack()BuilderMyToolBar(){ToolBarItem({placement:ToolBarItemPlacement.TOP_BAR_LEADING}){Button(left).height(30vp)}ToolBarItem({placement:ToolBarItemPlacement.TOP_BAR_LEADING}){Button(right).height(30vp)}}BuilderMyToolbarNavDest(){ToolBarItem({placement:ToolBarItemPlacement.TOP_BAR_TRAILING}){Slider().width(120vp)}ToolBarItem({placement:ToolBarItemPlacement.TOP_BAR_TRAILING}){Search().width(120vp)}}BuilderPageNavDest(name:string){NavDestination(){Column(){Text(add toolbar).fontSize(30).toolbar(this.MyToolbarNavDest)}.backgroundColor(Color.Grey)}}build(){SideBarContainer(SideBarContainerType.Embed){Column(){ForEach(this.arr,(item:number){Column({space:5}){Image(this.currentitem?this.selectedIcon:this.normalIcon).width(64).height(64)Text(Index0item).fontSize(25).fontColor(this.currentitem?#0A59F7:#999).fontFamily(source-sans-pro,cursive,sans-serif)}.onClick((){this.currentitem})},(item:number)item.toString())}.width(100%).justifyContent(FlexAlign.SpaceEvenly).backgroundColor(#19000000)Navigation(this.navPathStack){Column(){Button(pushPath,{stateEffect:true,type:ButtonType.Capsule}).width(20%).height(40).margin(20).toolbar(this.MyToolBar)Button(showNavDest,{stateEffect:true,type:ButtonType.Capsule}).width(20%).height(40).margin(20).onClick((){this.navPathStack.pushPath({name:1})})}.width(100%).height(100%)}.navBarPosition(NavBarPosition.Start).navBarWidth(50%).navBarWidthRange([25%,70%]).hideBackButton(true).navDestination(this.PageNavDest).height(100%).title(Navigation)}.sideBarWidth(150).minSideBarWidth(50).maxSideBarWidth(300).minContentWidth(0).onChange((value:boolean){console.info(status:value)}).divider({strokeWidth:1vp,color:Color.Gray,startMargin:4vp,endMargin:4vp})}}运行效果如图四、代码中 toolbar 核心用法说明1. 主页面 Navigation 绑定 toolbar.toolbar(this.MyToolBar)绑定左侧两个 Button位置TOP_BAR_LEADING2. NavDestination 子页面独立 toolbarText(add toolbar).toolbar(this.MyToolbarNavDest)子页面独立工具栏包含 Slider Search位置TOP_BAR_TRAILING3. 多页面独立工具栏主页面按钮菜单子页面滑块 搜索完全符合官方页面独立配置 toolbar的规范。五、运行效果说明进入页面Navigation 顶部显示left / right 两个按钮点击showNavDest跳转到子页面子页面顶部显示Slider Search工具栏父子页面使用不同 toolbar互不影响总结toolbar 必须通过 Builder 定义内部必须使用 ToolBarItem支持Navigation和NavDestination独立配置支持左右布局leading / trailing支持按钮、滑块、输入框等任意系统组件如果这篇文章对你有帮助欢迎点赞、收藏、关注你的支持是持续创作的动力
HarmonyOS6 组件通用属性 toolbar 使用文档
文章目录一、核心 API 定义1. toolbar 通用属性2. ToolBarItem 工具栏项3. 支持的子组件二、核心使用规则三、完整可运行示例代码四、代码中 toolbar 核心用法说明1. 主页面 Navigation 绑定 toolbar2. NavDestination 子页面独立 toolbar3. 多页面独立工具栏五、运行效果说明总结toolbar是 HarmonyOS ArkUI 提供的全局通用属性用于为支持的容器/页面组件绑定顶部工具栏、导航栏自定义布局。通过Builder自定义工具栏内容结合ToolBarItem实现按钮、滑块、搜索框等控件布局支持顶部导航栏左右侧LEADING / TRAILING灵活布局。核心作用为 Navigation、NavDestination、Page 等组件自定义工具栏支持多控件组合布局支持导航页、子页面独立配置不同工具栏实现页面级、导航级顶部菜单统一管理一、核心 API 定义1. toolbar 通用属性toolbar(builder:BuilderAttrParam):void作用为当前组件绑定自定义工具栏布局参数Builder自定义构建函数返回值无2. ToolBarItem 工具栏项ToolBarItem(options:{placement:ToolBarItemPlacement})用于定义工具栏内子元素的位置TOP_BAR_LEADING顶部栏左侧前导位置TOP_BAR_TRAILING顶部栏右侧尾随位置3. 支持的子组件Button、Slider、Search、Text、Image 等系统组件均可放入工具栏。二、核心使用规则必须使用 Builder 定义工具栏内容内部必须使用 ToolBarItem 包裹子控件支持一个页面绑定独立 toolbar支持 NavDestination 子页面独立配置不同 toolbar支持左右分栏布局leading / trailing三、完整可运行示例代码// xxx.etsEntryComponentstruct SideBarContainerExample{normalIcon:Resource$r(app.media.startIcon)selectedIcon:Resource$r(app.media.startIcon)Statearr:number[][1,2,3]Statecurrent:number1Provide(navPathStack)navPathStack:NavPathStacknewNavPathStack()BuilderMyToolBar(){ToolBarItem({placement:ToolBarItemPlacement.TOP_BAR_LEADING}){Button(left).height(30vp)}ToolBarItem({placement:ToolBarItemPlacement.TOP_BAR_LEADING}){Button(right).height(30vp)}}BuilderMyToolbarNavDest(){ToolBarItem({placement:ToolBarItemPlacement.TOP_BAR_TRAILING}){Slider().width(120vp)}ToolBarItem({placement:ToolBarItemPlacement.TOP_BAR_TRAILING}){Search().width(120vp)}}BuilderPageNavDest(name:string){NavDestination(){Column(){Text(add toolbar).fontSize(30).toolbar(this.MyToolbarNavDest)}.backgroundColor(Color.Grey)}}build(){SideBarContainer(SideBarContainerType.Embed){Column(){ForEach(this.arr,(item:number){Column({space:5}){Image(this.currentitem?this.selectedIcon:this.normalIcon).width(64).height(64)Text(Index0item).fontSize(25).fontColor(this.currentitem?#0A59F7:#999).fontFamily(source-sans-pro,cursive,sans-serif)}.onClick((){this.currentitem})},(item:number)item.toString())}.width(100%).justifyContent(FlexAlign.SpaceEvenly).backgroundColor(#19000000)Navigation(this.navPathStack){Column(){Button(pushPath,{stateEffect:true,type:ButtonType.Capsule}).width(20%).height(40).margin(20).toolbar(this.MyToolBar)Button(showNavDest,{stateEffect:true,type:ButtonType.Capsule}).width(20%).height(40).margin(20).onClick((){this.navPathStack.pushPath({name:1})})}.width(100%).height(100%)}.navBarPosition(NavBarPosition.Start).navBarWidth(50%).navBarWidthRange([25%,70%]).hideBackButton(true).navDestination(this.PageNavDest).height(100%).title(Navigation)}.sideBarWidth(150).minSideBarWidth(50).maxSideBarWidth(300).minContentWidth(0).onChange((value:boolean){console.info(status:value)}).divider({strokeWidth:1vp,color:Color.Gray,startMargin:4vp,endMargin:4vp})}}运行效果如图四、代码中 toolbar 核心用法说明1. 主页面 Navigation 绑定 toolbar.toolbar(this.MyToolBar)绑定左侧两个 Button位置TOP_BAR_LEADING2. NavDestination 子页面独立 toolbarText(add toolbar).toolbar(this.MyToolbarNavDest)子页面独立工具栏包含 Slider Search位置TOP_BAR_TRAILING3. 多页面独立工具栏主页面按钮菜单子页面滑块 搜索完全符合官方页面独立配置 toolbar的规范。五、运行效果说明进入页面Navigation 顶部显示left / right 两个按钮点击showNavDest跳转到子页面子页面顶部显示Slider Search工具栏父子页面使用不同 toolbar互不影响总结toolbar 必须通过 Builder 定义内部必须使用 ToolBarItem支持Navigation和NavDestination独立配置支持左右布局leading / trailing支持按钮、滑块、输入框等任意系统组件如果这篇文章对你有帮助欢迎点赞、收藏、关注你的支持是持续创作的动力
