如何让HStack和VStack采用理想尺寸布局而非最大尺寸？

背景说明 #

HStack和VStack默认会基于子视图的最大尺寸进行布局，比如以下代码中，两个颜色视图会拉伸填充HStack的可用宽度：

HStack {
    Color.orange
        .frame(idealWidth: 200, maxWidth: .infinity)
    Color.purple
        .frame(idealWidth: 100, maxWidth: .infinity)
}
.padding()
.frame(height: 100)

但当把HStack嵌套在水平ScrollView中时，布局系统会采用子视图的理想尺寸进行布局，不会拉伸：

ScrollView(.horizontal) {
    HStack {
        Color.orange
            .frame(idealWidth: 200, maxWidth: .infinity)
        Color.purple
            .frame(idealWidth: 100, maxWidth: .infinity)
    }
}
.padding()
.frame(height: 100)

问题 #

无需嵌套ScrollView，如何让HStack或VStack基于理想尺寸布局？能否通过包装子视图使其将理想尺寸作为最大尺寸实现？除自定义Layout外是否有其他方案？

解决方案 #

1. 使用fixedSize()修饰符 #

这是最简单的方案，给HStack/VStack添加fixedSize()修饰符，强制布局系统采用视图的理想尺寸，而非填充父视图的可用空间：

HStack {
    Color.orange
        .frame(idealWidth: 200, maxWidth: .infinity)
    Color.purple
        .frame(idealWidth: 100, maxWidth: .infinity)
}
.fixedSize() // 关键：强制使用理想尺寸
.padding()
.frame(height: 100)

如果只想在某一轴上生效，可以用fixedSize(horizontal: true, vertical: false)指定方向。

2. 包装子视图，将理想尺寸设为最大尺寸 #

如果不想修改整个Stack的布局行为，可以单独处理每个子视图，把理想尺寸设置为最大尺寸：

• 直接指定固定宽度（等同于理想尺寸=最大尺寸）：

HStack {
    Color.orange
        .frame(width: 200) // 固定宽度为理想值
    Color.purple
        .frame(width: 100)
}
.padding()
.frame(height: 100)

• 保留理想尺寸的声明，同时限制最大尺寸等于理想值：

HStack {
    Color.orange
        .frame(idealWidth: 200, maxWidth: 200)
    Color.purple
        .frame(idealWidth: 100, maxWidth: 100)
}
.padding()
.frame(height: 100)

• 通用包装视图（适合需要复用的场景）：

struct IdealAsMaxSize<Content: View>: View {
    let content: Content
    
    var body: some View {
        content
            .frame(maxWidth: content.sizeThatFits(.infinity).width)
    }
}

// 使用示例
HStack {
    IdealAsMaxSize {
        Color.orange
            .frame(idealWidth: 200, maxWidth: .infinity)
    }
    IdealAsMaxSize {
        Color.purple
            .frame(idealWidth: 100, maxWidth: .infinity)
    }
}
.padding()
.frame(height: 100)

3. 使用LazyHStack/LazyVStack #

懒加载版本的Stack默认会基于子视图的理想尺寸布局，不会强制拉伸填充可用空间，适合子视图较多的场景：

LazyHStack {
    Color.orange
        .frame(idealWidth: 200, maxWidth: .infinity)
    Color.purple
        .frame(idealWidth: 100, maxWidth: .infinity)
}
.padding()
.frame(height: 100)

内容的提问来源于stack exchange，提问作者Benzy Neez