文章目录组件核心介绍1. 组件定义2. 核心价值完整代码核心功能抽屉模式 宽屏自定义布局1. 开启抽屉模式关键配置2. 插入自定义菜单布局双端自动适配规则1. 手机 / 窄屏设备2. 平板 / 折叠屏 / 宽屏设备关键属性详解1. titleOptions 抽屉配置2. menus 自定义布局3. 导航与路由布局结构说明整体布局总结组件核心介绍1. 组件定义AtomicServiceNavigation是元服务专用根页面容器支持抽屉模式标题栏左侧可展开菜单宽屏场景自动展示左侧固定布局内置路由、标题栏、底部导航一体化支持自定义菜单、图标、背景色2. 核心价值手机端抽屉侧滑菜单平板/折叠屏/宽屏左侧常驻自定义布局无需手动适配横竖屏/折叠状态系统自动处理展开/收起逻辑符合元服务标准化布局规范完整代码import{AtomicServiceNavigation,TitleBarType}fromkit.ArkUI;import{AtomicServiceTabs,TabBarOptions,TabBarPosition}fromkit.ArkUI;EntryComponentstruct Index{Statemessage:stringHello World;childNavStack:NavPathStacknewNavPathStack();BuildertabContent1(){Text(first page).onClick((){this.childNavStack.pushPath({name:page one})})}BuildertabContent2(){Text(second page)}BuildertabContent3(){Text(third page)}BuildernavigationContent(){AtomicServiceTabs({tabContents:[(){this.tabContent1()},(){this.tabContent2()},(){this.tabContent3()}],tabBarOptionsArray:[newTabBarOptions($r(sys.media.ohos_ic_public_phone),功能1),newTabBarOptions($r(sys.media.ohos_ic_public_location),功能2,Color.Green,Color.Red),newTabBarOptions($r(sys.media.ohos_ic_public_more),功能3)],tabBarPosition:TabBarPosition.BOTTOM,barBackgroundColor:$r(sys.color.ohos_id_color_bottom_tab_bg),onTabBarClick:(index:Number){if(index0){this.message功能1;}elseif(index1){this.message功能2;}else{this.message功能3;}}})}BuilderpageMap(name:string){if(namepage one){PageOne()}elseif(namepage two){PageTwo()}}StateshowText:stringtime: ;Statetime:number0;BuilderinsertComp(){Text(This is menus area).fontColor(Color.Red).width(200).height(100%)}build(){Column(){AtomicServiceNavigation({navigationContent:(){this.navigationContent()},navDestinationBuilder:this.pageMap,navPathStack:this.childNavStack,title:this.message,titleOptions:{titleIcon:$r(app.media.startIcon),backgroundColor:rgb(61, 157, 180),titleBarType:TitleBarType.DRAWER},menus:(){this.insertComp()},mode:NavigationMode.Stack})}.width(100%)}}Componentexportstruct PageOne{pageInfo:NavPathStacknewNavPathStack();build(){NavDestination(){Button(Next).onClick((){this.pageInfo.pushPath({name:page two})})}.title(PageOne).onReady((context:NavDestinationContext){this.pageInfocontext.pathStack;})}}Componentexportstruct PageTwo{pageInfo:NavPathStacknewNavPathStack();build(){NavDestination(){Button(End)}.title(PageTwo).onReady((context:NavDestinationContext){this.pageInfocontext.pathStack;})}}运行效果如图核心功能抽屉模式 宽屏自定义布局1. 开启抽屉模式关键配置通过titleBarType: TitleBarType.DRAWER开启抽屉标题栏titleOptions:{titleIcon:$r(app.media.startIcon),backgroundColor:rgb(61, 157, 180),titleBarType:TitleBarType.DRAWER// 开启抽屉模式}2. 插入自定义菜单布局使用menus属性传入自定义组件宽屏场景自动固定在左侧menus:(){this.insertComp()}自定义布局示例BuilderinsertComp(){Text(This is menus area).fontColor(Color.Red).width(200).height(100%)}双端自动适配规则1. 手机 / 窄屏设备标题栏显示抽屉图标点击图标 →侧滑弹出菜单菜单为悬浮层不占用主布局2. 平板 / 折叠屏 / 宽屏设备标题栏隐藏抽屉图标自定义菜单布局固定显示在左侧右侧为内容区域双栏布局永久展示无需手动点击展开关键属性详解1. titleOptions 抽屉配置属性作用titleBarType: TitleBarType.DRAWER开启抽屉模式标题栏titleIcon标题栏左侧图标backgroundColor标题栏背景色title动态标题文字2. menus 自定义布局类型() voidBuilder 函数作用抽屉侧滑内容 宽屏左侧固定栏宽屏下默认宽度200–320vp可自定义支持任意组件Text/List/Button/自定义组件3. 导航与路由navPathStack页面路由栈navDestinationBuilder子页面映射mode: NavigationMode.Stack栈式导航自动生成返回箭头布局结构说明整体布局根容器AtomicServiceNavigation标题栏抽屉模式 图标 背景色左侧菜单宽屏固定展示 / 窄屏抽屉弹出内容区域AtomicServiceTabs底部标签三页面子页面PageOne、PageTwo栈式跳转总结必须作为页面根容器不可嵌套抽屉模式必须配置titleBarType: TitleBarType.DRAWERmenus必须使用Builder定义宽屏布局由系统自动触发无需代码判断子页面必须使用NavDestination包裹AtomicServiceNavigation 支持抽屉模式通过TitleBarType.DRAWER开启menus 属性可插入自定义布局如果这篇文章对你有帮助欢迎点赞、收藏、关注你的支持是持续创作的动力
HarmonyOS 6 AtomicServiceNavigation 抽屉模式 + 宽屏自定义布局使用文档
文章目录组件核心介绍1. 组件定义2. 核心价值完整代码核心功能抽屉模式 宽屏自定义布局1. 开启抽屉模式关键配置2. 插入自定义菜单布局双端自动适配规则1. 手机 / 窄屏设备2. 平板 / 折叠屏 / 宽屏设备关键属性详解1. titleOptions 抽屉配置2. menus 自定义布局3. 导航与路由布局结构说明整体布局总结组件核心介绍1. 组件定义AtomicServiceNavigation是元服务专用根页面容器支持抽屉模式标题栏左侧可展开菜单宽屏场景自动展示左侧固定布局内置路由、标题栏、底部导航一体化支持自定义菜单、图标、背景色2. 核心价值手机端抽屉侧滑菜单平板/折叠屏/宽屏左侧常驻自定义布局无需手动适配横竖屏/折叠状态系统自动处理展开/收起逻辑符合元服务标准化布局规范完整代码import{AtomicServiceNavigation,TitleBarType}fromkit.ArkUI;import{AtomicServiceTabs,TabBarOptions,TabBarPosition}fromkit.ArkUI;EntryComponentstruct Index{Statemessage:stringHello World;childNavStack:NavPathStacknewNavPathStack();BuildertabContent1(){Text(first page).onClick((){this.childNavStack.pushPath({name:page one})})}BuildertabContent2(){Text(second page)}BuildertabContent3(){Text(third page)}BuildernavigationContent(){AtomicServiceTabs({tabContents:[(){this.tabContent1()},(){this.tabContent2()},(){this.tabContent3()}],tabBarOptionsArray:[newTabBarOptions($r(sys.media.ohos_ic_public_phone),功能1),newTabBarOptions($r(sys.media.ohos_ic_public_location),功能2,Color.Green,Color.Red),newTabBarOptions($r(sys.media.ohos_ic_public_more),功能3)],tabBarPosition:TabBarPosition.BOTTOM,barBackgroundColor:$r(sys.color.ohos_id_color_bottom_tab_bg),onTabBarClick:(index:Number){if(index0){this.message功能1;}elseif(index1){this.message功能2;}else{this.message功能3;}}})}BuilderpageMap(name:string){if(namepage one){PageOne()}elseif(namepage two){PageTwo()}}StateshowText:stringtime: ;Statetime:number0;BuilderinsertComp(){Text(This is menus area).fontColor(Color.Red).width(200).height(100%)}build(){Column(){AtomicServiceNavigation({navigationContent:(){this.navigationContent()},navDestinationBuilder:this.pageMap,navPathStack:this.childNavStack,title:this.message,titleOptions:{titleIcon:$r(app.media.startIcon),backgroundColor:rgb(61, 157, 180),titleBarType:TitleBarType.DRAWER},menus:(){this.insertComp()},mode:NavigationMode.Stack})}.width(100%)}}Componentexportstruct PageOne{pageInfo:NavPathStacknewNavPathStack();build(){NavDestination(){Button(Next).onClick((){this.pageInfo.pushPath({name:page two})})}.title(PageOne).onReady((context:NavDestinationContext){this.pageInfocontext.pathStack;})}}Componentexportstruct PageTwo{pageInfo:NavPathStacknewNavPathStack();build(){NavDestination(){Button(End)}.title(PageTwo).onReady((context:NavDestinationContext){this.pageInfocontext.pathStack;})}}运行效果如图核心功能抽屉模式 宽屏自定义布局1. 开启抽屉模式关键配置通过titleBarType: TitleBarType.DRAWER开启抽屉标题栏titleOptions:{titleIcon:$r(app.media.startIcon),backgroundColor:rgb(61, 157, 180),titleBarType:TitleBarType.DRAWER// 开启抽屉模式}2. 插入自定义菜单布局使用menus属性传入自定义组件宽屏场景自动固定在左侧menus:(){this.insertComp()}自定义布局示例BuilderinsertComp(){Text(This is menus area).fontColor(Color.Red).width(200).height(100%)}双端自动适配规则1. 手机 / 窄屏设备标题栏显示抽屉图标点击图标 →侧滑弹出菜单菜单为悬浮层不占用主布局2. 平板 / 折叠屏 / 宽屏设备标题栏隐藏抽屉图标自定义菜单布局固定显示在左侧右侧为内容区域双栏布局永久展示无需手动点击展开关键属性详解1. titleOptions 抽屉配置属性作用titleBarType: TitleBarType.DRAWER开启抽屉模式标题栏titleIcon标题栏左侧图标backgroundColor标题栏背景色title动态标题文字2. menus 自定义布局类型() voidBuilder 函数作用抽屉侧滑内容 宽屏左侧固定栏宽屏下默认宽度200–320vp可自定义支持任意组件Text/List/Button/自定义组件3. 导航与路由navPathStack页面路由栈navDestinationBuilder子页面映射mode: NavigationMode.Stack栈式导航自动生成返回箭头布局结构说明整体布局根容器AtomicServiceNavigation标题栏抽屉模式 图标 背景色左侧菜单宽屏固定展示 / 窄屏抽屉弹出内容区域AtomicServiceTabs底部标签三页面子页面PageOne、PageTwo栈式跳转总结必须作为页面根容器不可嵌套抽屉模式必须配置titleBarType: TitleBarType.DRAWERmenus必须使用Builder定义宽屏布局由系统自动触发无需代码判断子页面必须使用NavDestination包裹AtomicServiceNavigation 支持抽屉模式通过TitleBarType.DRAWER开启menus 属性可插入自定义布局如果这篇文章对你有帮助欢迎点赞、收藏、关注你的支持是持续创作的动力
