企业官网建设流程全解析

智感握姿示例不是只做了底部导航，顶部标题栏也用了HdsNavigation。这部分很容易被忽略，但它决定页面有没有系统应用那种细腻感。

项目源码：https://gitcode.com/HarmonyOS_Samples/SmartReach/tree/master

外层就是 HdsNavigation

MainPage.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.ets：

exportconstSCROLLER_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”，这些界面细节同样值得抄作业。