SwiftUI中如何让字符串内数字字符在容器中居中对齐（忽略符号）

我需要让数字字符在圆形容器中居中对齐，忽略正负号。比如字符串“+9”，要让“9”位于容器正中心，而非“+”和“9”整体的中间位置。之前用ZStack分别放置数字和符号，但这种方式代码杂乱，而且在不同设备、屏幕尺寸以及Dynamic Type下无法正常适配。

以下是示例代码：红色圆形是默认对齐（效果错误），绿色圆形是近似实现方案：

let diam = 75.0

ZStack {
    Rectangle()
        .frame(width: 1, height: .infinity)
        .foregroundColor(.yellow)

    // 近似正确的实现
    VStack {
        ForEach(9..<11) { i in
            ZStack {
                Circle()
                    .frame(width: diam, height: diam)
                    .foregroundColor(.green)

                Text("\(i)")
                Text("+").font(.title)
                    .frame(width: diam * 0.75, height: diam * 0.75, alignment: .leading)
            }
            .foregroundColor(.black).font(.title)
        }
        // 错误的实现
        ZStack {
            Circle()
                .frame(width: diam, height: diam)
                .foregroundColor(.red)

            Text("+23")
        }
        .foregroundColor(.black).font(.title)
    }
}

目前的方案并不理想，希望找到更优的解决办法。

可以通过自定义对齐规则或叠加层布局实现精准对齐，同时完美适配Dynamic Type和不同屏幕尺寸。

方案一：自定义对齐规则（精准可控） #

通过自定义Alignment和alignmentGuide，让数字锚定容器中心，符号自动偏移到数字左侧：

import SwiftUI

// 自定义对齐标识，用于锚定数字中心
struct NumberCenteredAlignment: AlignmentID {
    static func defaultValue(in context: ViewDimensions) -> CGFloat {
        context[HorizontalAlignment.center]
    }
}

extension HorizontalAlignment {
    static let numberCentered = HorizontalAlignment(NumberCenteredAlignment.self)
}

struct CenteredNumberBadge: View {
    let value: String
    let diameter: CGFloat
    var font: Font = .title
    
    // 提取纯数字部分
    private var numberPart: String {
        value.trimmingCharacters(in: CharacterSet(charactersIn: "+-"))
    }
    
    // 提取符号部分（+/-）
    private var signPart: String? {
        value.first.flatMap { "+-".contains($0) ? String($0) : nil }
    }
    
    var body: some View {
        ZStack(alignment: .numberCentered) {
            Circle()
                .frame(width: diameter, height: diameter)
            
            // 数字部分锚定容器中心
            Text(numberPart)
                .font(font)
                .alignmentGuide(.numberCentered) { d in
                    d[HorizontalAlignment.center]
                }
            
            // 符号部分锚定到数字右侧（视觉上在数字左边）
            if let sign = signPart {
                Text(sign)
                    .font(font)
                    .alignmentGuide(.numberCentered) { d in
                        d[HorizontalAlignment.trailing]
                    }
            }
        }
        .foregroundColor(.black)
    }
}

// 使用示例
struct ContentView: View {
    var body: some View {
        ZStack {
            Rectangle()
                .frame(width: 1, height: .infinity)
                .foregroundColor(.yellow)
            
            VStack(spacing: 20) {
                CenteredNumberBadge(value: "+9", diameter: 75)
                    .foregroundColor(.green)
                
                CenteredNumberBadge(value: "-23", diameter: 75)
                    .foregroundColor(.green)
                
                // 错误效果对比
                ZStack {
                    Circle()
                        .frame(width: 75, height: 75)
                        .foregroundColor(.red)
                    
                    Text("+23")
                        .font(.title)
                }
                .foregroundColor(.black)
                
                // Dynamic Type适配测试
                CenteredNumberBadge(value: "+100", diameter: 75, font: .largeTitle)
                    .foregroundColor(.green)
            }
        }
    }
}

方案二：叠加层布局（简洁高效） #

先让数字居中，再将符号叠加到数字左侧，代码更简洁：

struct CenteredNumberBadgeSimple: View {
    let value: String
    let diameter: CGFloat
    var font: Font = .title
    
    private var numberPart: String {
        value.trimmingCharacters(in: CharacterSet(charactersIn: "+-"))
    }
    
    private var signPart: String? {
        value.first.flatMap { "+-".contains($0) ? String($0) : nil }
    }
    
    var body: some View {
        Circle()
            .frame(width: diameter, height: diameter)
            .overlay(
                // 数字先居中
                Text(numberPart)
                    .font(font)
                    // 符号叠加到数字左侧
                    .overlay(
                        Group {
                            if let sign = signPart {
                                Text(sign)
                                    .font(font)
                                    .alignmentGuide(.leading) { $0[.trailing] }
                            }
                        },
                        alignment: .leading
                    )
            )
            .foregroundColor(.black)
    }
}

方案优势 #

• 精准对齐：数字始终处于容器正中心，符号不影响数字的居中位置
• 全场景适配：支持Dynamic Type，字体大小变化时自动调整布局，无需硬编码尺寸比例
• 代码复用：封装为自定义View，逻辑清晰，可重复使用
• 扩展性强：轻松支持负号，或调整符号的偏移距离

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