SwiftUI Weighted stack - views stacked on top of each other

37 Views Asked by At

I am trying to create a table like layout using weighted stacks (from https://swiftuirecipes.com/blog/weighted-layout-hstack-and-vstack-in-swiftui), but am seeing very strange behavior.

At the moment, I'm just trying to create the header row, which consists of 5 images

However, what I'm seeing is that the last 4 images are stacked on top of each other, rather than being laid out properly. enter image description here

However, if I wrap my WeightedStack inside an if let that doesn't actually do anything, it works as expected enter image description here

Here's the code:

 ScrollView{
                VStack(spacing: 10){
                    if let results = state.getList() { //Correct layout with this in place, commenting out this line results in broken layout
                        WeightedHStack{ proxy in
                            Image(.icMountain)
                                .icon()
                                .weighted(1.7, proxy: proxy)
                            Image(systemName: "calendar")
                                .icon()
                                .weighted(0.7, proxy: proxy)
                            Image(.icRuns)
                                .icon()
                                .weighted(1, proxy: proxy)
                            Image(.icLiftLength)
                                .icon()
                                .weighted(1.1, proxy: proxy)
                            Image(.icLiftVerticalRise)
                                .icon()
                                .weighted(1.3, proxy: proxy)
                        }
                        .padding()
                        .frame(maxWidth: .infinity)
                        .foregroundColor(.white)
                        .background(activeTheme.primaryColor)
                    }
                }
            }

Note: The working if let was copied in from somewhere else where this was working, and state.getList() isn't relevant to this view, but is just a function that returns a list of custom objects and results isn't actually used anywhere!

I've tried with other wrappers, e.g. if 1==1... and var x:String? = "123" ; if let x = x... but these still result in the broken layout.

Setting breakpoints in the weighted stack logic, shows the correct calculations are being performed to generate the size of the image views in both cases

Any help greatly appreciated, as I'm completely stumped by this one

0

There are 0 best solutions below