如何使用 SwiftUI 获取 ScrollView 的动态文本高度

Question

这给了我正确的动态文本高度

import SwiftUI
struct ContentView : View {
    var body: some View {
        List {
            Text("This is some very long text can we can see scrolls past two lines ").lineLimit(nil)   
        }
    }
}

#if DEBUG
struct ContentView_Previews : PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
#endif

但以下内容会截断文本。如何通过以下方式获得动态高度？

import SwiftUI
struct ContentView : View {
    var body: some View {
        GeometryReader { reader in
            ScrollView {
                Text("This is some very long text can we can see scrolls past two lines ")
                    .lineLimit(nil)
                    .frame(width: reader.size.width)
            }
        }
    }
}
#if DEBUG
struct ContentView_Previews : PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
#endif

Answer 1

您需要使用fixedSize 修饰符来防止截断。在你的情况下是这样的：

Text("This is some very long text can we can see scrolls past two lines ")
 .lineLimit(nil)
 .fixedSize(horizontal: false, vertical: true) //** It keeps 'width size' and expands 'height size'
 .frame(width: reader.size.width)

Answer 2

import SwiftUI

struct ContentView : View {

    let veryLongText = "Very long text..."
    let fontName = "System Font"
    let fontSize: Length = 12

    var body: some View {
        GeometryReader { geometry in
            ScrollView {
                Text(veryLongText)
                    .lineLimit(nil)
                    .font(.custom(fontName, size: fontSize))
                    .frame(width: geometry.size.width, height: veryLongText.textHeightFrom(width: geometry.size.width, fontName: fontName, fontSize: fontSize))
            }
        }
        .padding(.horizontal, 0.5 * fontSize)
    }
}

extension String {

    func textHeightFrom(width: CGFloat, fontName: String = "System Font", fontSize: CGFloat = .systemFontSize) -> CGFloat {

        #if os(macOS) 

        typealias UXFont = NSFont
        let text: NSTextField = .init(string: self)
        text.font = NSFont.init(name: fontName, size: fontSize)

        #else

        typealias UXFont = UIFont
        let text: UILabel = .init()
        text.text = self
        text.numberOfLines = 0

        #endif

        text.font = UXFont.init(name: fontName, size: fontSize)
        text.lineBreakMode = .byWordWrapping
        return text.sizeThatFits(CGSize.init(width: width, height: .infinity)).height
    }
}

Answer 3

可能是ScrollView 错误。老实说，我不确定为什么您的代码不起作用，但是您可以使用以下方法获得所需的结果：

struct ContentView : View {
    var body: some View {
        GeometryReader { reader in
            ScrollView(alwaysBounceVertical: true) {
                ZStack(alignment: .top) {
                    Color.clear.edgesIgnoringSafeArea(.all)
                    Text("This is some very long text can we can see scrolls past two lines ")
                        .lineLimit(nil)
                }.frame(width: reader.size.width, height: reader.size.height)
            }
        }
    }
}

我在滚动视图中添加了alwaysBounceVertical，这样您就可以看到视图滚动了。不过没必要。

Answer 4

在我看来，这是一个错误，因为我找不到其行为的基本原理。

让我解释一下：

如果您没有 ScrollView，我们知道将 Text 视图的宽度强制为特定宽度并使用 lineLimit(nil) 将使文本视图垂直扩展以容纳文本。相反，如果您有 lineLimit(1)，则省略号将显示以截断视图的内容。

现在，如果我们在 ScrollView 中有 Text()，并且我们将宽度强制为特定大小并设置 lineLimit(nil)，则有两种可接受的结果：

1. 文本视图遵循新宽度并垂直扩展。
2. 文本视图不考虑宽度，但允许您水平滚动。这根本不是一个好的选择，但它可能是由谁开发框架做出的决定。

然而，实际发生的是，文本视图尊重新的宽度大小（如省略号所示），但尽管有 lineLimit(nil)，但它不会垂直扩展。没有理由这样做，因为这种行为已经可以通过使用 lineLimit(1) 来实现。这就是为什么我认为这绝对是一个错误。

您应该向 Apple 提交错误报告。

Answer 5

这似乎已在 iOS 15.0 中得到解决。 但是如果你想在 iOS 14 上支持用户，那么你可以添加一个 hack 视图修饰符

@available(iOS 14.0, *)
fileprivate struct LineLimitHackForiOS14: ViewModifier {

    func body(content: Content) -> some View {
        if #available(iOS 15.0, *) {
            return AnyView(content)
        }
        return AnyView(content.fixedSize(horizontal: false, vertical: true))
    }
}

@available(iOS 14.0, *)
extension View {
    fileprivate func applyHackToPreventTextTruncationInScrollViews() -> some View {
        self.lineLimit(nil).modifier(LineLimitHackForiOS14())
    }
}

代码可以用作的地方

Text(self.text).applyHackToPreventTextTruncationInScrollViews()