SwiftUI中ForEach循环显示单词换行且格式异常问题求助

问题根源 #

1. HStack无法自动换行：HStack是单行布局，超出屏幕宽度的内容无法适配，导致单词被截断或溢出
2. Spacer导致布局错乱：每个单词后添加的Spacer()会强制拉开单词间距，让每个单词占据单独一行
3. 空格丢失：拆分单词时没有保留原有的空格，导致单词之间无间隔
4. 点击事件匹配错误：原代码中switch匹配的是evacuation，但实际目标单词是带逗号的evacuation,，导致该单词的点击事件无法触发

修复代码 #

import SwiftUI

struct ContentView: View {
    
    let mainText = "In the midst of a wartime evacuation, a British aeroplane crashes on or near an isolated island in a remote region of the Pacific Ocean."
    
    let wordsToMakeTapable = ["evacuation,", "crashes", "isolated"]
    let definitions = ["evacuation,": "make empty", "crashes": "hit", "isolated": "far away"]
    
    var body: some View {
        let words = mainText.components(separatedBy: " ")
        
        // 拼接所有文本片段，实现自动换行的富文本效果
        Text(words.enumerated().map { index, word in
            var textSegment: Text
            
            // 处理可点击的单词
            if wordsToMakeTapable.contains(word) {
                textSegment = Text(word)
                    .foregroundColor(.blue)
                    .bold()
                    .onTapGesture {
                        // 直接从字典取值，避免冗余的switch判断
                        if let definition = definitions[word] {
                            print(definition)
                        }
                    }
            } else {
                textSegment = Text(word)
            }
            
            // 为除最后一个单词外的所有单词添加空格，保证原文格式
            return index != words.count - 1 ? textSegment + Text(" ") : textSegment
        }.reduce(Text(""), +))
        .padding() // 添加内边距优化显示
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

关键改动说明 #

• 用Text拼接实现自动换行：将每个单词对应的Text片段拼接成一个整体Text，SwiftUI的原生Text会自动处理换行逻辑，完美适配屏幕宽度
• 手动添加空格：通过遍历索引判断，为除最后一个单词外的所有单词添加空格，还原原文的单词间距
• 修复点击事件匹配：直接通过字典键值对匹配目标单词，解决原代码中因标点符号导致的点击无效问题
• 移除冗余布局组件：删除HStack和Spacer，避免布局错乱

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