如何在 SwiftUi 中创建多行 TextField？喜欢笔记应用程序？

Question

我想创建一个多行文本字段，它会自动添加换行符和滚动视图，就像笔记应用程序一样，我们可以在 SwiftUI 中使用任何直接方法吗？

Answer 1

这适用于 Xcode 版本 11.0 beta 6：

import SwiftUI

struct ContentView: View {
     @State var text = ""

       var body: some View {
        VStack {
            Text("text is: \(text)")
            TextView(
                text: $text
            )
                .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
        }

       }
}

struct TextView: UIViewRepresentable {
    @Binding var text: String

    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }

    func makeUIView(context: Context) -> UITextView {

        let myTextView = UITextView()
        myTextView.delegate = context.coordinator

        myTextView.font = UIFont(name: "HelveticaNeue", size: 15)
        myTextView.isScrollEnabled = true
        myTextView.isEditable = true
        myTextView.isUserInteractionEnabled = true
        myTextView.backgroundColor = UIColor(white: 0.0, alpha: 0.05)

        return myTextView
    }

    func updateUIView(_ uiView: UITextView, context: Context) {
        uiView.text = text
    }

    class Coordinator : NSObject, UITextViewDelegate {

        var parent: TextView

        init(_ uiTextView: TextView) {
            self.parent = uiTextView
        }

        func textView(_ textView: UITextView, shouldChangeTextIn range: NSRange, replacementText text: String) -> Bool {
            return true
        }

        func textViewDidChange(_ textView: UITextView) {
            print("text now: \(String(describing: textView.text!))")
            self.parent.text = textView.text
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Answer 2

您正在寻找的本质上是一个UITextView. SwiftUI 中当前没有等效的功能，因此您必须使用UIViewRepresentable结构来实现此目的。请参阅Apple 的 SwiftUI + UIKit 教程，了解如何包装 UIKit 视图和视图控制器以在 SwiftUI 中使用，并查看此问题以了解可能的实现（以及容易忽视的细节的解决方案。）