Widget stacks not taking full width

Can anybody help me understand what’s going on here? I have included borders around everything - red for stacks, yellow for text (in a stack), and white for images.

The only difference between these two is the width of the iPhone/iPad/Watch icons at the bottom of the pic. If I make them a bit wider as in the top pic, the first two rows don’t extend to the full width, and are therefore not centered properly. Is it a bug? To be clear, there’s no spacer after the stacks on the top two rows, so why is that space there?

The summary of what I have is below. All of the spacers are without length, and all of the images have a specified size.

vertical stack, align top
  horizontal stack
    spacer; text; spacer
  horizontal stack, align center
    spacer, image, spacer, image, spacer, image, spacer
  horizontal stack, align center
    spacer, image, spacer, image, spacer, image, spacer, image, spacer, image, spacer

There is a similar issue here, but no replies.

Welcome! Nice clear post. @simonbs only knows for sure but I wonder if the sizes are set after allocating space. What happens if you add the last stack first? Or set .resizable = false in each image and set sizes manually?

1 Like

If I duplicate the bottom row at the top I see the same effect - the wide rows are correctly centered, but the shorter ones are still looking left-justified. Same if I just move the bottom row to the top - the top row is now full width, but the two rows below are shorter.

All of the images already had sizes set manually, and adding .resizable = false didn’t help.

I think this is because the stacks are left aligned by default and you can change that only with dynamic spacers.

I do have dynamic spacers at the start and end of each horizontal stack. You can see below that exactly the same widget shows correctly as a large widget, but incorrectly as a small one. In this version I put another horizontal stack around everything with dynamic spacers at the start and end again.

After further investigation, I think it is a bug but one with an easy workaround. It happens when you have a bunch of horizontal stacks in a vertical stack, if one of the horizontal stacks is wider that the “screen”. In this case, it is correctly positioned, but effectively changes the left edge from 0 to, say -10 if it was 20px wider than the screen. Other narrower stacks take up the full width, but are offset by that -10, making them appear uncentered.

The fix is to make all of the same horizontal stacks the same width, using a value bigger than the screen. So for example, Size(1000, 0) - leaving the height at 0 so it calculates.

1 Like