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

【问题标题】：How do you create a multi-line text inside a ScrollView in SwiftUI?如何在 SwiftUI 的 ScrollView 中创建多行文本？
【发布时间】：2019-10-28 19:02:00
【问题描述】：

由于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 中实现这一点？

【问题讨论】：

如果你给Text一个有宽度的框架会发生什么？
Text 按预期收缩到指定的宽度。但还是单行@Fogmeister
您可以根据宽度计算文本的高度。并将其设置为 TEXT 框架。它会正常工作
这是一个错误。有一个解决方法...icalvin.dev/post/403

标签： swift swiftui

【解决方案1】：

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

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，因为布局已正确定义。

【讨论】：

【解决方案2】：

在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)
        }
    }
}

【讨论】：

预览中不会出现错误，对吗？因为在预览中它确实显示了与以前相同的截断行为.. 但没有Spacer()它工作得很好..
太棒了！我正在使用几何阅读器.. 但太多了，太少了
从 beta 5 开始，.infinity 对我来说崩溃了，但 .frame(idealHeight: .greatestFiniteMagnitude) 有效。
我在滚动视图中有许多动态生成的视图，其中一些在各自的视图树下包含若干层的文本。不幸的是，这些解决方案都不起作用——我仍然看到一堆文本字段被压缩成一行。有没有人遇到过类似的问题？我在 Xcode 的 GM 版本中
为什么会这样？反过来说真假会更有意义，因为垂直高度应该是灵活的而不是固定的。

【解决方案3】：

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

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

感觉比修改框架好一点。

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

SwiftUI 中似乎存在错误。现在你必须为你的 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)
       }

【讨论】：