使用 ForEach 循环 SwiftUI 绘制矩形答案

【问题标题】：Drawing Rectangles using a ForEach loop SwiftUI使用 ForEach 循环 SwiftUI 绘制矩形
【发布时间】：2022-01-08 14:04:16
【问题描述】：

我正在尝试创建一个矩形视图，其中包含给定数量的矩形，

即Image

我正在尝试重新创建它，并选择传递一个大小以向其添加更多级别，目前我只设法覆盖

        let colors: [Color] = [.red, .green, .blue]

        var body: some View {

            ZStack {
                ForEach(colors, id: \.self) { color in
                    Text(color.description.capitalized)
                        .background(color)
                }
            }
        }

我在寻找问题时才发现，唯一的问题是具有可调整大小的值，在使用循环时可以逐渐变小，目前我得到的最接近的是：

struct SquareContent{
    var color: Color
    var size: CGSize
}

struct GrannySquareComplete: View {
    let colors: [SquareContent] = [
        SquareContent.init(color: .red, size: CGSize(width: 100, height: 100)),
        SquareContent.init(color: .white, size: CGSize(width: 80, height: 80)),
        SquareContent.init(color: .red, size: CGSize(width: 80, height: 80))]
    
    var body: some View {
        ZStack {
            ForEach(0...colors.count) { i in
                Text("")
                    .frame(width: colors[i].size.width, height: colors[i].size.height)
                    .background(colors[i].color)
                    .border(.white)
            }
        }
    }
}

但这会返回一个错误

对初始化程序的调用没有完全匹配

我相信这是由于在 foreach 循环中使用了 Text 但不知道如何解决这个问题。

【问题讨论】：

标签： swift foreach swiftui

【解决方案1】：

要修复您的错误，请将ForEach(0...colors.count) { i in 更改为

ForEach(0..<colors.count) { i in

让它充满活力

//Make Identifiable
struct SquareContent: Identifiable{
    //Add id
    let id: UUID = UUID()
    var color: Color
    //Handle size based on screen
}

struct GrannySquareComplete: View {
    //Change to @State
    @State var colors: [SquareContent] = [
        SquareContent.init(color: .red),
        SquareContent.init(color: .white),
        SquareContent.init(color: .red)]
    
    var body: some View {
        VStack{
            //Mimic adding a square
            Button("add square"){
                colors.append(.init(color: [.blue, .black,.gray, .orange, .pink].randomElement()!))
            }
        ZStack(alignment: .center){
            ForEach(Array(colors.enumerated()), id: \.offset) { (index, color) in
                //Calculate the size by percentange based on index
                let percentage: CGFloat = Double(colors.count - index)/Double(colors.count)
                //Create a custom view to handle the details
                SquareComplete(square: color, percentage: percentage)
            }
        }
        }
    }
}
struct SquareComplete: View {
    let square: SquareContent
    let percentage: CGFloat
    var body: some View{
        GeometryReader{ geo in
            Rectangle()
                //Make a square
                .aspectRatio(1, contentMode: .fit)
                .border(.white)
                .background(square.color)
                .foregroundColor(.clear)
                //Center
                .position(x: geo.size.width/2, y: geo.size.height/2)
                //Adjust size by using the available space and the passed percentage
                .frame(width: geo.size.width * percentage, height: geo.size.height * percentage, alignment: .center)
        }
    }
}

struct GrannySquareComplete_Previews: PreviewProvider {
    static var previews: some View {
        GrannySquareComplete()
    }
}

【讨论】：