如何避免macOS SwiftUI中视图框架尺寸变化影响窗口大小

问题场景 #

使用SwiftUI开发macOS应用时，拖动Slider动态调整Rectangle的宽度，窗口会随之自动缩放。需要实现窗口自适应内容，但特定内部视图的尺寸调整不影响窗口大小，且不能使用固定尺寸容器或显式设置固定窗口大小。

解决方案 #

核心思路是让可变尺寸的视图（Rectangle）不参与父视图的尺寸计算：通过overlay将其叠加在一个占位视图上，占位视图的尺寸决定父布局的大小，叠加视图的尺寸变化不会影响窗口。如果需要限制视图超出窗口部分的显示，可添加clipped()裁剪；若需要支持滚动，则嵌套ScrollView即可。

修改后的代码示例 #

import SwiftUI

struct ContentView: View {
    @State private var rectWidth: CGFloat = 100

    var body: some View {
        VStack {
            // 占位视图，决定该区域的布局尺寸（高度固定100，宽度自适应窗口）
            Color.clear
                .frame(height: 100)
                .overlay(
                    // 可变尺寸的Rectangle，其宽度变化不会影响父视图尺寸
                    Rectangle()
                        .frame(width: rectWidth, height: 100)
                        .foregroundColor(.blue)
                        // 可选：添加裁剪，超出窗口部分不显示
                        // .clipped()
                )
            
            Slider(value: $rectWidth, in: 50...2000)
                .padding()
        }
    }
}

替代方案（支持横向滚动） #

如果希望Rectangle超出窗口宽度时可横向滚动，可将其嵌套在ScrollView中：

import SwiftUI

struct ContentView: View {
    @State private var rectWidth: CGFloat = 100

    var body: some View {
        VStack {
            ScrollView(.horizontal) {
                Rectangle()
                    .frame(width: rectWidth, height: 100)
                    .foregroundColor(.blue)
            }
            // 固定ScrollView高度，避免滚动时影响整体布局
            .frame(height: 100)
            
            Slider(value: $rectWidth, in: 50...2000)
                .padding()
        }
    }
}

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