macOS下SwiftUI视图随窗口调整偏移出屏幕的问题求助

问题描述 #

我用SwiftUI实现了一个页面标题视图，在macOS系统中调整窗口大小的时候，该视图会偏移出屏幕，再次调整窗口又能重新显示。相关代码及问题演示如下：

标题视图代码 #

struct Test: View {

    @Binding var path: NavigationPath

    var body: some View {
        VStack{
            HStack{
                VStack(alignment: .leading, spacing: 8){
                    Text("TextText")
                        .font(.system(size: 36, weight: .bold))
                    Text("TextText")
                        .font(.system(size: 24, weight: .medium))
                    HStack(alignment: .firstTextBaseline){
                        Text("TextText")
                            .font(.system(size: 24, weight: .medium))
                        Text("TextText")
                            .font(.system(size: 16, weight: .thin))
                    }
                    Text("TextText")
                        .font(.system(size: 16, weight: .regular))
                    Text("TextText")
                        .font(.system(size: 16, weight: .regular))
                    Text("TextText")
                        .font(.system(size: 16, weight: .regular))
                    Text("TextText")
                        .font(.system(size: 16, weight: .regular))
                }
                .padding(30)
                .fixedSize()
                Spacer()
            }
        }
        .navigationTitle("Test")
    }
}

导航结构代码 #

NavigationSplitView(sidebar: {
            List(selection: $selection){
                Section(header: Text("Test")){
                    Label("HomeMenuOption", systemImage: "list.and.film")
                        .tag("header")
                }
            }
        }, detail: {
            NavigationStack(path: $path){
                if selection == "header" {
                    ContentView()
                }
            }
        })

跳转逻辑代码 #

NavigationLink(value: roll, label: {
    Text("Click Me")
})                                      .buttonStyle(PlainButtonStyle())
.navigationDestination(for: Roll.self) { roll in
    TestOverview(path: $path)
}

.navigationDestination(isPresented: $moveToTest, destination: {
    Test(path: $path)
})

问题演示 #

我曾尝试添加Spacer和fixedSize()，但没有效果，此前类似布局并未出现该问题，目前不知下一步该尝试什么。

问题分析 #

这个问题大概率是fixedSize()与macOS导航组件的布局逻辑冲突导致的：fixedSize()强制视图保持原始尺寸，而NavigationSplitView的详情区域在窗口调整时会重新计算布局范围，两者的规则矛盾引发了视图偏移。另外，嵌套的NavigationStack也可能加剧了布局计算的异常。

解决方案 #

1. 替换fixedSize()为自适应布局 #

移除VStack上的fixedSize()，改用frame(maxWidth: .infinity, alignment: .leading)让视图自适应宽度并保持左对齐，确保布局跟随窗口尺寸变化：

struct Test: View {
    @Binding var path: NavigationPath

    var body: some View {
        VStack{
            HStack{
                VStack(alignment: .leading, spacing: 8){
                    // 原有Text内容保持不变
                    Text("TextText")
                        .font(.system(size: 36, weight: .bold))
                    Text("TextText")
                        .font(.system(size: 24, weight: .medium))
                    HStack(alignment: .firstTextBaseline){
                        Text("TextText")
                            .font(.system(size: 24, weight: .medium))
                        Text("TextText")
                            .font(.system(size: 16, weight: .thin))
                    }
                    Text("TextText")
                        .font(.system(size: 16, weight: .regular))
                    Text("TextText")
                        .font(.system(size: 16, weight: .regular))
                    Text("TextText")
                        .font(.system(size: 16, weight: .regular))
                    Text("TextText")
                        .font(.system(size: 16, weight: .regular))
                }
                .padding(30)
                // 替换fixedSize为自适应frame
                .frame(maxWidth: .infinity, alignment: .leading)
                Spacer()
            }
        }
        .navigationTitle("Test")
    }
}

2. 简化导航嵌套结构 #

避免在NavigationSplitView的detail区域嵌套NavigationStack，直接将navigationDestination挂载到NavigationSplitView层级，减少布局嵌套带来的计算负担：

NavigationSplitView(sidebar: {
    List(selection: $selection){
        Section(header: Text("Test")){
            Label("HomeMenuOption", systemImage: "list.and.film")
                .tag("header")
        }
    }
}, detail: {
    if selection == "header" {
        ContentView()
    }
})
// 将导航目标移到SplitView层级
.navigationDestination(for: Roll.self) { roll in
    TestOverview(path: $path)
}
.navigationDestination(isPresented: $moveToTest) {
    Test(path: $path)
}

3. 添加最小宽度约束（可选） #

如果仍有偏移问题，给Test视图设置最小宽度，确保窗口缩小时视图有稳定的布局边界：

struct Test: View {
    @Binding var path: NavigationPath

    var body: some View {
        VStack{
            // 原有HStack内容
        }
        .navigationTitle("Test")
        .frame(minWidth: 600) // 设置最小宽度，可根据需求调整
    }
}

验证建议 #

测试时多次调整窗口大小，观察视图是否还会偏移。如果问题依旧，建议更新Xcode到最新版本——这可能是SwiftUI在macOS上的已知布局bug，新版本通常会修复这类问题。

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