如何在 SwiftUI 中的文本末尾实现“阅读更多”样式按钮

Posted 2023-02-24

【中文标题】如何在 SwiftUI 中的文本末尾实现“阅读更多”样式按钮

【英文标题】：How to implement a "read more" style button at the end of a text in SwiftUI

【发布时间】：2020-09-04 12:46:12

【问题描述】：

我有一个很长的文本，我想只显示 3 行带有 more 按钮，就像图片一样，并且在文本展开时还显示一个 less 按钮。关于如何使用 swiftUI 的任何想法 [1]：https://i.stack.imgur.com/uSkU2.png

var body: some View
    VStack
        Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")
    

【问题讨论】：

请查看更新

您是否考虑在应用于您的Text 视图的.overlay 视图修饰符中使用Button？

你能用代码给我看吗？

【参考方案1】：

这个答案有点 hack，因为它不会截断实际的字符串并应用“...”后缀，在我看来，这将是更好的工程解决方案。这将要求程序员确定适合三行的字符串的长度，删除最后两个单词（以允许更多/更少按钮）并应用“...”后缀。

此解决方案限制了显示的行数，并从字面上用白色背景和按钮覆盖了第三行的尾端。但它可能适合你的情况......

@State private var isExpanded: Bool = false

var body: some View
    
    VStack

        Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")
            .lineLimit(isExpanded ? nil : 3)
            .overlay(
                GeometryReader  proxy in
                    Button(action: 
                        isExpanded.toggle()
                    ) 
                        Text(isExpanded ? "Less" : "More")
                            .font(.caption).bold()
                            .padding(.leading, 8.0)
                            .padding(.top, 4.0)
                            .background(Color.white)
                    
                    .frame(width: proxy.size.width, height: proxy.size.height, alignment: .bottomTrailing)
                
            )
    

您可以按照 Apple 的“Introducing SwiftUI”教程学习如何执行此操作。特别是“创建 macOS 应用”教程，“Section 9 Build the Detail View”。

【讨论】：

感谢您的快速回复。实际上它有效，但如果我让文本更长一点，它不会显示完整的文本

当我将 fixedSize 添加到 Text("") 时，整个文本会出现但不会滚动。似乎有人阻止它向上或向下滚动

根据您使用的软件，您在尝试使用 .fixedSize 修饰符时可能会遇到问题 - 它无法按预期运行。通过提交反馈让 Apple 知道。