使用 SwiftUI 展开/折叠文本

Question

我有一个像这样的 SwiftUI 视图：

var body: some View {
    
    VStack(alignment: .leading) {
        
        Text(message)
            .font(.light16)
            .foregroundColor(.black)
            .multilineTextAlignment(.leading)
            .padding(.bottom, 8)

        ...

    }
}

此消息有时可能非常大。 我希望在这种情况下，当文本组件高于 200 像素（例如）时，会出现一个展开/折叠按钮，因此用户可以阅读较短版本的消息（200 像素）或完整的消息（其全高）。 像这样的东西：

var body: some View {

  VStack(alignment: .leading) {

    Text(message)
        .font(.light16)
        .foregroundColor(.black)
        .multilineTextAlignment(.leading)
        .padding(.bottom, 8)

    Button {
                self.isCollapsed = !self.isCollapsed
                // expand or collapse the Text
            } label: {
                let title = self.isCollapsed ? "expand text" : "collapse text"
                Text(title)
                    .font(.bold14)
                    .foregroundColor(Color.blue)
                    .multilineTextAlignment(.leading)
                    .padding(.bottom, 8)
            }

     }

     ...
 }

我在其他场合使用过 GeometryReader 和代理，但我不知道如何在这种情况下使用它。 我怎么能得到这个功能？

Answer 1

你想要的是这样的吗？

struct TestView: View {
@State var isCollapsed = true

var body: some View {

    VStack(alignment: .leading) {

        ScrollView(.vertical, showsIndicators: true) {
            Text("Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum")
                .font(.title3)
                .foregroundColor(.black)
                .multilineTextAlignment(.leading)
                .padding(.bottom, 8)
        }
        .frame(height: isCollapsed ? 200 : 500, alignment: .leading)

        Button {
            self.isCollapsed = !self.isCollapsed
        } label: {
            let title = self.isCollapsed ? "expand text" : "collapse text"
            Text(title)
                .font(.callout)
                .foregroundColor(Color.blue)
                .multilineTextAlignment(.leading)
                .padding(.bottom, 8)
        }

        Spacer()

    }

}

}