如何在 SwiftUI 中为文本字段制作“编辑”按钮？

Question

我有一些已经完成的文本字段，我想添加一些“编辑”按钮，这些按钮将向我按下的按钮显示键盘。以下是其中一个文本字段的代码：

Image(colorScheme == .light ? "user" : "userDark").resizable().frame(width: 30, height: 30)
TextField("Name", text: $name).textFieldStyle(PlainTextFieldStyle()).padding(.leading, 5).font(.system(size: 20))
    .autocapitalization(.words)
    .disableAutocorrection(true)
if name != localName {
    Button(action: {
            self.name = ""
    }) {
        Text("Update").font(.system(size: 15)).fontWeight(.light)
            .foregroundColor(colorScheme == .light ? Color.black : Color.white)
    }
} else if name == localName {
    Text("Edit").font(.system(size: 15)).fontWeight(.light)
        .foregroundColor(colorScheme == .light ? Color.black : Color.white)
}

文本字段如下所示：

Answer 1

如果您想为每个不同的属性启用自定义编辑模式，这非常简单。在这里，我仅为名称字段创建自定义编辑模式，您只需为其他字段创建编辑模式，例如您在上图中提供的联系号码。首先为每个字段创建一个 editMode 属性，例如：

@State var nameInEditMode = false
@State var name = "Mr. Foo Bar"

那么你的每个字段应该如下所示：

    HStack {
        Image(systemName: "person.circle").resizable().frame(width: 30, height: 30)

        if nameInEditMode {
            TextField("Name", text: $name).textFieldStyle(RoundedBorderTextFieldStyle()).padding(.leading, 5).font(.system(size: 20))
            .autocapitalization(.words)
            .disableAutocorrection(true)
        } else {
            Text(name).font(.system(size: 20))
        }

        Button(action: {
            self.nameInEditMode.toggle()
        }) {
            Text(nameInEditMode ? "Done" : "Edit").font(.system(size: 20)).fontWeight(.light)
                .foregroundColor(Color.blue)
        }
    }

为了测试，只需复制、粘贴并运行上面的代码，然后就会发现它是惊人的。