你可以用一种颜色为 15x15 网格中的一系列文本视图着色，而另一个用不同的颜色着色吗？

Question

我也想知道是否有更短的方法来创建网格。我想要 [3,11,36,38,45,52,59,92,96,98,102,108,116,122,126,128,132,165,172,179,186,188,213,221] 绿色，[0,7,14,105,119,210,227,224] 红色，[426,326, 64,70,154,160,168,176,182,192,196,208] 蓝色和 [20,24,76,80,64,88,136,140,​​144,148,200,204] 紫色。 请注意，我需要能够按位置访问每个文本视图，即如果点击 113，则执行此操作，如果点击 12，则执行其他操作。 这是我的代码。

import SwiftUI
    
    struct CustomTextBorder: ViewModifier {
        // the modifier applied to each tile of the board
        func body(content: Content) -> some View {
            return content
                .fixedSize()
                .frame(width: 14, height: 14)
                .font(Font.custom("Courier", size: 14)).padding(4)
                .overlay(
                    RoundedRectangle(cornerRadius: 5)
                        .stroke(lineWidth: 2)
                        .foregroundColor(.blue)
            )
                .foregroundColor(.black)
        }
    }
    
    struct ContentView: View {
        var body: some View {
            VStack {
                Group {
                    HStack(spacing: 0) {
                        ForEach(0..<15, id: \.self) { row in
                            Text(row.description)
                                .modifier(CustomTextBorder())
                        }
                    }
                    HStack(spacing: 0) {
                        ForEach(15..<30, id: \.self) { row in
                            Text(row.description)
                                .modifier(CustomTextBorder())
                        }
                    }
                    HStack(spacing: 0) {
                        ForEach(30..<45, id: \.self) { row in
                            Text(row.description)
                                .modifier(CustomTextBorder())
                        }
                    }
                    HStack(spacing: 0) {
                        ForEach(45..<60, id: \.self) { row in
                            Text(row.description)
                                .modifier(CustomTextBorder())
                        }
                    }
                    HStack(spacing: 0) {
                        ForEach(60..<75, id: \.self) { row in
                            Text(row.description)
                                .modifier(CustomTextBorder())
                        }
                    }
                    HStack(spacing: 0) {
                        ForEach(75..<90, id: \.self) { row in
                            Text(row.description)
                                .modifier(CustomTextBorder())
                        }
                    }
                    HStack(spacing: 0) {
                        ForEach(90..<105, id: \.self) { row in
                            Text(row.description)
                                .modifier(CustomTextBorder())
                        }
                    }
                    HStack(spacing: 0) {
                        ForEach(105..<120, id: \.self) { row in
                            Text(row.description)
                                .modifier(CustomTextBorder())
                        }
                    }
                }
                Group {
                    HStack(spacing: 0) {
                        ForEach(120..<135, id: \.self) { row in
                            Text(row.description)
                                .modifier(CustomTextBorder())
                        }
                    }
                    HStack(spacing: 0) {
                        ForEach(135..<150, id: \.self) { row in
                            Text(row.description)
                                .modifier(CustomTextBorder())
                        }
                    }
                    HStack(spacing: 0) {
                        ForEach(150..<165, id: \.self) {row in
                            Text(row.description)
                                .modifier(CustomTextBorder())
                        }
                    }
                    HStack(spacing: 0) {
                        ForEach(165..<180, id: \.self) { row in
                            Text(row.description)
                                .modifier(CustomTextBorder())
                        }
                    }
                    HStack(spacing: 0) {
                        ForEach(180..<195, id: \.self) { row in
                            Text(row.description)
                                .modifier(CustomTextBorder())
                        }
                    }
                    HStack(spacing: 0) {
                        ForEach(195..<210, id: \.self) { row in
                            Text(row.description)
                                .modifier(CustomTextBorder())
                        }
                    }
                    HStack(spacing: 0) {
                        ForEach(210..<225, id: \.self) { row in
                            
                            Text(row.description)
                                .modifier(CustomTextBorder())
                        }
                    }                        
                }
            }
        }
    }

Answer 1

我得到了这个工作。看一看。我遇到了很多关于编译器无法在合理的时间内完成的警告，这导致了修改，比如将行放在单独的函数中。

struct CustomTextBorder: ViewModifier {
    let row: Int
    let col: Int
    
    // the modifier applied to each tile of the board
    func body(content: Content) -> some View {
        return
            RoundedRectangle(cornerRadius: 5)
            .stroke(lineWidth: 2)
            .foregroundColor(.blue)
            .background(Color(self.colorFor(row: row, col: col)))
            .frame(width: 22, height: 22)
            .overlay(
                content
                .font(Font.custom("Courier", size: 14))
                .foregroundColor(.black)
            )
    }
    
    func colorFor(row: Int, col: Int) -> UIColor {
        let greens = [3,11,36,38,45,52,59,92,96,98,102,108,116,122,126,128,132,165,172,179,186,188,213,221]
        let reds = [0,7,14,105,119,210,217,224]
        let blues = [16,28,32,42,48,56,64,70,154,160,168,176,182,192,196,208]
        let purples = [20,24,76,80,64,88,136,140,144,148,200,204]
        
        let box = row * 15 + col
        
        if greens.contains(box) {
            return .green
        } else if reds.contains(box) {
            return .red
        } else if blues.contains(box) {
            return .blue
        } else if purples.contains(box) {
            return .purple
        } else {
            return .white
        }
    }
}

struct ContentView: View {
    var body: some View {
        VStack {
            ForEach(0..<15) { row in
                self.boxRow(row: row)
            }
        }
    }
    
    func boxRow(row: Int) -> some View {
        HStack(spacing: 0) {
            ForEach(0..<15) { col in
                Text(String(row * 15 + col))
                    .modifier(CustomTextBorder(row: row, col: col))
                    .onTapGesture {
                        print("\(row * 15 + col) was tapped")}
            }
        }
    }
    
}