SwiftUI: How can I limit a string to be displayed as one line, and support automatic scaling to a specified ratio, sliding to view the full text

huangapple go评论81阅读模式
英文:

SwiftUI: How can I limit a string to be displayed as one line, and support automatic scaling to a specified ratio, sliding to view the full text

问题

I will only provide the translation of the requested content without additional information:

如何将字符串限制为一行显示,并支持自动缩放到指定比例,以及在SwiftUI中支持滑动以查看完整文本而不被截断。

问题

(1). minimumScaleFactor(0.3) // 不起作用

(2) 文本被截断 // 希望不被截断

这是代码


import SwiftUI

struct ContentView: View {

@State private var text = "在SwiftUI的滚动视图中,我有一个非常长的字符串,它被限制为一行,并自动缩放到指定的比例,可以滑动以显示完整内容,而不会被截断"

var body: some View {
    VStack {
        ScrollView(.horizontal){
            Text(text)
                .font(.system(size: 80))
                .lineLimit(1)
                .minimumScaleFactor(0.3)
        }
        Text("这是另一个文本")
    }
}

}


模拟器图片

在SwiftUI中,将字符串显示为一行,并支持自动缩放到指定比例,并支持滑动查看完整文本而不被截断。

英文:

How can I limit a string to be displayed as one line, and support automatic scaling to a specified ratio, and support sliding to view the full text without being truncated in SwiftUI

problem

(1).minimumScaleFactor(0.3) // doesn't work

(2)text is being truncated // hope it won't be truncated

Here is the code


import SwiftUI

struct ContentView: View {

@State private var text = "In the scrollview of SwiftUI, I have a very long string, which is limited to one line, and automatically scaled to the specified ratio, and can slide to display the full content without being truncated"

var body: some View {
    VStack {
        ScrollView(.horizontal){
            Text(text)
                .font(.system(size: 80))
                .lineLimit(1)
                .minimumScaleFactor(0.3)
        }
        Text("this is another text")
    }
}

}


simulator image

The string to be displayed as one line, and support automatic scaling to a specified ratio, and support sliding to view the full text without being truncated in SwiftUI.

答案1

得分: -1

以下是您要翻译的内容:

"如果我理解正确...

  • 您希望文本在可用空间中尽可能大
  • 一旦可用空间不足以容纳所有文本,字体大小就应该开始缩小,以使其尽可能适应可用空间
  • 一旦达到最小大小,应该可以滚动文本以查看行的其余部分,而不会被截断。

您在示例中遇到的问题是ScrollView禁用了缩放。

您可以让SwiftUI尽量将文本适应可用空间,而不使用ScrollView,但然后在其上叠加一个ScrollView以克服截断(如果需要截断)。叠加的部分受基础视图的高度限制,因此字体被迫缩小。通过为叠加部分应用背景,遮挡了(截断的)基础视图。

这是代码(已添加注释):

    @State private var text = "在SwiftUI的滚动视图中,我有一个非常长的字符串,限制为一行,并自动缩放到指定的比例,可以滑动以显示完整内容,而不被截断"

    private func formattedText(key: String) -> some View {
        Text(LocalizedStringKey(key))
            .font(.system(size: 80))
            .lineLimit(1)
            .minimumScaleFactor(0.3)
    }

    private func textLine(_ key: String) -> some View {

        // 尽量在可用空间中显示文本。如果文本很长且无法进一步缩放,文本将被截断
        formattedText(key: key)
            .overlay(

                // 再次显示文本,但这次放在ScrollView中。这将克服之前可能发生的任何截断。高度受基础视图的限制,因此字体将缩小到相同的大小
                ScrollView(.horizontal) {
                    formattedText(key: key)
                }
                // 遮挡基础视图
                .background(Color(UIColor.systemBackground))
            )
    }

    var body: some View {
        VStack(alignment: .leading) {
            textLine(text)
            textLine("这是另一段文本")
        }
    }

SwiftUI: How can I limit a string to be displayed as one line, and support automatic scaling to a specified ratio, sliding to view the full text


<details>
<summary>英文:</summary>

So if I understand correctly...
- you would like the text to be displayed as large as possible in the space available
- as soon as there is too much text for the space available, the font size should begin to shrink so that it still fits into the space available if possible
- once it has reached minimum size, it should be possible to scroll the text in order to see the rest of the line, without it being truncated.

The problem you were having in your example is that the ```ScrollView``` disables the scaling.

What you can do is let SwiftUI fit the text into the space available as best as possible without a ```ScrollView```, but then overlay this with a ```ScrollView``` to overcome the truncation (in case truncation is necessary). The overlay is constrained by the height of the base view, so the font is forced to shrink. The (truncated) base view is masked out by applying a background to the overlay.

Here you go _(EDIT: comments added to code)_:
```swift
    @State private var text = &quot;In the scrollview of SwiftUI, I have a very long string, which is limited to one line, and automatically scaled to the specified ratio, and can slide to display the full content without being truncated&quot;

    private func formattedText(key: String) -&gt; some View {
        Text(LocalizedStringKey(key))
            .font(.system(size: 80))
            .lineLimit(1)
            .minimumScaleFactor(0.3)
    }

    private func textLine(_ key: String) -&gt; some View {

        // Show the text as best as possible in the space
        // available. The text will be truncated if it is
        // very long and cannot be scaled any further
        formattedText(key: key)
            .overlay(

                // Show the text again, but this time inside a
                // ScrollView. This will overcome any truncation
                // that might have occurred before. The height
                // is constrained by the base view, so this will
                // force the font to shrink to the same size
                ScrollView(.horizontal) {
                    formattedText(key: key)
                }
                // Mask out the base view
                .background(Color(UIColor.systemBackground))
            )
    }

    var body: some View {
        VStack(alignment: .leading) {
            textLine(text)
            textLine(&quot;this is another text&quot;)
        }
    }

SwiftUI: How can I limit a string to be displayed as one line, and support automatic scaling to a specified ratio, sliding to view the full text

huangapple
  • 本文由 发表于 2023年6月15日 11:43:10
  • 转载请务必保留本文链接:https://go.coder-hub.com/76478952.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定