文章目录外层就是 HdsNavigation标题栏配置bindToScrollable 的作用为什么要 MINI 标题模式安全区交给自己处理写在最后智感握姿示例不是只做了底部导航顶部标题栏也用了HdsNavigation。这部分很容易被忽略但它决定页面有没有系统应用那种细腻感。项目源码https://gitcode.com/HarmonyOS_Samples/SmartReach/tree/master外层就是 HdsNavigationMainPage.ets的build()从这里开始build(){HdsNavigation(){RelativeContainer(){HdsTabs({controller:this.controller}){// TabContent}}}.hideBackButton(true).titleMode(HdsNavigationTitleMode.MINI).mode(NavigationMode.Stack)}HdsNavigation负责页面导航框架里面再放RelativeContainer和HdsTabs。标题栏配置标题栏内容在.titleBar()里.titleBar({content:{title:{mainTitle:$r(app.string.SmartReachAbility_label),},},style:{scrollEffectOpts:{enableScrollEffect:true,scrollEffectType:ScrollEffectType.GRADIENT_BLUR,blurEffectiveEndOffset:LengthMetrics.vp(64),},systemMaterialEffect:{materialType:hdsMaterial.MaterialType.ADAPTIVE,materialLevel:hdsMaterial.MaterialLevel.ADAPTIVE,},},avoidLayoutSafeArea:false,enableComponentSafeArea:false,})这里有两个关键词GRADIENT_BLUR和ADAPTIVE。前者让滚动时标题栏有渐变模糊效果后者让系统材质根据环境自适应。bindToScrollable 的作用页面最后还有一行.bindToScrollable(SCROLLER_LIST)这行把导航栏和滚动容器关联起来。SCROLLER_LIST来自TabsBarModel.etsexportconstSCROLLER_LIST:Scroller[]newArray(4).fill(null).map(()newScroller());每个 tab 一个Scroller每个WaterFlowView用对应下标WaterFlow({scroller:SCROLLER_LIST[this.currentTabIndex],sections:this.getSections}){// FlowItem}这样标题栏才知道当前页面在滚动滚动效果才能跟上。为什么要 MINI 标题模式示例用了.titleMode(HdsNavigationTitleMode.MINI)智感握姿页面内容以图片瀑布流为主标题不需要占太大空间。MINI模式更克制页面看起来不会头重脚轻。安全区交给自己处理最后这行也值得看.ignoreLayoutSafeArea([LayoutSafeAreaType.SYSTEM],[LayoutSafeAreaEdge.TOP,LayoutSafeAreaEdge.BOTTOM])项目选择忽略系统安全区然后自己通过WindowUtil和GlobalInfoModel控制顶部、底部留白。这样做更灵活但也要求你自己把安全区处理好。写在最后很多示例项目只把功能跑通页面质感一般。但这个项目用了HdsNavigation、滚动绑定、渐变模糊和系统材质整体更接近真实应用。小白学习时别只看“功能 API”这些界面细节同样值得抄作业。
HarmonyOS7 HdsNavigation 滚动联动标题栏：让页面更像系统应用
文章目录外层就是 HdsNavigation标题栏配置bindToScrollable 的作用为什么要 MINI 标题模式安全区交给自己处理写在最后智感握姿示例不是只做了底部导航顶部标题栏也用了HdsNavigation。这部分很容易被忽略但它决定页面有没有系统应用那种细腻感。项目源码https://gitcode.com/HarmonyOS_Samples/SmartReach/tree/master外层就是 HdsNavigationMainPage.ets的build()从这里开始build(){HdsNavigation(){RelativeContainer(){HdsTabs({controller:this.controller}){// TabContent}}}.hideBackButton(true).titleMode(HdsNavigationTitleMode.MINI).mode(NavigationMode.Stack)}HdsNavigation负责页面导航框架里面再放RelativeContainer和HdsTabs。标题栏配置标题栏内容在.titleBar()里.titleBar({content:{title:{mainTitle:$r(app.string.SmartReachAbility_label),},},style:{scrollEffectOpts:{enableScrollEffect:true,scrollEffectType:ScrollEffectType.GRADIENT_BLUR,blurEffectiveEndOffset:LengthMetrics.vp(64),},systemMaterialEffect:{materialType:hdsMaterial.MaterialType.ADAPTIVE,materialLevel:hdsMaterial.MaterialLevel.ADAPTIVE,},},avoidLayoutSafeArea:false,enableComponentSafeArea:false,})这里有两个关键词GRADIENT_BLUR和ADAPTIVE。前者让滚动时标题栏有渐变模糊效果后者让系统材质根据环境自适应。bindToScrollable 的作用页面最后还有一行.bindToScrollable(SCROLLER_LIST)这行把导航栏和滚动容器关联起来。SCROLLER_LIST来自TabsBarModel.etsexportconstSCROLLER_LIST:Scroller[]newArray(4).fill(null).map(()newScroller());每个 tab 一个Scroller每个WaterFlowView用对应下标WaterFlow({scroller:SCROLLER_LIST[this.currentTabIndex],sections:this.getSections}){// FlowItem}这样标题栏才知道当前页面在滚动滚动效果才能跟上。为什么要 MINI 标题模式示例用了.titleMode(HdsNavigationTitleMode.MINI)智感握姿页面内容以图片瀑布流为主标题不需要占太大空间。MINI模式更克制页面看起来不会头重脚轻。安全区交给自己处理最后这行也值得看.ignoreLayoutSafeArea([LayoutSafeAreaType.SYSTEM],[LayoutSafeAreaEdge.TOP,LayoutSafeAreaEdge.BOTTOM])项目选择忽略系统安全区然后自己通过WindowUtil和GlobalInfoModel控制顶部、底部留白。这样做更灵活但也要求你自己把安全区处理好。写在最后很多示例项目只把功能跑通页面质感一般。但这个项目用了HdsNavigation、滚动绑定、渐变模糊和系统材质整体更接近真实应用。小白学习时别只看“功能 API”这些界面细节同样值得抄作业。
