iOS17中NavigationStack添加.navigationTitle致动画失效求助

问题描述 #

开发SwiftUI视图时，实现了概览/详情两种状态的切换，切换过程带有hero动画（使用matchedGeometryEffect）。为了在概览状态显示导航标题，将内容包裹在NavigationStack中，但在iOS 17/Xcode 15环境下，添加.navigationTitle后，视图切换动画出现跳变，导航标题也没有预期的淡入淡出效果。移除.navigationTitle后动画恢复正常，该问题与matchedGeometryEffect无关。

问题原因 #

原代码中将.navigationTitle附加在条件分支的子视图上，当状态切换时，NavigationStack需要重新建立导航栏与子视图的布局关联，导致布局重算和动画冲突，最终出现跳变现象。

解决方案 #

方案1：将导航标题控制移到根视图层级 #

把.navigationTitle从分支视图移到NavigationStack内部的根VStack上，通过状态变量条件控制标题内容，让NavigationStack统一处理导航栏的过渡动画：

struct TestView: View {
  @ObservedObject var viewModel: TestViewModel
  @Namespace private var animation

  var body: some View {
    NavigationStack {
      VStack {
        if viewModel.flag {
          // 详情状态
          VStack {
            circle
            text
            switchButton
          }
        } else {
          // 概览状态
          VStack {
            circle
            switchButton
          }
        }
      }
      // 根视图层级控制导航标题
      .navigationTitle(viewModel.flag ? "" : "Title")
      .navigationBarTitleDisplayMode(viewModel.flag ? .inline : .large)
      // 同步导航栏的动画过渡
      .animation(.easeInOut, value: viewModel.flag)
    }
  }

  // 以下私有视图代码保持不变
  private var switchButton: some View {
    Button("switch") {
      withAnimation {
        viewModel.toggleFlag()
      }
    }
    .matchedGeometryEffect(id: "Button", in: animation)
  }
  
  private var circle: some View {
    Circle()
      .fill(.red)
      .frame(width: 44, height: 44)
      .matchedGeometryEffect(id: "Shape", in: animation)
  }
  
  private var text: some View {
    Text("Taylor Switch - 1989")
      .font(.headline)
  }
}

方案2：自定义导航栏标题，手动控制过渡动画 #

如果需要更精细的标题淡入淡出效果，可以通过.toolbar自定义导航标题视图，结合opacity和动画实现平滑过渡：

struct TestView: View {
  @ObservedObject var viewModel: TestViewModel
  @Namespace private var animation

  var body: some View {
    NavigationStack {
      VStack {
        if viewModel.flag {
          // 详情状态
          VStack {
            circle
            text
            switchButton
          }
        } else {
          // 概览状态
          VStack {
            circle
            switchButton
          }
        }
      }
      .toolbar {
        ToolbarItem(placement: .principal) {
          Text("Title")
            .font(.largeTitle) // 模拟默认大标题样式
            .opacity(viewModel.flag ? 0 : 1)
            .animation(.easeInOut(duration: 0.3), value: viewModel.flag)
        }
      }
      // 可选：控制导航栏可见性
      .toolbar(viewModel.flag ? .hidden : .visible, for: .navigationBar)
      .animation(.easeInOut, value: viewModel.flag)
    }
  }

  // 私有视图代码保持不变...
}

关键思路 #

• 避免在条件分支的子视图上添加导航栏相关修饰符，统一在根视图层级进行控制
• 让导航栏的状态变化（标题内容、可见性、显示模式）与视图切换动画同步，避免布局冲突
• 自定义导航标题可以获得更灵活的动画控制权限

内容的提问来源于stack exchange，提问作者rizz