iOS UIKit开发中如何消除界面顶部的异常灰色区域

你截图里顶部消不掉的灰色区域，本质是没隐藏系统自带的导航栏导致的。当前HomeController是作为UINavigationController的根控制器存在的，系统默认会在状态栏和页面内容之间展示一块带磨砂灰色填充的导航栏占位——你之前自己搭了自定义的顶部导航条，把它锚定在safeArea的顶部，但根本没处理系统导航栏的存在，所以它的灰色背景就一直夹在中间露出来，怎么调都消不掉。

• 第一步：彻底隐藏系统导航栏
  在HomeController里重写viewWillAppear，页面即将展示时把系统导航栏关掉，从根源上去掉灰色占位：

  override func viewWillAppear(_ animated: Bool) {
      super.viewWillAppear(animated)
      navigationController?.setNavigationBarHidden(true, animated: false)
  }
  

• 第二步：调整主垂直栈的顶部约束
  原来你把整个垂直栈的顶部锚定在view.safeAreaLayoutGuide.topAnchor，系统导航栏隐藏之后，这个锚点的位置就是状态栏的下边界，会留出一块屏幕顶部的空白。直接把栈的顶部对齐到屏幕最顶端，让自定义内容完全覆盖原来系统导航栏占的位置：
  把configureUI方法里的栈约束修改为：

  stack.anchor(
      top: view.topAnchor, 
      left: view.leftAnchor, 
      bottom: view.safeAreaLayoutGuide.bottomAnchor, 
      right: view.rightAnchor
  )
  

• 第三步：适配自定义导航栈的安全区
  现在导航栈直接顶到屏幕最顶端了，得把状态栏的高度预留出来，不然按钮、图标会被状态栏挡住。改HomeNavigationStackView的初始化方法，替换原来的固定高度和边距逻辑：

  override init(frame: CGRect){
      super.init(frame: frame)
      // 获取当前设备的顶部安全区高度（即状态栏区域高度）
      let topSafeHeight = UIApplication.shared.windows.first(where: { $0.isKeyWindow })?.safeAreaInsets.top ?? 0
      // 自定义导航总高度 = 状态栏高度 + 交互按钮所需的56点高度
      heightAnchor.constraint(equalToConstant: topSafeHeight + 56).isActive = true
      
      // 原有按钮、图标配置完全保留
      tinderIcon.contentMode = .scaleAspectFit
      settingsButton.setImage(#imageLiteral(resourceName: "top_left_profile").withRenderingMode(.alwaysOriginal), for: .normal)
      messageButton.setImage(#imageLiteral(resourceName: "top_right_messages").withRenderingMode(.alwaysOriginal), for: .normal)
      
      [settingsButton, UIView(), tinderIcon, UIView(), messageButton].forEach{ view in addArrangedSubview(view) }
      
      distribution = .equalCentering
      isLayoutMarginsRelativeArrangement = true
      // 顶部边距设为安全区高度，让内容落在可交互区域内
      layoutMargins = .init(top: topSafeHeight, left:16, bottom:0, right:16)
  }
  

注意：别想着靠把view.backgroundColor改成白色盖掉灰色——系统导航栏的视图层级比你控制器的view更高，只要没隐藏，它的灰色背景会一直盖在你自定义内容上面，改自己的背景色根本没用。

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