在Swift/SwiftUI中如何设置数字小数部分的字号小于整数部分

实现方案 #

你当前直接使用单个Text组件渲染完整金额字符串，所以所有文本字号统一。只需将格式化后的金额按小数点拆分，分别为整数部分、小数部分设置不同字号后拼接为富文本即可实现需求。你可以根据设计要求调整小数部分的字号和baselineOffset的偏移值，实现更贴合的对齐效果：

完整修改后代码 #

import SwiftUI

struct BalanceDetailsView: View {
    //MARK: - PROPERTIES
    var balance: Float
    var balanceString: String {
        return balance.formattedWithSeparator
    }
    //MARK: - BODY
    var body: some View {
        VStack{
            HStack{
                // 拆分金额为整数和小数部分
                let parts = balanceString.components(separatedBy: ".")
                let integerPart = parts.first ?? ""
                let decimalPart = parts.count > 1 ? parts[1] : "00"
                
                // 拼接不同字号的文本，baselineOffset调整小数部分对齐位置
                Text(integerPart)
                    .font(.custom(K.fonts.gilroyBold, size: 24))
                + Text(".\(decimalPart)")
                    .font(.custom(K.fonts.gilroyBold, size: 16)) // 可自定义小数部分字号
                    .baselineOffset(4) // 调整偏移量让小数与整数对齐
            }
            .multilineTextAlignment(.center)
            .padding(.top)
        }//: VSTACK
    }
}

struct BalanceDetailsView_Previews: PreviewProvider {
    static var previews: some View {
        BalanceDetailsView(balance: 43678)
            .previewLayout(.sizeThatFits)
    }
}

// 数字格式化扩展
extension Formatter {
    static let withSeparator: NumberFormatter = {
        let formatter = NumberFormatter()
        formatter.numberStyle = .decimal
        // 最少保留2位小数，示例：2 显示为 2.00
        formatter.minimumFractionDigits = 2
        // 最多保留2位小数，示例：2.5021 显示为 2.50
        formatter.maximumFractionDigits = 2
        
        return formatter
    }()
}

extension Numeric {
    var formattedWithSeparator: String { Formatter.withSeparator.string(for: self) ?? "" }
}

效果对比 #

当前得到的结果	期望实现的结果

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