在 Swift/SwiftUI 中更改十进制数的字体大小

Question

所以我需要使小数位小于实际数字，我将在下面告诉你我的意思。

这是我的代码：

import SwiftUI

struct BalanceDetailsView: View {
    //MARK: - PROPERTIES
    var balance: Float
    var balanceString: String {
        return balance.formattedWithSeparator
    }
    //MARK: - BODY
    var body: some View {
        VStack{
            HStack{
                    Text(balanceString)
                        .font(.custom(K.fonts.gilroyBold, size: 24))
                        .multilineTextAlignment(.center)
                        .padding(.top)
             
            }//:VSTACK
        }//:HSTACK
    }
}

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



//Formatter extension i used to get this code
extension Formatter {
    static let withSeparator: NumberFormatter = {
        let formatter = NumberFormatter()
        formatter.numberStyle = .decimal

        // minimum decimal digit, eg: to display 2 as 2.00
        formatter.minimumFractionDigits = 2

        // maximum decimal digit, eg: to display 2.5021 as 2.50
        formatter.maximumFractionDigits = 2
        
        return formatter
    }()
}

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

Result I get	Result I need

Answer 1

当您知道字符串的确切格式时，例如在这种情况下最小字符串长度为 4("0.00") ，您可以安全地使用 dropLast 和 dropFirst。

我建议将 2 移动到 priceFractionDigits 常量以减少代码中常量的使用。

然后你可以使用字符串连接，它会根据基线对齐Text。

struct BalanceText: View {
    var balance: Float
    var balanceString: String {
        return balance.formattedWithSeparator
    }
    
    var body: some View {
        Text(balanceString.dropLast(priceFractionDigits))
            .font(.system(size: 24))
            +
            Text(balanceString.dropFirst(balanceString.count - priceFractionDigits))
            .font(.system(size: 18))
    }
}

private let priceFractionDigits = 2

extension Formatter {
    static let withSeparator: NumberFormatter = {
        let formatter = NumberFormatter()
        formatter.numberStyle = .decimal

        // minimum decimal digit, eg: to display 2 as 2.00
        formatter.minimumFractionDigits = priceFractionDigits

        // maximum decimal digit, eg: to display 2.5021 as 2.50
        formatter.maximumFractionDigits = priceFractionDigits
        
        return formatter
    }()
}

用法

BalanceText(balance: balance)

Answer 2

这是在 SwiftUI 3（iOS 15、macOS 12 等）中使用新 AttributedString 的示例

var balanceString: AttributedString {
    var attributedString = AttributedString(balance.formattedWithSeparator)
    guard let separator = Formatter.withSeparator.decimalSeparator else { return attributedString }

    if let range = attributedString.range(of: separator) {
        attributedString[attributedString.startIndex...attributedString.index(beforeCharacter: range.lowerBound)]
            .font = Font.largeTitle
        attributedString[attributedString.index(afterCharacter: range.lowerBound)..<attributedString.endIndex]
            .font = Font.caption
    }

    return attributedString
}

我在这里使用了一些内置字体样式，但应该很容易替换。另请注意，由于我们在此处设置了.font 属性，因此应将其从Text 中删除

Answer 3

您可以将Text 与+ 运算符连接在一起。

我稍微改变了您使用 NumberFormatter 的方式，所以它被区域设置的正确十进制字符分割。

struct BalanceDetailsView: View {
    private let wholeNumberPart: String
    private let decimalNumberPart: String

    init(balance: Double) {
        (wholeNumberPart, decimalNumberPart) = balance.formattedSplittingBySeparator
    }

    var body: some View {
        Text(wholeNumberPart).font(.system(size: 24)) +
        Text(decimalNumberPart).font(.system(size: 16))
    }
}


extension Numeric {
    var formattedSplittingBySeparator: (whole: String, decimal: String) {
        let formatter = NumberFormatter()
        formatter.numberStyle = .decimal
        formatter.minimumFractionDigits = 2
        formatter.maximumFractionDigits = 2
        let str = formatter.string(for: self) ?? "0\(formatter.decimalSeparator!)00"
        let split = str.components(separatedBy: formatter.decimalSeparator)
        let whole = (split.first ?? "0") + formatter.decimalSeparator
        let decimal = split.count == 2 ? split[1] : "00"
        return (whole: whole, decimal: decimal)
    }
}

用法：

BalanceDetailsView(balance: 43678)

结果：

Answer 4

您可以用小数分隔符分割字符串，并以零间距 HStack 显示各个部分。

struct BalanceView : View {
    let balance : Float
    
    var body: some View {
        let components = balance
                        .formattedWithSeparator
                        .components(separatedBy: Formatter.withSeparator.decimalSeparator)
        HStack(alignment: .firstTextBaseline, spacing: 0) {
            Text(components[0])
            if components.count > 1 {
                Text(".")
                Text(components[1])
                    .font(.title)
            }
        }
        .font(.largeTitle)
        .multilineTextAlignment(.center)
        .padding(.top)
    }
}

用您的自定义字体替换字体

---

在你的环境中你可以使用它

struct BalanceDetailsView: View {
    //MARK: - PROPERTIES
    var balance: Float
    
    //MARK: - BODY
    var body: some View {
        VStack{
           BalanceView(balance: balance)
        }//:VSTACK
    }
}