swift - 如何使 TextEditor 看起来像 TextField - SwiftUI

Question

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

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

使用此代码：

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

它看起来/行为与 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))
…

像 TextField 一样更准确地显示 TextEditor ：

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