如何让 TextEditor 看起来像 TextField - SwiftUI

Question

我正在寻找一种使 swiftUI TextEditor 看起来像 TextField 的方法。我需要多行输入，但我真的很喜欢圆形 TextFields 的外观。

这是我能得到的最接近的：

使用此代码：

TextEditor(text: $instanceNotes)
    .border(Color.gray)
    .foregroundColor(.secondary)
    .cornerRadius(3)
    .padding(.horizontal)
    .frame(height:100)

looks/acts 与 TextField 完全不同

这是我要复制的 TextField 的代码：

TextField("Name", text: $instanceName)
    .textFieldStyle(RoundedBorderTextFieldStyle())
    .padding(.horizontal)

谢谢！

Answer 1

这越来越近了（没有焦点支持，尽管可以添加）：

TextEditor(text: $textBinding)
    .padding(4)
    .overlay(RoundedRectangle(cornerRadius: 8)
        .stroke(Color.secondary).opacity(0.5))

我认为最重要的是确保边框实际上是圆形的——现在，你的边角被切断了。

Answer 2

当它像 TextField 一样聚焦时，我该如何更改它？

…
@State private var text: String = ""
@FocusState private var isFocused: Bool
…

…
TextEditor(text: $textBinding)
    .focused($isFocused)
    .padding(4)
    .overlay(RoundedRectangle(cornerRadius: 8)
        .stroke(isFocused ? Color.secondary : Color.clear).opacity(0.5))
…

显示文本编辑器更像文本字段accurately：

…
Text(text)
    .padding(.vertical, 10)                         //  If not text first line hides under TextField
    .padding(.horizontal, 5)                        //  If not TextField can be saw on the right side
    .frame(maxWidth: .infinity,                     //  Frame on the screen size
           minHeight: 40                            //  Initial size equivalent to one line
    )
    .overlay(
        TextEditor(text: $text)
            .focused($isFocused)
            .overlay(
                RoundedRectangle(cornerRadius: 8)
                    .stroke(isFocused ? Color.secondary : Color.clear).opacity(0.5)
            )
    )
…

如何让 TextEditor 看起来像 TextField - SwiftUI

How to make TextEditor look like TextField - SwiftUI

swift

swiftui

swiftui-texteditor

当它像 TextField 一样聚焦时，我该如何更改它？