SwiftUI如何实现文本外围绘制圆形且视图边界与圆形匹配

你只需要把aspectRatio修饰符从背景的Circle上移到文本容器层即可，核心原理是背景视图不会影响父视图的布局尺寸，只有给文本所在的容器强制加1:1的宽高比约束，才能让整个组件的尺寸和圆形外接矩形完全匹配。

最终实现代码 #

struct CircledText: View {
    let text: String

    var body: some View {
        Text(text)
            .padding()
            // 强制整个文本容器为1:1的正方形，尺寸取宽、高的最大值
            .aspectRatio(1, contentMode: .fill)
            .background(Circle().strokeBorder())
            // 橙色边框用于验证组件边界，上线可删除
            .border(.orange)
    }
}

长文本适配优化 #

如果你的使用场景可能出现较长的文本，可给Text增加缩放、行数限制，避免内容溢出：

struct CircledText: View {
    let text: String

    var body: some View {
        Text(text)
            .lineLimit(1)
            // 最小可缩放到原字体的50%，可根据需求调整
            .minimumScaleFactor(0.5)
            .padding()
            .aspectRatio(1, contentMode: .fill)
            .background(Circle().strokeBorder())
    }
}

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