SwiftUI中如何实现可点击编辑的文本选项卡功能

要实现点击列表项单独编辑文本的功能，核心是把原来的字符串数组改成可绑定的结构体数组，这样才能对单个项的内容进行修改。以下是修改后的完整代码：

import SwiftUI

// 定义可识别的结构体，用于存储旅行地点，方便列表绑定和编辑
struct LandingItem: Identifiable {
    let id = UUID()
    var name: String
}

struct LandingView: View {
    @State private var newLandingName: String = ""
    @State private var isAddingLanding = false
    @State private var landings: [LandingItem] = []
    // 存储当前选中要编辑的地点项
    @State private var selectedLanding: LandingItem?
    @State private var isEditingLanding = false

    var body: some View {
        NavigationView {
            ZStack {
                Color.blue.ignoresSafeArea()
                Circle()
                    .scale(1.7)
                    .foregroundColor(.yellow.opacity(0.60))
                Circle()
                    .scale(1.3)
                    .foregroundColor(.blue.opacity(0.50))

                VStack {
                    HStack {
                        Text("Add Your Travels")
                            .bold()
                        Spacer()
                        Button(action: {
                            isAddingLanding = true
                        }) {
                            Image(systemName: "plus")
                                .resizable()
                                .frame(width: 20, height: 20)
                                .foregroundColor(.white)
                        }
                    }
                    .padding(.horizontal)

                    List(landings) { landing in
                        // 将列表项改为可点击按钮，触发编辑流程
                        Button(action: {
                            selectedLanding = landing
                            isEditingLanding = true
                        }) {
                            Text(landing.name).bold()
                                .foregroundColor(.white)
                        }
                        .listRowBackground(Color.clear)
                        .listRowSeparatorTint(.blue)
                    }
                    .listStyle(.plain)
                }
            }
            .navigationBarTitle(Text("Landings!"))
            // 添加地点的全屏弹窗
            .fullScreenCover(isPresented: $isAddingLanding) {
                VStack {
                    TextField("输入旅行地点", text: $newLandingName)
                        .textFieldStyle(RoundedBorderTextFieldStyle())
                        .padding()
                    Button("添加") {
                        if !newLandingName.isEmpty {
                            landings.append(LandingItem(name: newLandingName))
                            newLandingName = ""
                        }
                        isAddingLanding = false
                    }
                    Color.blue.ignoresSafeArea()
                }
            }
            // 编辑地点的全屏弹窗
            .fullScreenCover(isPresented: $isEditingLanding) {
                if let bindingLanding = $landings.first(where: { $0.id == selectedLanding?.id }) {
                    VStack {
                        TextField("修改旅行地点", text: bindingLanding.name)
                            .textFieldStyle(RoundedBorderTextFieldStyle())
                            .padding()
                        Button("保存") {
                            isEditingLanding = false
                            selectedLanding = nil
                        }
                        Color.blue.ignoresSafeArea()
                    }
                }
            }
        }
    }
}

关键修改说明 #

• 定义LandingItem结构体：通过Identifiable协议自动生成唯一ID，方便列表识别和定位对应项，同时name属性为可变类型，支持编辑操作。
• 替换数组类型：将原有的[String]改为[LandingItem]，让每个列表项都能通过绑定修改内部属性。
• 列表项改为可点击按钮：点击列表项时记录选中的地点，并触发编辑弹窗。
• 编辑弹窗绑定选中项：通过$landings.first(where:)找到对应项的绑定，直接修改name属性，保存后关闭弹窗完成编辑。

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