结论
Home 页的大标题改为交给系统导航栏渲染:
.navigationTitle(activeFocusTitle)
.navigationBarTitleDisplayMode(.large)
这样它会在 ScrollView 滚动时自动折叠,并在折叠后保持系统的左对齐样式,效果接近 Apple Home App。
为什么普通实现会看起来居中
如果把大标题当作页面内容自己画出来,比如放在 ScrollView 里的 VStack 或 Text,它就只是一个普通视图:
- 不会参与
UINavigationBar的大标题折叠动画 - 不会自动跟随系统导航栏的 leading 位置
- 它的位置只受当前布局容器影响,通常只会像“内容区标题”一样待在页面里,看起来就不是系统那种左上角标题
换句话说,普通实现的标题是内容,系统大标题是导航栏的一部分。
为什么这里会左对齐
关键点是使用系统导航标题,而不是自绘标题:
NavigationStack提供导航栏容器navigationTitle(...)把标题交给系统.navigationBarTitleDisplayMode(.large)让系统使用 large title 样式ScrollView的滚动会触发系统折叠,折叠后标题自然落到左侧
所以“普通实现看起来居中/在内容区”,本质上是因为它被当成页面内容在布局;“系统实现左对齐”,是因为它被放进了导航栏的标题槽位。
所以“左对齐”不是手动算出来的,而是系统导航栏的大标题布局规则。
Home 页当前实现
Home 页保留了内容区的摘要文案,但把原来的手绘大标题移除,避免和系统标题重复:
HomeSummaryHeader(subtitle: headerSubtitle)
顶部导航标题则直接取当前 focus 的名称:
.navigationTitle(activeFocusTitle)
.navigationBarTitleDisplayMode(.large)
注意事项
- 外层必须包在
NavigationStack里 - 不要把大标题再用自定义
Text画一次 - 如果隐藏了导航栏或强行改成
.inline,就不会有 large title 折叠效果