SwiftUI如何为文本添加描边颜色？

SwiftUI没有原生的文本描边修饰符，以下是三种可行的实现方式：

1. 叠加偏移文本（兼容iOS13+） #

通过叠加多个向不同方向偏移的文本模拟描边效果，适合简单场景：

import SwiftUI

struct ContentView: View {
    let strokeColor: Color = .black
    let textColor: Color = .white
    let strokeWidth: CGFloat = 2
    
    var body: some View {
        ZStack {
            // 8个方向的描边层
            ForEach([(-strokeWidth, -strokeWidth), (strokeWidth, -strokeWidth),
                     (-strokeWidth, strokeWidth), (strokeWidth, strokeWidth),
                     (-strokeWidth, 0), (strokeWidth, 0),
                     (0, -strokeWidth), (0, strokeWidth)], id: \.self) { offset in
                Text("Outline")
                    .foregroundColor(strokeColor)
                    .offset(x: offset.0, y: offset.1)
            }
            
            // 上层原文本
            Text("Outline")
                .foregroundColor(textColor)
        }
        .font(.system(size: 48, weight: .bold))
    }
}

优点：无需依赖UIKit，兼容旧系统；缺点：描边较粗时会有锯齿感，不够平滑。

2. 基于UIKit的富文本实现（全iOS版本兼容） #

通过UIViewRepresentable封装UILabel，利用NSAttributedString的描边属性，效果更专业：

import SwiftUI

struct StrokedText: UIViewRepresentable {
    let text: String
    let font: UIFont
    let textColor: UIColor
    let strokeColor: UIColor
    let strokeWidth: CGFloat
    
    func makeUIView(context: Context) -> UILabel {
        let label = UILabel()
        label.textAlignment = .center
        label.numberOfLines = 0
        
        let attributes: [NSAttributedString.Key: Any] = [
            .font: font,
            .foregroundColor: textColor,
            .strokeColor: strokeColor,
            .strokeWidth: -strokeWidth // 负数表示填充文本+描边，正数仅显示描边
        ]
        label.attributedText = NSAttributedString(string: text, attributes: attributes)
        return label
    }
    
    func updateUIView(_ uiView: UILabel, context: Context) {}
}

// 使用示例
struct ContentView: View {
    var body: some View {
        StrokedText(
            text: "Outline",
            font: .systemFont(ofSize: 48, weight: .bold),
            textColor: .white,
            strokeColor: .black,
            strokeWidth: 2
        )
    }
}

优点：描边平滑，支持任意宽度，可扩展复杂富文本样式；缺点：需要写UIKit桥接代码。

3. iOS17+原生修饰符（最简方案） #

iOS17及以上系统新增了textStroke修饰符，一行代码搞定：

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Outline")
            .font(.system(size: 48, weight: .bold))
            .foregroundStyle(.white)
            .textStroke(.black, width: 2)
    }
}

优点：官方原生实现，代码简洁；缺点：仅支持iOS17、iPadOS17及以上版本。

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