Question

我有一排7个文本视图a至g。在它们上方有2个空的Text视图。我点击7个字母之一，然后点击两个空字母之一。目前，在上一行的两个文本视图中均显示字母点击。

我想发生的是仅在我点击的文本视图中显示所选字母，而不同时在两者中显示。最后，我可能会有成排的空视图，并且一次只需要一个即可对更改做出反应。

感谢您的帮助。

这是我使用的代码：

import SwiftUI
    
    struct ContentView: View{
        @State private var chosenLetter = ""
        @State private var placedLetter = ""
        
        var body: some View{
            VStack {
                HStack {
                Text(self.placedLetter)
                    .modifier(CustomTextBorder())
                .onTapGesture(count: 1) {
                    self.placedLetter.isEmpty ?  (self.placedLetter = self.chosenLetter): (self.placedLetter = "")
                   if !self.placedLetter.isEmpty {self.chosenLetter = ""}
                }// .onTapGesture(count: 1)
                    Text(self.placedLetter)
                        .modifier(CustomTextBorder())
                    //.offset(x: -7, y: 0)
                    .onTapGesture(count: 1) {
                     self.placedLetter.isEmpty ?  (self.placedLetter = self.chosenLetter): (self.placedLetter = "")
                    if !self.placedLetter.isEmpty {self.chosenLetter = ""}
                    }// .onTapGesture(count: 1)
                    Text(self.placedLetter)
                        .modifier(CustomTextBorder())
                    .onTapGesture(count: 1) {
                        self.placedLetter.isEmpty ?  (self.placedLetter = self.chosenLetter): (self.placedLetter = "")
                       if !self.placedLetter.isEmpty {self.chosenLetter = ""}
                    }// .onTapGesture(count: 1)
                }// HStack
                    .padding(.bottom, 30)
                HStack {
                    Text("a")
                        .modifier(CustomTextBorder())
                        .onTapGesture(count: 1) {
                            self.chosenLetter = "a"
                    }
                    Text("b")
                        .modifier(CustomTextBorder())
                        .onTapGesture(count: 1) {
                            self.chosenLetter = "b"
                    }
                    Text("c")
                        .modifier(CustomTextBorder())
                        .onTapGesture(count: 1) {
                            self.chosenLetter = "c"
                    }
                    Text("d")
                        .modifier(CustomTextBorder())
                        .onTapGesture(count: 1) {
                            self.chosenLetter = "d"
                    }
                    Text("e")
                        .modifier(CustomTextBorder())
                        .onTapGesture(count: 1) {
                            self.chosenLetter = "e"
                    }
                    Text("f")
                        .modifier(CustomTextBorder())
                        .onTapGesture(count: 1) {
                            self.chosenLetter = "f"
                    }
                    Text("g")
                        .modifier(CustomTextBorder())
                        .onTapGesture(count: 1) {
                            self.chosenLetter = "g"
                    }
                }// HStack
            }.padding()//.font(.headline)
        }
    }
    struct CustomTextBorder: ViewModifier {
        func body(content: Content) -> some View {
            return content
                .font(Font.custom("Courier", size: 16))
                .padding(10)
                .overlay(
                    RoundedRectangle(cornerRadius: 5)
                        .stroke(lineWidth: 2)
                    .foregroundColor(.blue)
                )
                .foregroundColor(.black)
        }
    }

Answer 1

更新：您可以使用字典来管理行和列。

struct ContentView: View {
    @State private var chosenLetter = ""
    var rows = 3
    var columns = 3
    @State var dict: Dictionary<Int, Dictionary<Int, String>> = [:]

    var body: some View {
        VStack {
            ForEach(0..<rows, id: \.self) { row in
                HStack {
                    ForEach(0..<self.columns, id: \.self) { column in
                        Text(self.dict[row]?[column] ?? "")
                            .modifier(CustomTextBorder())
                            .onTapGesture(count: 1) {
                                if let _ = self.dict[row] {
                                    self.dict[row]?[column] = self.chosenLetter
                                } else {
                                    self.dict[row] = [column: self.chosenLetter]
                                }
                                self.chosenLetter = ""
                        }
                    }
                }
            }
            .padding(.bottom, 30)
        }
    }
}

您不能使用单个字符串State对象与3个文本字段绑定来实现此目的。您应该使用多个字符串对象或一个字符串数组。这是一个最小的示例，说明如何使用字符串数组来实现此目的。您可能想使其更具动态性，以使数组索引不是静态的。

struct ContentView: View {
    @State private var chosenLetter = ""
    @State private var placedLetter = ["", "", ""]
    
    var body: some View {
        VStack {
            HStack {
                Text(self.placedLetter[0])
                    .modifier(CustomTextBorder())
                    .onTapGesture(count: 1) {
                        self.placedLetter[0].isEmpty ?  (self.placedLetter[0] = self.chosenLetter): (self.placedLetter[0] = "")
                        if !self.placedLetter[0].isEmpty {self.chosenLetter = ""}
                }
                Text(self.placedLetter[1])
                    .modifier(CustomTextBorder())
                    .onTapGesture(count: 1) {
                        self.placedLetter[1].isEmpty ?  (self.placedLetter[1] = self.chosenLetter): (self.placedLetter[1] = "")
                        if !self.placedLetter[1].isEmpty {self.chosenLetter = ""}
                }
                Text(self.placedLetter[2])
                    .modifier(CustomTextBorder())
                    .onTapGesture(count: 1) {
                        self.placedLetter[2].isEmpty ?  (self.placedLetter[2] = self.chosenLetter): (self.placedLetter[2] = "")
                        if !self.placedLetter[2].isEmpty {self.chosenLetter = ""}
                }
            }
        }
    }
}

另一方面，请确保您在SO上发布的代码具有适当的缩进且没有多余的注释。它可以帮助读者轻松理解问题。

Answer 2

我希望这是回答您的问题的正确方法，因为代码太长，无法发表评论。

这是代码：

import SwiftUI

struct CustomTextBorder: ViewModifier {
    func body(content: Content) -> some View {
        return content
            .fixedSize()
            .frame(width: 16, height: 16)
            .font(Font.custom("Courier", size: 18))
            .padding(7)
            .overlay(
                RoundedRectangle(cornerRadius: 5)
                    .stroke(lineWidth: 2)
                    .foregroundColor(.blue)
        )
            .foregroundColor(.black)
    }
}

struct ContentView: View {
    @State private var chosenLetter = ""
    var rows = 3
    var columns = 3
    @State var dict: Dictionary<Int, Dictionary<Int, String>> = [:]
    
    var body: some View {
        VStack {
            ForEach(0..<rows, id: \.self) { row in
                HStack {
                    ForEach(0..<self.columns, id: \.self) { column in
                        Text(self.dict[row]?[column] ?? "")
                            .modifier(CustomTextBorder())
                            .onTapGesture(count: 1) {
                                if let outer = self.dict[row] {
                                    if let _ = outer[column] {
                                        self.dict[row]?[column] = self.chosenLetter
                                    }
                                } else {
                                    self.dict[row] = [column: self.chosenLetter]
                                }
                                self.chosenLetter = ""
                        }
                    }
                }
            }
            .padding(.bottom, 30)
            HStack {
                Text("a")
                    .modifier(CustomTextBorder())
                    .onTapGesture(count: 1) {
                        self.chosenLetter = "a"
                }
                Text("b")
                    .modifier(CustomTextBorder())
                    .onTapGesture(count: 1) {
                        self.chosenLetter = "b"
                }
                Text("c")
                    .modifier(CustomTextBorder())
                    .onTapGesture(count: 1) {
                        self.chosenLetter = "c"
                }
                Text("d")
                    .modifier(CustomTextBorder())
                    .onTapGesture(count: 1) {
                        self.chosenLetter = "d"
                }
                Text("e")
                    .modifier(CustomTextBorder())
                    .onTapGesture(count: 1) {
                        self.chosenLetter = "e"
                }
                Text("f")
                    .modifier(CustomTextBorder())
                    .onTapGesture(count: 1) {
                        self.chosenLetter = "f"
                }
                Text("g")
                    .modifier(CustomTextBorder())
                    .onTapGesture(count: 1) {
                        self.chosenLetter = "g"
                }
            }
        }
    }
}

以编程方式仅修改一个文本视图的内容

2 个答案: