SwiftUI - Change layout of card based on height of Text view

Question

Based on the height of a Text-view, the Card is supposed to either show the complete text (if the input text is short) or display parts of the text and a "Continue reading"-button, which navigates to a Detail-view.

Unfortunately, the GeometryReader doesn't update it's height after the Text-view is rendered (or it does, but the Card-view is not rendered again). OnAppear the geo.size.height is 10, therefore the "Continue reading" code is never executed.

Code:

struct CardView: View {
    
    var title: String = "Title"
    var text: String = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
    
    var body: some View {
        ScrollView { // will be embedded in one on its parentView
        GeometryReader { geo in
            VStack {
                Text(title)
                    .font(.title2)
                Divider()
                    .padding(.top, -4)
                if geo.size.height >= 420 {
                    VStack {
                        Text(text)
                            .frame(height: 340)
                        Divider()
                            .padding(.top, -4)
                        Button(action: {
                            //button for  testing, NavigationLink later
                        }, label: {
                            HStack {
                                Text("Continue reading")
                                Spacer()
                                Image(systemName: "chevron.right")
                            }
                            .padding(.top, -16)
                            .frame(height: 44)
                            .contentShape(Rectangle())
                        })
                        .buttonStyle(PlainButtonStyle())
                    }
                } else {
                    Text(text)
                        .padding(.bottom, 8)
                        .fixedSize(horizontal: false, vertical: true)
                }
            }
            .cornerRadius(10)
            .padding(.horizontal)
            .padding(.top)
            .overlay( RoundedRectangle(cornerRadius: 10)
                        .stroke(Color.gray, lineWidth: 1))
            .padding()
            .onAppear{
                print(geo.size.height)
            }
        }
        }
    }
}

struct CardView_Previews: PreviewProvider {
    static var previews: some View {
        CardView()
    }
}

score 0 · Accepted Answer · answered Jun 03 '21 at 14:43

Adding a GeometryGetter to the .background{} of the Card-view did the trick. It updates the @State variable once the view has rendered, which can then be utilised in the if-statement to render the proper layout.
Pretty ugly, but does the job...

Code:

import SwiftUI

struct NewsCardView: View {
    
    var title: String = "Lorem Ipsum is simply dummy text of the printing and typesetting industry"
    var text: String = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."
    
    @State private var rect: CGRect = CGRect()
    
    var body: some View {
        VStack {
            Text(title)
                .font(.title2)
                .fixedSize(horizontal: false, vertical: true)
            Divider()
                .padding(.top, -4)
            if rect.size.height >= 400 {
                VStack {
                    Text(text)
                        .frame(maxHeight: 320)
                    Divider()
                        .padding(.top, -4)
                    NavigationLink(destination:
                        TestView()
                    , label: {
                        HStack {
                            Text("Continue reading")
                            Spacer()
                            Image(systemName: "chevron.right")
                        }
                        .padding(.top, -16)
                        .frame(height: 44)
                        .contentShape(Rectangle())
                    })
                }
            } else {
                Text(text)
                    .padding(.bottom, 8)
                    .fixedSize(horizontal: false, vertical: true)
            }
        }
        .cornerRadius(10)
        .padding(.horizontal)
        .padding(.top)
        .overlay( RoundedRectangle(cornerRadius: 10)
                    .stroke(Color.gray, lineWidth: 1))
        .padding()
        .background(GeometryGetter(rect: $rect))
    }
}

struct NewsCardView_Previews: PreviewProvider {
    static var previews: some View {
        NewsCardView()
    }
}


struct GeometryGetter: View {
    @Binding var rect: CGRect
    
    var body: some View {
        return GeometryReader { geometry in
            self.makeView(geometry: geometry)
        }
    }
    
    func makeView(geometry: GeometryProxy) -> some View {
        DispatchQueue.main.async {
            self.rect = geometry.frame(in: .global)
        }        
        return Rectangle().fill(Color.clear)
    }
}
``

SwiftUI - Change layout of card based on height of Text view

1 Answers1