如何使 TextEditor 看起来像 TextField - SwiftUI答案

【问题标题】：How to make TextEditor look like TextField - SwiftUI如何使 TextEditor 看起来像 TextField - SwiftUI
【发布时间】：2021-06-30 19:19:23
【问题描述】：

我正在寻找一种使 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)

谢谢！

【问题讨论】：

标签： swift swiftui swiftui-texteditor

【解决方案1】：

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

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

我认为最重要的事情是确保边框实际上是圆形的——现在，你的边框正在被切掉。

【讨论】：

看起来好多了，谢谢！它看起来仍然不太像 textField，TextField 的底部和顶部的线宽略有不同，但它比我想出的要好得多。当它像 TextField 一样聚焦时，我怎么能改变它？
可能取决于您的最小操作系统目标。见：swiftui-lab.com/working-with-focus-on-swiftui-views

【解决方案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))
…

显示一个TextEditor更多accurately就像一个TextField：

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

【讨论】：