点击iPhone右侧导航栏按钮时左侧导航图标旁出现三点的问题求助

嘿，这个问题我之前做项目时也踩过坑！导航栏左侧图标旁边冒出来的三个点，其实是系统的文本溢出省略符——哪怕你觉得没放任何额外内容，系统可能还是判定左侧栏项的宽度超出了可用空间，才会显示这个折叠标记。下面给你拆解原因和对应的解决办法：

核心原因是系统认为左侧导航栏项（left bar item）的总宽度超过了导航栏分配给它的显示空间，哪怕你没设置显式文本，也可能是这些隐性因素导致的：

• 导航图标尺寸不符合标准：iOS导航栏图标推荐尺寸是24x24pt（@2x为48x48px，@3x为72x72px），如果图标过大，或者你给它加了额外的内边距/偏移，会让系统计算的item宽度超标
• 不小心设置了空title：哪怕给UIBarButtonItem设置了空字符串""作为title，系统也会为这个空title保留占位宽度，当图标+占位宽度超过空间时，就会触发省略符
• 自定义view布局异常：如果是用customView创建的左侧栏项，自定义view的intrinsicContentSize没设置正确，或者约束有冲突，会导致布局计算出错
• 点击右侧按钮触发布局刷新：右侧按钮点击时可能触发了导航栏的布局更新，原本隐藏的布局问题被暴露出来

针对上面的原因，你可以逐一排查尝试：

1. 修正图标尺寸与边距

   • 把导航图标替换成标准尺寸的资源，避免过大导致宽度溢出
   • 清除不必要的边距设置：如果给UIBarButtonItem设置了imageEdgeInsets，可以先重置为UIEdgeInsetsZero试试，或者调整到合适的值，确保图标整体宽度在导航栏允许范围内

2. 移除空title占位

   • 代码创建的话，别碰title属性，哪怕是空字符串也不行：

     // 错误示例：设置了空title
     let leftItem = UIBarButtonItem(image: UIImage(named: "nav-icon"), style: .plain, target: self, action: #selector(leftItemTapped))
     leftItem.title = "" // 这行必须删掉！
     
     // 正确示例：只设置图标，不设置title
     let leftItem = UIBarButtonItem(image: UIImage(named: "nav-icon"), style: .plain, target: self, action: #selector(leftItemTapped))
     navigationItem.leftBarButtonItem = leftItem
     

   • Storyboard/XIB创建的话，找到左侧bar item，把Title属性设为"None"，不要留空字符串

3. 修复自定义view的布局

   • 如果用了自定义view作为left bar item，给它设置明确的宽高约束，或者修正intrinsicContentSize：

     let iconView = UIImageView(image: UIImage(named: "nav-icon"))
     iconView.bounds = CGRect(x: 0, y: 0, width: 24, height: 24) // 明确设置尺寸
     let leftItem = UIBarButtonItem(customView: iconView)
     navigationItem.leftBarButtonItem = leftItem
     

4. 强制刷新导航栏布局

   • 如果只有点击右侧按钮才出现这个问题，可以在右侧按钮的点击事件里手动触发布局刷新：

     @objc func rightBarButtonTapped() {
         // 你的业务逻辑代码
         navigationController?.navigationBar.layoutIfNeeded()
     }
     

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