SwiftUI：如何从数组为单个视图添加多个overlay修饰符？

你的代码问题在于：ForEach循环中每次都会创建一个独立的backgroundView实例并添加对应overlay，最终生成了4个红色矩形（每个元素对应一个），而非在单个矩形上叠加所有文本。

修改方案 #

通过reduce方法将所有文本视图依次叠加到同一个背景视图上，利用SwiftUI视图不可变的特性，累积生成最终的复合视图：

struct ContentView: View {
    struct ViewText {
        var label: String
        var alignment: Alignment
        var id: String
    }
    
    var viewArray: [ViewText] = [
        ViewText(label: "Hello 1", alignment: .topLeading, id: "1"),
        ViewText(label: "Hello 2", alignment: .topTrailing, id: "2"),
        ViewText(label: "Hello 3", alignment: .bottomLeading, id: "3"),
        ViewText(label: "Hello 4", alignment: .bottomTrailing, id: "4")
    ]
    
    var body: some View {
        // 创建单个基础背景视图
        let baseBackground = Rectangle()
            .frame(width: 100, height: 100)
            .foregroundColor(.red) // 修正：用foregroundColor填充Rectangle本身，而非background
        
        // 叠加所有文本视图到背景上
        viewArray.reduce(baseBackground) { currentView, element in
            currentView.overlay(alignment: element.alignment) {
                Text(element.label).foregroundColor(.white)
            }
        }
    }
}

关键细节说明 #

1. 填充颜色修正：将原来的.background(Color.red)改为.foregroundColor(.red)，因为Rectangle是形状视图，foregroundColor才是设置其填充色的正确方式，background是给视图添加背景层，两者效果不同。
2. reduce的作用：从baseBackground开始，逐个将每个ViewText对应的文本视图以指定对齐方式叠加到当前视图上，最终得到一个包含所有角落文本的单个红色矩形。

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