删除文本编辑器上的填充

Question

下面是我的自定义文本编辑器，一旦您单击笔进行编辑，就会出现一个新空间，因此之前的文本与新文本不在同一行。我怎样才能解决这个问题？这是一个简单的可重现示例：

struct SwiftUIView: View {
    
    @State var name: String = "test"
    @State var showEdit: Bool = true
    
    var body: some View {
        HStack {
            HStack {
                if(showEdit) {
                    CustomTextEditor.init(placeholder: "My unique name", text: $name)
                        .font(.headline)
                } else {
                    Text(name)
                        .font(.headline)
                }
            }
            
            Spacer()
            
            Button(action: {
                showEdit.toggle()
            }) {
                Image(systemName: "pencil")
                    .foregroundColor(.secondary)
            }
        }
    }
}

struct CustomTextEditor: View {
    let placeholder: String
    
    @Binding var text: String
    
    var body: some View {
        ZStack {
            if text.isEmpty  {
                Text(placeholder)
                    .foregroundColor(Color.primary.opacity(0.25))
            }
            TextEditor(text: $text)
        }.onAppear() {
            UITextView.appearance().backgroundColor = .clear
        }.onDisappear() {
            UITextView.appearance().backgroundColor = nil
        }
    }
}

我希望它具有与插入简单的相同的填充属性，Text("")因此当我在两者之间切换时Text("xyz")，TextEditor(text: $xyz)它具有相同的填充对齐方式。现在文本编辑器有一个奇怪的填充。

Answer 1

Text尝试将 a和 a TextEditor（或 a TextField，就此而言）对齐会让自己发疯，所以不要尝试。使用另一个已禁用的变量TextEditor，并.opacity()根据绑定变量是否为空来控制顶部的变量。像这样：

struct CustomTextEditor: View {
    
    @Binding var text: String
    @State private var placeholder: String

    init(placeholder: String, text: Binding<String>) {
        _text = text
        _placeholder = State(initialValue: placeholder)
    }
    
    var body: some View {
        ZStack {
            TextEditor(text: $placeholder)
                .disabled(true)
            TextEditor(text: $text)
                .opacity(text == "" ? 0.7 : 1)
        }
    }
}

如果没有文本，此视图将显示占位符，并在有文本时隐藏占位符。

编辑：

您不需要在其他视图中使用按钮等。它变得简单：

struct SwiftUIView: View {
    @State var name: String = ""
    
    var body: some View {
        CustomTextEditor.init(placeholder: "My unique name", text: $name)
            .font(.headline)
            .padding()
    }
}

如果您需要键盘上的“完成”按钮，请将其更改CustomTextEditor()为：

struct CustomTextEditor: View {
    
    @Binding var text: String
    @State private var placeholder: String

    @FocusState var isFocused: Bool
    
    init(placeholder: String, text: Binding<String>) {
        _text = text
        _placeholder = State(initialValue: placeholder)
    }
    
    var body: some View {
        ZStack {
            TextEditor(text: $placeholder)
                .disabled(true)
            TextEditor(text: $text)
                .opacity(text == "" ? 0.7 : 1)
                .focused($isFocused)
        }
        .toolbar {
            ToolbarItemGroup(placement: .keyboard) {
                Button {
                    isFocused = false
                } label: {
                    Text("Done")
                        .foregroundColor(.accentColor)
                        .padding(.trailing)
                }
            }
        }
    }
}