Программное изменение содержимого только одного текстового представления

Question

У меня есть строка из 7 текстовых представлений от a до g. Над ними 2 пустых текстовых окна. Я нажимаю на одну из семи букв, а затем на одну из двух пустых. В настоящее время нажатая буква отображается в обоих текстовых представлениях в приведенной выше строке.

Я бы хотел, чтобы выбранная буква отображалась только в текстовом представлении, которое я нажимаю, а не в обоих. В итоге у меня будет несколько рядов пустых представлений, и мне нужно только по одному, чтобы отреагировать на изменение.

Спасибо за вашу помощь.

Вот код, который я использую:

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

Надеюсь, это правильный способ ответа на ваш вопрос Ишмит, код был слишком длинным для комментария.

Вот код:

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"
                }
            }
        }
    }
}

Answer 2

ОБНОВЛЕНИЕ: вы можете использовать словарь, который управляет строками и столбцами.

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 текстовыми полями для достижения этого. Вы должны использовать либо несколько строковых объектов, либо массив строк. Вот минимальный пример того, как этого можно добиться с помощью массива строк. Возможно, вы захотите сделать его более динамичным c, чтобы индексы массива не были c.

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, имеет правильный отступ и не содержит нежелательных комментариев . Это помогает читателю легко понять вопрос.