0

I have a SwiftUI view like this:

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

        ...

    }
}

This message sometimes can be very large. I would like that in that cases, when the Text component is higher than 200px (for example), a expand/collapse button appears, so the user can read a shorter version of the message (200px) or the full message (its full height). Something like this:

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)
            }

     }

     ...
 }

I've used GeometryReader and proxy in other occasions but I don't know how to use it for this case. How could I get this functionality?

Wonton
  • 1,033
  • 16
  • 33
  • This Stack overflow answer has solved my problem: [SwiftUI - how know number of lines in Text?](https://stackoverflow.com/a/63102244/1639825) – Wonton Sep 16 '22 at 16:03

1 Answers1

0

what you would like is something like that ?

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()

    }

}

}

erkutbas
  • 305
  • 2
  • 9
  • It's a good aproach but my real problem is that I don't want the expand/collapse button appears if the description is short from the begining. That's the reason I was using (without success) the GeometryReader component. – Wonton Sep 16 '22 at 10:56
  • then this could help you :) https://stackoverflow.com/questions/64452647/how-we-can-get-and-read-size-of-a-text-with-geometryreader-in-swiftui – erkutbas Sep 16 '22 at 22:12