如何在SwiftUI中仅修改文本首字符字号？求正确实现方案

问题分析 #

用HStack拆分两个Text的方式，在多行文本时会因为横向布局特性，导致首字符与剩余文本的排版不符合预期（比如首字符单独占行、换行对齐混乱）。更适配的方案是利用SwiftUI的**富文本（AttributedString）**实现，让整个文本作为一个整体渲染，自然适配多行场景。

实现步骤 #

1. 编写方法将原始文本转换为AttributedString，单独给首字符设置字号；
2. 用Text(attributedString)渲染，保留原有动画、样式设置。

完整代码示例 #

struct LargeFirstCharText: View {
    let originalText: String
    @State private var blurRadius: CGFloat = 5
    @State private var opacity: Double = 0
    
    // 生成带样式的富文本
    private var styledText: AttributedString {
        var attributedString = AttributedString(originalText)
        guard !attributedString.isEmpty else { return attributedString }
        
        // 给首字符设置大号字体
        let firstCharRange = attributedString.startIndex..<attributedString.index(after: attributedString.startIndex)
        attributedString[firstCharRange].font = Font.custom("PlayfairDisplayRoman-Bold", size: 46, relativeTo: .largeTitle)
        
        // 给剩余文本设置常规字体
        let remainingRange = attributedString.index(after: attributedString.startIndex)..<attributedString.endIndex
        attributedString[remainingRange].font = Font.custom("PlayfairDisplayRoman-Bold", size: 36, relativeTo: .largeTitle)
        
        // 统一设置其他样式
        attributedString.foregroundColor = .white
        attributedString.multilineTextAlignment = .center
        
        return attributedString
    }
    
    var body: some View {
        Text(styledText)
            .padding()
            .blur(radius: blurRadius)
            .opacity(opacity)
            .onAppear {
                withAnimation(.easeIn(duration: 1.0)) {
                    blurRadius = 0
                    opacity = 1.0
                }
            }
    }
}

// 使用示例
struct ContentView: View {
    var body: some View {
        LargeFirstCharText(originalText: "这里输入需要首字符放大的多行测试文本，验证换行后的排版是否符合预期")
            .background(Color.black)
    }
}

代码说明 #

• 富文本让首字符与剩余文本属于同一个文本块，多行时自动按正常排版换行，完全匹配需求效果；
• 保留了你原有的模糊、透明度动画逻辑，只需传入原始文本即可使用；
• 可灵活调整首字符与剩余文本的字体、颜色等样式，无需拆分组件。

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