如何在不可编辑的 SwiftUI TextField 上启用滚动？

Question

我想在我的多平台 SwiftUI 应用程序中拥有一个可滚动和可选择但不可编辑的多行 TextField。这在 UIKit/AppKit 中很容易做到，但在 SwiftUI 中就不那么容易了。

如果我禁用文本字段，它也会禁用滚动和选择。对于 MacOS，它还会使文本变灰并且很难阅读。

TextFields 不应该像 UITextFields 一样有一个可编辑属性吗？ （我有一段时间没有使用 AppKit，不记得那里的具体设置，但请记住有一个。）

下面是多平台 SwiftUI 应用程序的一些示例代码，其中文本字段要么可滚动且可编辑，要么既不可滚动又不可编辑：

import SwiftUI

struct ContentView: View {
    
    @State var text: String = """
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Odio eu feugiat pretium nibh ipsum. Nunc consequat interdum varius sit. Suspendisse ultrices gravida dictum fusce ut placerat orci nulla pellentesque. Risus viverra adipiscing at in tellus. Tellus integer feugiat scelerisque varius morbi enim nunc faucibus a. At quis risus sed vulputate. Nulla facilisi etiam dignissim diam quis enim lobortis. Facilisi cras fermentum odio eu feugiat pretium nibh ipsum. Sed velit dignissim sodales ut eu sem integer vitae. Nam at lectus urna duis convallis convallis tellus id. Blandit turpis cursus in hac. Et sollicitudin ac orci phasellus egestas tellus rutrum tellus. Feugiat in ante metus dictum at tempor commodo ullamcorper a.

Sapien eget mi proin sed libero enim sed faucibus turpis. Eu sem integer vitae justo eget magna fermentum iaculis. Ut lectus arcu bibendum at varius vel pharetra vel. Nisl rhoncus mattis rhoncus urna. Sem integer vitae justo eget magna fermentum iaculis. Tortor consequat id porta nibh. Arcu bibendum at varius vel pharetra vel. Varius duis at consectetur lorem donec massa. Mi proin sed libero enim sed faucibus turpis in eu. Laoreet suspendisse interdum consectetur libero id faucibus. Aliquam ut porttitor leo a diam sollicitudin tempor. Morbi enim nunc faucibus a. Posuere sollicitudin aliquam ultrices sagittis orci a scelerisque purus. Feugiat vivamus at augue eget. Feugiat in ante metus dictum at tempor commodo. Eu nisl nunc mi ipsum. Habitasse platea dictumst quisque sagittis. Mattis pellentesque id nibh tortor id. Eu feugiat pretium nibh ipsum consequat nisl vel pretium. Libero enim sed faucibus turpis.

Felis donec et odio pellentesque diam volutpat commodo sed egestas. Lectus quam id leo in vitae turpis massa sed elementum. Eleifend quam adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus. Donec adipiscing tristique risus nec feugiat in. Et pharetra pharetra massa massa. Vitae aliquet nec ullamcorper sit amet risus. Aliquam nulla facilisi cras fermentum odio eu feugiat pretium nibh. Vitae et leo duis ut diam. Eget nullam non nisi est sit amet. In arcu cursus euismod quis viverra nibh cras pulvinar mattis. Lobortis feugiat vivamus at augue. Nec tincidunt praesent semper feugiat nibh sed pulvinar proin. Nisl condimentum id venenatis a condimentum vitae. Ut tellus elementum sagittis vitae et leo duis ut.

Purus gravida quis blandit turpis cursus. Blandit cursus risus at ultrices mi tempus. Amet venenatis urna cursus eget nunc scelerisque viverra mauris in. Mauris sit amet massa vitae tortor condimentum. Mauris ultrices eros in cursus turpis massa. Facilisis leo vel fringilla est ullamcorper. At varius vel pharetra vel turpis. Arcu cursus euismod quis viverra nibh cras pulvinar mattis. A iaculis at erat pellentesque. Velit aliquet sagittis id consectetur purus.
"""
    var body: some View {
        VStack {
            TextField("", text: $text, axis: .vertical)
                .disableAutocorrection(true)
                .lineLimit(20)
                .disabled(/*@START_MENU_TOKEN@*/true/*@END_MENU_TOKEN@*/) // This line prevents scrolling
                .multilineTextAlignment(.leading)
                .padding(.all, 2)
                .frame(minWidth: 200, minHeight: 30)
                .padding()
#if os(iOS) //For iPhone/iPad
                .border(.gray)
#endif
        }
    }
}

#Preview {
    ContentView()
}

Answer 1

所以我不认为你可以拥有一个可选择和可滚动但不可编辑的 SwiftUI TextField。 （至少我没能成功。）

正确的答案是将

Text

View

放入

ScrollView

内，并给

ScrollView

一个边框。像这样的东西：

ScrollView() {
    Text(userSettings.wordList)
        .lineLimit(nil)
        .multilineTextAlignment(.leading)
        .padding(.all, 2)
        .frame(minWidth: 200, minHeight: 200)
}
.border(.gray)