如何在SwiftUI的文本结尾处实现“更多”样式按钮

问题描述

我的文本很长，我只想用更多按钮仅显示3行，就像图片一样，在文本展开时也要显示较少的按钮。关于如何使用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,sunt in culpa qui officia deserunt mollit anim id est laborum.")
    }
}

解决方法

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

此解决方案限制了显示的行数，并用白色背景和按钮覆盖了第三行的结尾。但这可能适合您的情况...

@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,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”。