Can we have maxWidth infinity in side the Vflow?

[NishaTS19]

@tevelee

Here i am using VFlow and in that i have Header, now i want to expand header as much as it can, for that if i use maxWidth but it's not working so how can i do?

right now my Rectangle has fixed width but in real scenario it's not.

struct ContentView: View {

private var rectDetails: [(CGFloat, Color)] = [
    (400, .green),
    (100, .pink),
    (100, .blue),
    (100, .pink),
    (150, .cyan),
    (400, .purple),
    (150, .yellow),
    (200, .orange),
    (350, .red),
    (200, .red),
]

private var gridItemLayout = [GridItem(.adaptive(minimum: 50),
                                       spacing: 20,
                                       alignment: .top)
]

var body: some View {
    VFlow {
        ForEach(0 ..< rectDetails.count, id: \.self) { index in
            let data = rectDetails[index]
            VStack(alignment: .leading) {
                Text("This is Header!")
                // .frame(maxWidth: .infinity, alignment: .top)
                    .background(.pink)
                Rectangle()
                    .fill(data.1)
                    .frame(width: 200, height: data.0)
                    .background(data.1)
                    .cornerRadius(10)
                    .overlay {
                        Text("\(index)")
                            .padding(10)
                            .background(.white)
                            .clipShape(.circle)
                    }
            }
            .frame(alignment: .top)
        }
    }
}

}

[tevelee]

Hi @NishaTS19! Thanks for your question. If you already know that the Rectangle has a width of 200, you could simply set:

.frame(maxWidth: 200, alignment: .top)

for the header.

I also appreciate the example code you shared! As I mentioned here, Apple’s Layout protocol behaves a bit differently when used along the vertical axis, it tends to propose a bound with an infinite width. A workaround I’ve found is to wrap the VFlow in a frame, or apply .containerRelativeFrame(.horizontal) to mitigate this issue.