Adicionar espaçamento igual aos elementos internos do HStack para preencher o espaço disponível no SwiftUI?

Uma maneira de resolver é usar um personalizado Layout:

• A largura ideal é baseada no tamanho ideal das visualizações.
• Qualquer excesso de largura é compartilhado igualmente entre as visualizações no contêiner.

Aqui está um exemplo de implementação que funciona desta maneira:

struct PaddedToFill: Layout {
    typealias Cache = IdealSizes
    let spacing: CGFloat

    struct IdealSizes {
        let idealWidths: [CGFloat]
        let idealMaxHeight: CGFloat

        var isEmpty: Bool { idealWidths.isEmpty }
        var nWidths: Int { idealWidths.count }
    }

    func makeCache(subviews: Subviews) -> IdealSizes {
        var idealWidths = [CGFloat]()
        var idealMaxHeight = CGFloat.zero
        for subview in subviews {
            let idealViewSize = subview.sizeThatFits(.unspecified)
            idealWidths.append(idealViewSize.width)
            idealMaxHeight = max(idealMaxHeight, idealViewSize.height)
        }
        return IdealSizes(idealWidths: idealWidths, idealMaxHeight: idealMaxHeight)
    }

    func sizeThatFits(proposal: ProposedViewSize, subviews: Subviews, cache: inout IdealSizes) -> CGSize {

        // Consume all the width available
        CGSize(width: proposal.width ?? 10, height: cache.idealMaxHeight)
    }

    func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout IdealSizes) {
        if !cache.isEmpty, subviews.count == cache.nWidths {
            let idealContainerWidth = cache.idealWidths.reduce(0) { $0 + $1 } + (CGFloat(cache.nWidths - 1) * spacing)
            let excessWidth = max(0, bounds.width - idealContainerWidth)
            let paddingPerView = excessWidth / CGFloat(cache.nWidths)
            var minX = bounds.minX
            for (index, subview) in subviews.enumerated() {
                let w = cache.idealWidths[index] + paddingPerView
                let viewSize = subview.sizeThatFits(ProposedViewSize(width: w, height: bounds.height))
                let h = viewSize.height
                let x = minX + ((w - viewSize.width) / 2)
                let y = bounds.minY + ((bounds.height - h) / 2)
                subview.place(at: CGPoint(x: x, y: y), proposal: ProposedViewSize(width: w, height: h))
                minX += w + spacing
            }
        }
    }
}

Também é necessária uma alteração em ExtractedView, para que ele se expanda e preencha a largura disponível antes que o fundo amarelo seja adicionado:

// ExtractedView

Button {

} label: {
    HStack(spacing: 8) {
        // ...
    }
    .padding(.horizontal, 8)
    .padding(.vertical, 8)
    .frame(maxWidth: .infinity) // 👈 added
    .background {
        Color.yellow
    }
}

Para usar, basta substituir o HStackno seu código original por PaddedToFill:

PaddedToFill(spacing: 20) {
    ExtractedView(text: "Energy")
    ExtractedView(text: "Breath Control")
}
.padding(.horizontal, 20)

Na sua captura de tela do resultado aproximado, o padding extra sempre estava no lado final de cada botão. Para atingir esse resultado, basta adicionar um alignmentparâmetro ao definir o maxWidthin ExtractedView:

HStack(spacing: 8) {
    // ...
}
.padding(.horizontal, 8)
.padding(.vertical, 8)
.frame(maxWidth: .infinity, alignment: .leading) // 👈 + alignment
.background {
    Color.yellow
}

O EDIT Layout foi introduzido no iOS 16. Se você ainda precisa dar suporte ao iOS 15, precisará de uma solução de fallback para esta versão. Uma maneira seria medir o tamanho do contêiner usando um GeometryReader, então compartilhar a largura excedente entre os botões.

Aqui está um exemplo de como isso pode ser resolvido dessa forma. A maneira mais fácil de preencher os botões é permitir que o tamanho do preenchimento extra seja passado como um parâmetro para ExtractedView:

struct ExtractedView: View {
    let text: String
    var extraHorizontalPadding = CGFloat.zero // 👈 added

    var body: some View {
        Button {

        } label: {
            HStack(spacing: 8) {
                // ...
            }
            .padding(.horizontal, 8)
            .padding(.horizontal, extraHorizontalPadding) // 👈 added
            .padding(.vertical, 8)
            .frame(maxWidth: .infinity)
            .background {
                Color.yellow
            }
        }
    }
}

O tamanho do acolchoamento extra é calculado da mesma forma que o costume Layout, com base no tamanho ideal do contêiner.

• O tamanho ideal é encontrado adicionando uma versão oculta do HStackao fundo e usando um GeometryReaderpara medir seu tamanho.
• A largura disponível é medida envolvendo o visível HStackcom outro GeometryReader.

struct ContentView: View {
    let spacing: CGFloat = 20
    @State private var idealContainerSize: CGSize?

    @ViewBuilder
    private var buttons: some View {
        ExtractedView(text: "Energy")
        ExtractedView(text: "Breath Control")
    }

    var body: some View {
        if #available(iOS 16.0, *) {
            PaddedToFill(spacing: spacing) {
                buttons
            }
            .padding(.horizontal, spacing)
        } else {
            legacyLayout
        }
    }

    private var legacyLayout: some View {
        GeometryReader { outer in
            let actualContainerWidth = outer.size.width
            let excessWidth: CGFloat = max(0, actualContainerWidth - (idealContainerSize?.width ?? actualContainerWidth))
            let paddingPerView = excessWidth / 2
            HStack(spacing: spacing) {
                ExtractedView(text: "Energy", extraHorizontalPadding: paddingPerView / 2)
                    .fixedSize()
                ExtractedView(text: "Breath Control", extraHorizontalPadding: paddingPerView / 2)
                    .fixedSize()
            }
            .frame(maxWidth: .infinity)
            .background {
                HStack(spacing: spacing) {
                    buttons
                }
                .fixedSize()
                .hidden()
                .background {
                    GeometryReader { inner in
                        Color.clear
                            .onAppear {
                                idealContainerSize = inner.size
                            }
                    }
                }
            }
        }
        .frame(maxHeight: idealContainerSize?.height)
        .padding(.horizontal, spacing)
    }
}

@available(iOS 16.0, *)
struct PaddedToFill: Layout {
    // ... as before
}

EDIT 2 O costume Layoutfica mais complicado se os rótulos de texto devem ser quebrados quando não couberem em uma linha. Você pode tentar estas mudanças:

1. Remova o .lineLimitem ExtractedView:

// ExtractedView

Text(text)
    // .lineLimit(1)
    .font(.system(size: 18, weight: .bold))

2. Altere a função sizeThatFitspara solicitar o dobro da altura se a largura proposta for menor que a largura ideal:

func sizeThatFits(proposal: ProposedViewSize, subviews: Subviews, cache: inout IdealSizes) -> CGSize {
    let idealContainerWidth = cache.idealWidths.reduce(0) { $0 + $1 } + (CGFloat(cache.nWidths - 1) * spacing)
    let proposalWidth = proposal.width ?? 10
    return CGSize(
        width: proposalWidth,
        height: proposalWidth >= idealContainerWidth ? cache.idealMaxHeight : 2 * cache.idealMaxHeight
    )
}

Esta é uma aproximação bastante grosseira da altura que será realmente necessária e permite que o texto seja quebrado em apenas uma linha adicional. Uma implementação mais rigorosa precisaria chamar as subvisualizações com uma proposta de largura reduzida, computada exatamente como está sendo feita em placeSubviews.

3. Permita que o excesso de largura fique negativoplaceSubviews

// let excessWidth = max(0, bounds.width - idealContainerWidth)
let excessWidth = bounds.width - idealContainerWidth