⌈iOS⌋一次和 ChatGPT 的“结对编程”体验

---

在 ChatGPT-4o 推出之后，白嫖党终于可以使用多模态相关功能了。对于 GUI Developer，最希望的莫过于将设计图稿喂给 AI，让其使用特定编程语言输出指定平台的相关代码。Bingo，程序员不生产代码，TA 们只是代码的搬运工。于是，有了下文～（忽略多余的解释和换行）

甲方的“快乐”，你“想象”不到

我：[图片]，请使用一个 UILabel 实现图中的文本效果，其中文本左右间隔 8 点，段落上下间隔 10 点。

// 图示效果如下：
释义 在我的空闲时间

用法 这个短语在句中通常做时间状语，用于描述你在空闲时间做的活动。你也可以说
    in my spare time。
    
例句 I like to gossip with my friends in my free time.
    在空闲时间我喜欢和朋友聊八卦。

• ChatGPT: 要在 UILabel 中实现类似图片中的文本效果，并且控制文本左右的间隔为 8 点，段落上下的间隔为 10 点，可以通过以下步骤进行设置。

  import UIKit
  
  // 创建 UILabel
  let label = UILabel()
  // 设置多行显示
  label.numberOfLines = 0
  // 设置文本内容
  let text = """
  释义\n在我的空闲时间\n\n用法\n这个短语在句中通常做时间状语，用于描述你在空闲时间做的活动。你也可以说in my spare time。\n\n例句\nI like to gossip with my friends in my free time.\n在空闲时间我喜欢和朋友聊天八卦。
  """
  // 创建 NSMutableParagraphStyle 并设置制表符和段落间距
  let paragraphStyle = NSMutableParagraphStyle()
  // 设置制表符停靠点，8 点间隔
  let tabWidth: CGFloat = 8.0
  paragraphStyle.tabStops = [
  NSTextTab(textAlignment: .left, location: tabWidth)
  ]
  // 设置段落上下间距
  paragraphStyle.paragraphSpacing = 10.0
  // 创建属性字符串并应用段落样式
  let attributedString = NSMutableAttributedString(string: text)
  attributedString.addAttribute(.paragraphStyle, value: paragraphStyle, range: NSMakeRange(0, attributedString.length)
  // 设置 UILabel 的富文本
  label.attributedText = attributedString
  // 设置文本左右内边距
  label.textAlignment = .left
  // 设置 UILabel 的 frame 和背景颜色（例如白色背景）
  label.frame = CGRect(x: 0, y: 0, width: 300, height: 400) // 根据需求调整大小
  label.backgroundColor = .white
  // 将 UILabel 添加到视图中（假设你在一个 UIViewController 中）
  view.addSubview(label)

我：我的原始文本是这样的：释义\t在我的空闲时间\n\n用法\t这个短语在句中通常做时间状语，用于描述你在空闲时间做的活动。你也可以说in my spare time。\n\n例句\tI like to gossip with my friends in my free time.\n在空闲时间我喜欢和朋友聊天八卦。

• ChatGPT: 如果你的原始文本包含制表符 (\t) 和换行符 (\n)，你可以使用 NSTextTab 来控制制表符的停靠位置，并通过设置段落样式来调整间距。

  import UIKit
  
  // 创建 UILabel
  let label = UILabel()
  // 设置多行显示
  label.numberOfLines = 0
  // 原始文本，包含制表符和换行符
  let text = """
  释义\t在我的空闲时间\n\n用法\t这个短语在句中通常做时间状语，用于描述你在空闲时间做的活动。你也可以说in my spare time。\n\n例句\tI like to gossip with my friends in my free time.\n在空闲时间我喜欢和朋友聊天八卦。
  """
  // 创建 NSMutableParagraphStyle 并设置制表符和段落间距
  let paragraphStyle = NSMutableParagraphStyle()
  // 设置制表符停靠点，8 点间隔
  let tabWidth: CGFloat = 8.0
  paragraphStyle.tabStops = [
      NSTextTab(textAlignment: .left, location: tabWidth),
      NSTextTab(textAlignment: .left, location: tabWidth * 10) // 假设第二个制表符在更远的地方
  ]
  // 设置段落间距
  paragraphStyle.paragraphSpacing = 10.0
  // 创建属性字符串并应用段落样式
  let attributedString = NSMutableAttributedString(string: text)
  attributedString.addAttribute(.paragraphStyle, value: paragraphStyle, range: NSMakeRange(0, attributedString.length))
  // 设置 UILabel 的富文本
  label.attributedText = attributedString
  // 设置 UILabel 的 frame 和背景颜色（例如白色背景）
  label.frame = CGRect(x: 0, y: 0, width: 300, height: 400) // 根据需求调整大小
  label.backgroundColor = .white
  // 将 UILabel 添加到视图中（假设你在一个 UIViewController 中）
  view.addSubview(label)

我：你的代码并没有让制表符右边的文本多行对齐。

• ChatGPT: 要在 UILabel 中实现制表符右边的文本多行对齐，需要对 NSTextTab 的设置进行一些调整。默认情况下，制表符后面的内容不会自动换行对齐，因此我们需要手动处理。要实现制表符右边的文本多行对齐，我们需要确保文本在制表符后面的内容与第一行的起始位置对齐。这可以通过设置段落的首行缩进（firstLineHeadIndent）和悬挂缩进（headIndent）来实现。

  import UIKit
  
  // 创建 UILabel
  let label = UILabel()
  // 设置多行显示
  label.numberOfLines = 0
  // 原始文本，包含制表符和换行符
  let text = """
  释义\t在我的空闲时间\n\n用法\t这个短语在句中通常做时间状语，用于描述你在空闲时间做的活动。你也可以说in my spare time。\n\n例句\tI like to gossip with my friends in my free time.\n在空闲时间我喜欢和朋友聊天八卦。
  """
  // 创建 NSMutableParagraphStyle 并设置制表符和段落间距
  let paragraphStyle = NSMutableParagraphStyle()
  // 设置制表符停靠点，8 点间隔
  let tabWidth: CGFloat = 8.0
  let tabPosition: CGFloat = 100.0 // 设置制表符位置
  paragraphStyle.tabStops = [
      NSTextTab(textAlignment: .left, location: tabPosition)
  ]
  // 设置段落间距
  paragraphStyle.paragraphSpacing = 10.0
  // 设置首行缩进和悬挂缩进，使制表符后面的文本多行对齐
  paragraphStyle.headIndent = tabPosition + tabWidth
  paragraphStyle.firstLineHeadIndent = 0
  // 创建属性字符串并应用段落样式
  let attributedString = NSMutableAttributedString(string: text)
  attributedString.addAttribute(.paragraphStyle, value: paragraphStyle, range: NSMakeRange(0, attributedString.length))
  // 设置 UILabel 的富文本
  label.attributedText = attributedString
  // 设置 UILabel 的 frame 和背景颜色（例如白色背景）
  label.frame = CGRect(x: 0, y: 0, width: 300, height: 400) // 根据需求调整大小
  label.backgroundColor = .white
  
  // 将 UILabel 添加到视图中（假设你在一个 UIViewController 中）
  view.addSubview(label)

我：你的代码中的 tabPosition 为什么是 100？

• ChatGPT: tabPosition 设置为 100 是一个示例值，用来控制「释义」、「用法」、「例句」这几个标签后面文本的起始位置。这个值的选择是为了确保文本在标签之后有足够的空间，但它实际上应该根据你的具体需求进行调整。tabPosition 的值应该等于标签（如「释义」、「用法」、「例句」）的最大宽度，再加上你想要的额外间隔。你可以使用 NSString 的方法 size(withAttributes:) 来测量每个标签的宽度，然后选择最大值作为 tabPosition 的基准。

我：我如何计算 「释义」、「用法」、「例句」 的宽度，我的字体大小为 UIFont.systemFont(ofSize: 13)。

• ChatGPT: 要计算「释义」、「用法」、「例句」这些标签的宽度，可以使用 NSString 或 NSAttributedString 的方法 size(withAttributes:) 来根据指定的字体计算文本的尺寸。下面是一个示例代码来计算这些文本的宽度：

  import UIKit
  
  // 要计算宽度的标签数组
  let labels = ["释义", "用法", "例句"]
  // 指定字体
  let font = UIFont.systemFont(ofSize: 13)
  // 计算每个标签的宽度
  var maxWidth: CGFloat = 0.0
  for label in labels {
      let size = (label as NSString).size(withAttributes: [.font: font])
      maxWidth = max(maxWidth, size.width)
  }
  print("标签的最大宽度为: \(maxWidth) 点")

我：其中「在空闲时间我喜欢和朋友聊天八卦。」需要新起一行显示，但是需要和之前的文本对齐。

• ChatGPT: $$%%^^^%$$$##（注：牛头不对马嘴～）。亲，您需要充值以解锁会话长度限制！（DIY，非官话！）

总结

从聊天过程可以看出，ChatGPT 目前几乎无法做到一步到位给出最终版本的代码，需要使用者不断明确需求的细节并完成纠错。对于最后一个需求，在免费版本的 Tokens 长度中没有被正确实现。但从答复来看，估计它也无法实现。

通常的做法是另起一个 NSAttributedString，它的 paragraphSpacing 为 0。使用两个空格进行左边文字的占位，加上制表符并拼接上最后的中文即为其 string。但此时会遇到两个问题：

1. 之前的 paragraphSpacing = 10 生效导致中文段落出现多余的间距。
2. 中文段落左右文本的间距与之前的间距不相等。

问题的解决方式：

1. 使用 paragraphSpacingBefore 替代 paragraphSpacing。
2. 使用透明色文字替代空格进行占位，因为空格的渲染宽度与文字并不相同。