宝贝计划

结论

Home 页的大标题改为交给系统导航栏渲染:

.navigationTitle(activeFocusTitle)
.navigationBarTitleDisplayMode(.large)

这样它会在 ScrollView 滚动时自动折叠,并在折叠后保持系统的左对齐样式,效果接近 Apple Home App。

为什么普通实现会看起来居中

如果把大标题当作页面内容自己画出来,比如放在 ScrollView 里的 VStackText,它就只是一个普通视图:

  • 不会参与 UINavigationBar 的大标题折叠动画
  • 不会自动跟随系统导航栏的 leading 位置
  • 它的位置只受当前布局容器影响,通常只会像“内容区标题”一样待在页面里,看起来就不是系统那种左上角标题

换句话说,普通实现的标题是内容,系统大标题是导航栏的一部分。

为什么这里会左对齐

关键点是使用系统导航标题,而不是自绘标题:

  1. NavigationStack 提供导航栏容器
  2. navigationTitle(...) 把标题交给系统
  3. .navigationBarTitleDisplayMode(.large) 让系统使用 large title 样式
  4. ScrollView 的滚动会触发系统折叠,折叠后标题自然落到左侧

所以“普通实现看起来居中/在内容区”,本质上是因为它被当成页面内容在布局;“系统实现左对齐”,是因为它被放进了导航栏的标题槽位。

所以“左对齐”不是手动算出来的,而是系统导航栏的大标题布局规则。

Home 页当前实现

Home 页保留了内容区的摘要文案,但把原来的手绘大标题移除,避免和系统标题重复:

HomeSummaryHeader(subtitle: headerSubtitle)

顶部导航标题则直接取当前 focus 的名称:

.navigationTitle(activeFocusTitle)
.navigationBarTitleDisplayMode(.large)

注意事项

  • 外层必须包在 NavigationStack
  • 不要把大标题再用自定义 Text 画一次
  • 如果隐藏了导航栏或强行改成 .inline,就不会有 large title 折叠效果