swift - 删除 TextEditor 上的填充

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) 它具有相同的填充对齐方式。现在 TextEditor 有一个奇怪的填充。

Answer 1

尝试将 Text 和 TextEditor(或 TextField，就此而言)对齐，您会发疯的，所以不要试试看使用另一个禁用的 TextEditor，并根据绑定(bind)变量是否为空来控制顶部的 .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)
        }
    }
}

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

编辑:

您不需要其他 View 中的按钮等。它变得简单:

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