如何在 SwiftUI 的 ScrollView 中创建多行文本？

Question

由于目前 List 看起来不可配置以删除行分隔符，因此我使用 ScrollView 和其中的 VStack 创建垂直文本元素的布局。下面的示例：

ScrollView {
    VStack {
        // ...
        Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mattis ullamcorper tortor, nec finibus sapien imperdiet non. Duis tristique eros eget ex consectetur laoreet.")
            .lineLimit(0)
    }.frame(width: UIScreen.main.bounds.width)
}

生成的 Text 呈现为截断的单行。在 ScrollView 之外，它呈现为多行。除了明确设置 Text 框架的高度外，我如何在 ScrollView 内实现此目的？

Answer 1

在Xcode 11 GM:

对于嵌套在滚动视图中的堆栈中的任何 Text 视图， 使用 .fixedSize(horizontal: false, vertical: true) 解决方法：

ScrollView {
    VStack {
        Text(someString)
            .fixedSize(horizontal: false, vertical: true)
    }
}

如果有多个多行文本，这也有效：

ScrollView {
    VStack {
        Text(someString)
            .fixedSize(horizontal: false, vertical: true)
        Text(anotherLongString)
            .fixedSize(horizontal: false, vertical: true)
    }
}

如果堆栈的内容是动态的，同样的解决方案也有效：

ScrollView {
    VStack {
        // Place a single empty / "" at the top of your stack.
        // It will consume no vertical space.
        Text("")
            .fixedSize(horizontal: false, vertical: true)

        ForEach(someArray) { someString in
            Text(someString)
              .fixedSize(horizontal: false, vertical: true)
        }
    }
}

Answer 2

SwiftUI 好像有bug。现在你必须为你的 VStack 容器指定高度

ScrollView {
      VStack {
           // ...
               Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mattis ullamcorper tortor, nec finibus sapien imperdiet non. Duis tristique eros eget ex consectetur laoreet.")
                    .lineLimit(nil)
            }.frame(width: UIScreen.main.bounds.width, height: 500)
       }

Answer 3

以下适用于 Beta 3 - 无间隔，无宽度限制，灵活的高度限制：

ScrollView {
    VStack {
        Text(longText)
            .lineLimit(nil)
            .font(.largeTitle)
            .frame(idealHeight: .infinity)
    }
}

Answer 4

您可以强制视图填充其理想大小，例如在垂直滚动视图中：

ScrollView {
    Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mattis ullamcorper tortor, nec finibus sapien imperdiet non. Duis tristique eros eget ex consectetur laoreet.")
        .fixedSize(horizontal: false, vertical: true)
}

感觉比修改框架好一点

Answer 5

正确的解决方案是确保为您的堆栈设置对齐方式：

VStack(alignment: .leading)

ScrollView {
    VStack(alignment: .leading) {
        // ...
        Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mattis ullamcorper tortor, nec finibus sapien imperdiet non. Duis tristique eros eget ex consectetur laoreet.")
            .lineLimit(0)
    }.frame(width: UIScreen.main.bounds.width)
}

这样您就不需要 fixedSize，因为布局已正确定义。

如何在 SwiftUI 的 ScrollView 中创建多行文本？

How do you create a multi-line text inside a ScrollView in SwiftUI?

swift

swiftui