SwiftUI：设置背景Capsule最小宽度并解决文本居中问题

方案一：修复GeometryReader版本的居中问题 #

你的代码中，文本未居中是因为GeometryReader作为背景时，胶囊宽度被拉伸至最小高度，但文本本身未在拉伸后的胶囊范围内居中。只需给外层Text添加frame(alignment: .center)并设置maxWidth: .infinity，即可让文本在胶囊背景中居中：

struct Badge: View {
  let text: String

  var body: some View {
    Text(verbatim: text)
      .font(.caption2)
      .foregroundColor(.white)
      .padding(2)
      .background {
        GeometryReader { proxy in
          Capsule()
            .fill(.red)
            .frame(minWidth: proxy.size.height)
        }
      }
      // 让文本在背景胶囊的范围内居中
      .frame(maxWidth: .infinity, alignment: .center)
  }
}

该方案保留GeometryReader的自适应特性，同时确保文本始终处于胶囊中心。

方案二：不使用GeometryReader的自适应方案 #

若不想依赖GeometryReader，可通过字体行高结合padding计算最小宽度。系统字体的lineHeight可直接获取，加上上下padding的总和即为胶囊的最小高度，将此值设为胶囊最小宽度即可：

struct Badge: View {
  let text: String
  // 获取caption2字体的行高
  private let fontLineHeight = Font.caption2.lineHeight

  var body: some View {
    Text(verbatim: text)
      .font(.caption2)
      .foregroundColor(.white)
      .padding(2)
      // 最小宽度 = 字体行高 + 上下padding总和（2*2）
      .frame(minWidth: fontLineHeight + 4)
      .background(Capsule().fill(.red))
  }
}

此方案无需额外布局容器，直接通过字体属性计算最小宽度，适配自适应布局的同时保证文本自然居中。

方案三：精准匹配文本尺寸的ZStack+偏好键方案 #

如果需要更精准地匹配文本实际渲染尺寸，可通过偏好键获取文本真实大小，再动态设置胶囊最小宽度：

struct Badge: View {
  let text: String
  @State private var textSize: CGSize = .zero

  var body: some View {
    ZStack(alignment: .center) {
      // 实际显示的文本
      Text(verbatim: text)
        .font(.caption2)
        .foregroundColor(.white)
        .padding(2)
        // 记录文本的真实尺寸
        .background(
          GeometryReader { proxy in
            Color.clear
              .preference(key: TextSizeKey.self, value: proxy.size)
          }
        )
      
      // 基于文本高度设置最小宽度的胶囊
      Capsule()
        .fill(.red)
        .frame(minWidth: textSize.height)
    }
    .onPreferenceChange(TextSizeKey.self) { newSize in
      textSize = newSize
    }
  }
}

// 自定义偏好键用于传递文本尺寸
private struct TextSizeKey: PreferenceKey {
  static var defaultValue: CGSize = .zero
  static func reduce(value: inout CGSize, nextValue: () -> CGSize) {
    value = nextValue()
  }
}

该方案完全基于文本实际渲染尺寸计算胶囊最小宽度，适配任何字体和padding设置，同时文本天然居中。

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