UINavigationController集成SwiftUI时Image/AsyncImage溢出问题求助

问题现象 #

将SwiftUI视图通过UIHostingController推入自定义封装的UINavigationController时，设置了宽度占满的长图会横向溢出屏幕。同样的图片布局代码在SwiftUI原生NavigationStack+NavigationLink场景下显示完全正常。

图片布局代码：

Image("picsum-237-1900x400") 
  .resizable()
  .scaledToFill()
  .frame(height: 200)
  .frame(maxWidth: .infinity)

复现代码 #

自定义NavigationWrapper实现 #

struct NavigationWrapper<Content: View>: UIViewControllerRepresentable {
  @ViewBuilder let rootView: () -> Content
  
  func makeUIViewController(context: Context) -> UINavigationController {
    let navController = UINavigationController()
    let hostingController = UIHostingController(
      rootView: rootView().environment(\.navigationController, navController)
    )
    navController.pushViewController(hostingController, animated: false)
    return navController
  }
  
  func updateUIViewController(_ uiViewController: UINavigationController, context: Context) {}
}

完整使用示例 #

@main
struct MainApp: App {
  var body: some Scene {
    WindowGroup {
      NavigationWrapper(rootView: { ProductView() })
    }
  }
}

struct ProductView: View {
  @Environment(\.navigationController) private var navigationController
  
  var body: some View {
    VStack {
      Button("Go to Product Details") {
        let hostingVC = UIHostingController(rootView: ProductDetailsScreen())
        navigationController?.pushViewController(hostingVC, animated: true)
      }
    }
    .navigationTitle("Products")
  }
}

struct ProductDetailsScreen: View {
  var body: some View {
    VStack {
      Image("picsum-237-1900x400")
        .resizable()
        .scaledToFill()
        .frame(height: 200)
        .frame(maxWidth: .infinity)
      Spacer()
      Text("Product Details")
      Spacer()
    }
    .navigationTitle("Details")
  }
}

struct NavigationControllerKey: EnvironmentKey {
  static let defaultValue: UINavigationController? = nil
}

extension EnvironmentValues {
  var navigationController: UINavigationController? {
    get { self[NavigationControllerKey.self] }
    set { self[NavigationControllerKey.self] = newValue }
  }
}

演示效果：长图会横向溢出屏幕，超出导航栏与屏幕右侧边界，而在原生NavigationStack场景下图片能正确适配屏幕宽度。

原因分析 #

这不是SwiftUI的Bug，而是UIKit与SwiftUI桥接时布局上下文传递缺失：

• SwiftUI原生NavigationStack会自动为子视图注入正确的布局环境，包括屏幕可用宽度、安全区域等约束，确保视图能正确适配父容器。
• 自定义NavigationWrapper直接推送UIHostingController时，没有为其配置正确的布局约束或上下文，导致SwiftUI视图无法获取父容器的真实宽度，maxWidth: .infinity会按照图片原始宽度渲染，最终超出屏幕。

解决办法 #

方法一：为UIHostingController添加宽度约束 #

推送UIHostingController时，强制绑定其视图宽度与导航控制器视图宽度一致：

Button("Go to Product Details") {
  let hostingVC = UIHostingController(rootView: ProductDetailsScreen())
  hostingVC.view.translatesAutoresizingMaskIntoConstraints = false
  guard let navView = navigationController?.view else { return }
  NSLayoutConstraint.activate([
    hostingVC.view.widthAnchor.constraint(equalTo: navView.widthAnchor)
  ])
  navigationController?.pushViewController(hostingVC, animated: true)
}

方法二：用GeometryReader约束图片宽度 #

在SwiftUI视图外层包裹GeometryReader，直接使用父容器的宽度约束图片：

struct ProductDetailsScreen: View {
  var body: some View {
    GeometryReader { geo in
      VStack {
        Image("picsum-237-1900x400")
          .resizable()
          .scaledToFill()
          .frame(height: 200)
          .frame(width: geo.size.width)
          .clipped() // 可选：裁剪超出部分
        Spacer()
        Text("Product Details")
        Spacer()
      }
    }
    .navigationTitle("Details")
  }
}

方法三：优化NavigationWrapper的初始化逻辑 #

创建根UIHostingController时，配置其布局属性以继承导航控制器的布局上下文：

func makeUIViewController(context: Context) -> UINavigationController {
  let navController = UINavigationController()
  let hostingController = UIHostingController(
    rootView: rootView().environment(\.navigationController, navController)
  )
  // 确保hostingController继承导航栏的布局扩展
  hostingController.edgesForExtendedLayout = .all
  // 设置背景色避免布局异常
  hostingController.view.backgroundColor = .systemBackground
  navController.pushViewController(hostingController, animated: false)
  return navController
}

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