SwiftUI中如何结合padding使用containerRelativeFrame？

问题核心：containerRelativeFrame 默认参考系是场景容器（即整个屏幕），而非父视图HStack。你给HStack设置的padding是加在HStack外层，对内部矩形的尺寸计算没有作用，导致矩形直接按屏幕宽度分配比例，看起来占满了屏幕。

解决方案一：修改containerRelativeFrame的参考容器 #

给每个矩形的containerRelativeFrame添加container: .local参数，让它基于最近的父容器（HStack）计算尺寸，同时让HStack占满可用宽度（减去padding后的空间）：

import SwiftUI

struct ContentView: View {
    var body: some View {
        HStack {
            Rectangle()
                .frame(height: 50)
                .containerRelativeFrame(.horizontal, count: 6, span: 2, spacing: 4.0, container: .local)
            Rectangle()
                .frame(height: 50)
                .containerRelativeFrame(.horizontal, count: 6, span: 2, spacing: 4.0, container: .local)
            Rectangle()
                .frame(height: 50)
                .containerRelativeFrame(.horizontal, count: 6, span: 1, spacing: 4.0, container: .local)
            Rectangle()
                .frame(height: 50)
                .containerRelativeFrame(.horizontal, count: 6, span: 1, spacing: 4.0, container: .local)
        }
        .foregroundColor(.blue)
        .frame(maxWidth: .infinity) // 让HStack占满padding后的可用宽度
        .padding(40)
    }
}

#Preview {
    ContentView()
}

解决方案二：改用HStack原生比例布局 #

如果不需要containerRelativeFrame的特殊特性，也可以用更简洁的方式实现比例布局：通过layoutPriority设置宽度比例，配合maxWidth: .infinity让矩形占满分配到的空间：

import SwiftUI

struct ContentView: View {
    var body: some View {
        HStack(spacing: 4.0) { // 直接设置HStack的间距，替代containerRelativeFrame的spacing参数
            Rectangle()
                .frame(height: 50)
                .frame(maxWidth: .infinity)
                .layoutPriority(2)
            Rectangle()
                .frame(height: 50)
                .frame(maxWidth: .infinity)
                .layoutPriority(2)
            Rectangle()
                .frame(height: 50)
                .frame(maxWidth: .infinity)
                .layoutPriority(1)
            Rectangle()
                .frame(height: 50)
                .frame(maxWidth: .infinity)
                .layoutPriority(1)
        }
        .foregroundColor(.blue)
        .padding(40)
    }
}

#Preview {
    ContentView()
}

两种方案对比：

• 方案一保留了containerRelativeFrame的用法，适合需要基于容器动态调整比例的复杂场景；
• 方案二更轻量化，适合简单的固定比例布局需求。

内容的提问来源于stack exchange，提问作者Kevin McQuown