How to use GeometryReader in an extracted RowView of a List while having correct row height?

Question

I need to use GeometryReader to size views based on screen width. This is what I had before refactoring. (Zoom in to the pic to see the code and preview side by side).

Code here:

import SwiftUI

struct WorkingView: View {
    var data = ["Hit the Edit button to reorder", "Practice Coding", "Grocery shopping", "Get tickets", "Clean house", "Do laundry", "Cook dinner", "Paint room"]
    
    var body: some View {
        NavigationView {
            GeometryReader { geometry in
                List {
                    ForEach(data, id: \.self) { content in
                        HStack {
                            Text(String(content.count))
                                .frame(width: geometry.size.width * 0.10)
                            VStack {
                                Text(content)
                                    .underline()
                                Text(content)
                                    .bold()
                                Text(content)
                                    .foregroundColor(.yellow)
                            }
                        }
                    }
                }
                .navigationTitle(Text("Home"))
            }
        }
    }
}

This is what I had after refactoring the rows into an extracted View. Now the row heights are getting messed up, when using GeometryReader here.

import SwiftUI

struct NotWorkingView: View {
    var data = ["Hit the Edit button to reorder", "Practice Coding", "Grocery shopping", "Get tickets", "Clean house", "Do laundry", "Cook dinner", "Paint room"]
    
    var body: some View {
        NavigationView {
            List {
                ForEach(data, id: \.self) { content in
                    GeometryReader { geometry in
                        NotWorkingRowView(content: content)
                    }
                }
            }
            .navigationTitle(Text("Home"))
        }
    }
}

struct NotWorkingRowView: View {
    var content: String
    var body: some View {
        VStack {
            GeometryReader { geometry in
                HStack {
                    Text(String(content.count))
                        .frame(width: geometry.size.width * 0.10)
                    VStack {
                        Text(content)
                            .underline()
                        Text(content)
                            .bold()
                        Text(content)
                            .foregroundColor(.yellow)
                    }
                }
            }
        }
    }
}

This is a simplified version, my extracted subview itself is pretty big. But since it needs screen width to size subviews, I have to use GeometryReader.

What is messing up the row heights when I am extracting it into a subview?

What do you try to achieve? It seems to me you're moving onto wrong way. Does this answer your question https://stackoverflow.com/a/63986460/12299030. — Asperi, Jan 10 '21 at 09:47
@Asperi I am trying to achieve what is shown in the first screenshot. But the View code is getting too big and so I am trying to extract the Rows in the List into its own subview. But as soon as I am doing it, I am getting what's shown in the second screenshot (incorrect row height and row subviews getting laid outside the row). I want the layout (with correct row height) in the first screenshot, but with the RowView extracted into a separate struct. — Rajat, Jan 10 '21 at 09:56

Andrew · Accepted Answer · 2021-01-10T09:17:24.183

You could put the GeometryReader at the top level and pass the width that it gets to the NotWorkingRowView. Something like this:

struct NotWorkingView: View {
    var data = ["Hit the Edit button to reorder", "Practice Coding", "Grocery shopping", "Get tickets", "Clean house", "Do laundry", "Cook dinner", "Paint room"]

    var body: some View {
        NavigationView {
            GeometryReader { geometry in. // <- Move Geometry reader here
                List {
                    ForEach(data, id: \.self) { content in
                        NotWorkingRowView(content: content, 
                                          width: geometry.size.width) // <- Pass width
                    }
                }
            }
            .navigationTitle(Text("Home"))
        }
    }
}

Then you can just use the width inside your row like this:

struct NotWorkingRowView: View {

    var content: String
    var width: CGFloat

    var body: some View {
        VStack {
            HStack {
                Text(String(content.count))
                    .frame(width: width * 0.10) // <- use the width you passed here
                VStack(alignment: .leading) {
                    Text(content)
                        .underline()
                    Text(content)
                        .bold()
                    Text(content)
                        .foregroundColor(.yellow)
                }
            }
        }
    }
}

Which gives the following result on screen:

Tested in Xcode 12.3 on iOS 14.3

Aah! Didn't think of this approach. I got more fixated on figuring out how GeometryReader works. — Rajat, Jan 10 '21 at 09:53

How to use GeometryReader in an extracted RowView of a List while having correct row height?

1 Answers1