SwiftUI：如何组合带样式的Text视图实现多行流式排版？

你的核心问题在于HStack是单行容器，无法自动换行，所以多行场景下无法实现流式排版。同时，直接拼接带修饰器的Text会因类型不匹配（普通Text vs 带背景的ModifiedContent）失败，以下是两种可行的解决方案：

方案一：用LazyVGrid实现自适应流式布局（iOS14+） #

利用LazyVGrid的自适应列配置，让容器根据可用宽度自动换行，同时保留每个单词的独立样式：

private func getTexts() -> some View {
    let words = note.text.components(separatedBy: " ")
    // 自适应列：最小宽度可根据需求调整，这里设为10适配短单词
    LazyVGrid(columns: [GridItem(.adaptive(minimum: 10))], spacing: 5) {
        ForEach(words.enumerated(), id: \.offset) { _, word in
            if word.lowercased() == "reading" {
                Text(word)
                    .padding(.all, 4)
                    .background(.yellow)
                    .clipShape(RoundedRectangle(cornerRadius: 8, style: .continuous))
            } else {
                Text(word)
            }
        }
    }
}

说明： #

• .adaptive(minimum: 10)会根据父容器宽度自动创建足够的列，当一行放不下当前单词时自动换行。
• 用enumerated()+offset作为ForEach的id，避免重复单词导致的标识冲突。

方案二：自定义WrapLayout（兼容iOS16+，纯SwiftUI布局） #

通过SwiftUI的Layout协议自定义一个支持流式换行的容器，更贴合"文本流式排列"的原生排版需求：

首先定义WrapLayout：

struct WrapLayout: Layout {
    var spacing: CGFloat = 5
    
    func sizeThatFits(proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) -> CGSize {
        let maxWidth = proposal.width ?? .infinity
        var currentWidth: CGFloat = 0
        var currentHeight: CGFloat = 0
        var lineHeight: CGFloat = 0
        
        for subview in subviews {
            let subviewSize = subview.sizeThatFits(.unspecified)
            if currentWidth + subviewSize.width > maxWidth {
                currentHeight += lineHeight + spacing
                currentWidth = subviewSize.width
                lineHeight = subviewSize.height
            } else {
                currentWidth += subviewSize.width + spacing
                lineHeight = max(lineHeight, subviewSize.height)
            }
        }
        currentHeight += lineHeight
        return CGSize(width: min(currentWidth - spacing, maxWidth), height: currentHeight)
    }
    
    func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) {
        let maxWidth = bounds.width
        var currentX = bounds.minX
        var currentY = bounds.minY
        var lineHeight: CGFloat = 0
        
        for subview in subviews {
            let subviewSize = subview.sizeThatFits(.unspecified)
            if currentX + subviewSize.width > maxWidth {
                currentY += lineHeight + spacing
                currentX = bounds.minX
                lineHeight = subviewSize.height
            }
            subview.place(at: CGPoint(x: currentX, y: currentY), proposal: ProposedViewSize(subviewSize))
            currentX += subviewSize.width + spacing
            lineHeight = max(lineHeight, subviewSize.height)
        }
    }
}

然后使用这个布局容器：

private func getTexts() -> some View {
    let words = note.text.components(separatedBy: " ")
    WrapLayout(spacing: 5) {
        ForEach(words.indices, id: \.self) { index in
            let currentWord = words[index]
            if currentWord.lowercased() == "reading" {
                Text(currentWord)
                    .padding(.all, 4)
                    .background(.yellow)
                    .clipShape(RoundedRectangle(cornerRadius: 8, style: .continuous))
            } else {
                Text(currentWord)
            }
        }
    }
}

说明： #

• 自定义布局会精确计算每个子视图的位置，实现类似UIKit中UICollectionViewFlowLayout的流式效果。
• 支持自定义间距，适配不同的排版需求。

关于类型问题的补充 #

你之前遇到的"合并视图类型失败"，是因为带修饰器（如.background）的Text返回的是ModifiedContent<Text, _BackgroundModifier<Color>>，而普通Text是Text，两者类型不同。但SwiftUI的some View可以兼容这种分支返回的不同View类型，只要它们都符合View协议——之前的错误大概率是尝试用+直接拼接两种类型导致的，上述容器方案可完全避免这类问题。

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