How to make SwiftUI Widget buttons fill their container height when using GeometryReader with calculated row heights?

Question

I'm building an iOS Widget (WidgetKit) with a 2×2 button grid using GeometryReader to calculate row heights. The buttons should fill their containers completely and have equal heights, like Apple's Shortcuts widget.

Expected Result: All buttons should have equal height and fill the available space evenly, like this:

Actual Result: The button backgrounds don't fill their calculated container heights. The containers themselves ARE equal (verified with debug borders showing 44pt height), but the button content/background stops short:

Current Implementation:

Using GeometryReader to calculate cellHeight, then applying it with .frame(height: cellHeight):

GeometryReader { geo in
    let cellHeight = (geo.size.height - totalSpacing - totalPadding) / 2
    
    VStack(spacing: 8) {
        ForEach(0..<2) { row in
            HStack(spacing: 8) {
                ForEach(0..<2) { col in
                    WidgetActionButton(...)
                        .frame(height: cellHeight)
                }
            }
        }
    }
}

Button implementation:

Button(intent: ExecuteWidgetActionIntent(...)) {
    VStack(alignment: .leading, spacing: 8) {
        Image(systemName: action.iconName)
        Spacer(minLength: 0)
        Text(action.displayName)
    }
    .padding(12)
    .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .leading)
    .background(Color.blue)
    .clipShape(RoundedRectangle(cornerRadius: 14))
}
.buttonStyle(.plain)

The debug borders prove the containers are equal height, but the colored button backgrounds don't expand to fill them. How can I make the button backgrounds fill the full calculated height in WidgetKit?

1. Grid with .frame(maxHeight: .infinity) on buttons:

   • Applied .frame(maxHeight: .infinity) to each button in GridRow
   • Expected: Rows would distribute height equally
   • Result: Top row still taller than bottom row

2. Grid with .gridCellUnsizedAxes(.vertical):

   • Added .gridCellUnsizedAxes(.vertical) to GridRow
   • Expected: Grid would ignore intrinsic content size and distribute evenly
   • Result: No change, rows still unequal

3. GeometryReader with VStack/HStack and calculated heights:

   • Calculated exact cellHeight using available space
   • Applied .frame(height: cellHeight) to each button container
   • Expected: Buttons would fill the fixed height containers
   • Result: Container heights are correct (verified with debug borders at 44pt), but button backgrounds don't expand to fill them

4. .frame(maxHeight: .infinity) inside Button label:

   • Applied maxHeight to the VStack inside Button's label closure
   • Expected: Button content would expand to fill available space
   • Result: Button label still doesn't fill the container height

5. ZStack with background outside Button:

   • Wrapped Button in ZStack with Color background
   • Expected: Background would fill the container independently
   • Result: Background also doesn't fill the calculated height

The core issue: In WidgetKit, the button content seems to have its own intrinsic size that doesn't respond to the parent container's fixed height, even though debug borders confirm the containers are equal.

Edit:

[![My Widget now][1]][1] [1]: https://i.sstatic.net/fzg3MSR6.png

[![ When you compare my widget to Apple's Shortcuts widget in the screenshots, you can see:

• Apple's buttons are much larger
• Apple's buttons are much closer to the widget edges
• Less spacing between buttons ][2]][2] [2]: https://i.sstatic.net/2vuawM6N.png

Answer 1

It sounds from the way that you describe the issue that you are expecting the buttons to fit inside a frame with height of 44 points. However, the VStack that forms the label of the button uses spacing of 8, then you add padding of 12. So before the image and text are even shown, a height of 40 is already required. When the image and text are shown too, the label content overflows the frame.

In order to fit inside a height of 44, the spacing and padding needs to be more flexible. I would suggest the following changes:

• Use spacing of 0 for the VStack.
• Scale the image to fit within a minimum and maximum height.
• Allow the text to shrink a little by applying a .minimumScaleFactor.
• Use Color.clear with a minimum and maximum height, instead of vertical padding.
• Apply .layoutPriority to the different elements, to determine how the allocation of space should be prioritized.

Button {} label: {
    VStack(alignment: .leading, spacing: 0) {
        Color.clear
            .frame(minHeight: 6, maxHeight: 12)
            .layoutPriority(2)
        Image(systemName: iconName)
            .resizable()
            .scaledToFit()
            .frame(minHeight: 16, maxHeight: 32)
            .layoutPriority(3)
        Spacer(minLength: 0)
            .layoutPriority(1)
        Text(displayName)
            .minimumScaleFactor(0.8)
            .layoutPriority(3)
        Color.clear
            .frame(minHeight: 6, maxHeight: 12)
            .layoutPriority(2)
    }
    .padding(.horizontal, 12)
    .background(.blue)
    .clipShape(.rect(cornerRadius: 14))
}
.buttonStyle(.plain)

Note that the frame setting maxWidth and maxHeight to inifinity is no longer needed, because the label contains greedy elements that expand to use all the available space anyway.

Here is how it looks for heights of 44 and 100 points: