NavigationSplitView列宽设置失效，无法调整侧边栏/详情列宽度

我尝试用NavigationSplitView实现两栏布局，要求左栏宽度占比60%（iPad横屏），右栏依赖左栏内容，同时手机端能自动堆叠显示。但无论怎么调整设置，iPad横屏时左栏最多只占约25%，竖屏约35%，完全达不到预期的60%占比。

已尝试的操作：

• 给组件设置多种frame变体
• 组合使用NavigationSplitViewVisibility的不同值
• 尝试navigationSplitViewColumnWidth的min/ideal/max参数组合

约束条件：

• 视图为静态，必须使用.navigationSplitViewStyle(.balanced)

请问是否用错组件？iPad横屏的两栏布局是否需要替换NavigationSplitView？

相关代码 #

SuggestionContentView

struct SuggestionContentView : View {
    @State var isPresented:Bool = false
    
    @State var items = [
        "crown",
        "cereal",
        "color",
        "cookie",
        "can",
        "cat",
    ]
    var nullAction: (() -> Void)?
    var body: some View {
        List {
            ForEach(items, id:\.self) { item in
                Button {
                    isPresented = true
                } label: {
                    Text(item)
                }
            }
        }
        .navigationBarBackButtonHidden(true)
    }
}

三列布局尝试（侧边栏宽度设为0）

struct ClickAndSuggestionLayout: View {
    @State private var columnVisibility =
    NavigationSplitViewVisibility.doubleColumn
    
    var body: some View {
        NavigationSplitView(columnVisibility: $columnVisibility) {
            EmptyView().navigationSplitViewColumnWidth(0)
        } content: {
            SuggestionContentView()
                .toolbar(.hidden, for: .navigationBar)
                .navigationSplitViewColumnWidth( 800)
        } detail: {
            SuggestionContentView()
                .toolbar(.hidden, for: .navigationBar)
                .navigationSplitViewColumnWidth(400)
        }
        .navigationSplitViewStyle(.balanced)
    }
}

两列布局尝试

struct RadialAndSuggestionLayout: View {
    @State private var columnVisibility =
    NavigationSplitViewVisibility.doubleColumn
    
    var body: some View {
        NavigationSplitView(columnVisibility: $columnVisibility) {
            SuggestionContentView()
                .toolbar(.hidden, for: .navigationBar)
                .navigationSplitViewColumnWidth( 800)
        } detail: {
            SuggestionContentView()
                .toolbar(.hidden, for: .navigationBar)
                .navigationSplitViewColumnWidth(400)
        }
        .navigationSplitViewStyle(.balanced)
    }
}

不符合预期的预览效果 #

问题根源与解决方案 #

不需要替换NavigationSplitView，但你用的.navigationSplitViewStyle(.balanced)是核心限制——这个样式的设计目的就是让各列宽度尽量均衡，会直接忽略你设置的自定义宽度值，所以不管怎么调都达不到60%的占比。

如果你的“必须使用.balanced”的要求可以调整，改用.prominentDetail样式就能实现需求，同时保留手机端自动堆叠的特性。修改后的两栏布局代码如下：

struct RadialAndSuggestionLayout: View {
    @State private var columnVisibility = NavigationSplitViewVisibility.doubleColumn
    
    var body: some View {
        NavigationSplitView(columnVisibility: $columnVisibility) {
            SuggestionContentView()
                .toolbar(.hidden, for: .navigationBar)
                // 动态计算左栏宽度：占屏幕宽度60%，同时设置最小宽度保证可用性
                .navigationSplitViewColumnWidth(
                    min: 400,
                    ideal: UIScreen.main.bounds.width * 0.6,
                    max: UIScreen.main.bounds.width * 0.6
                )
        } detail: {
            SuggestionContentView()
                .toolbar(.hidden, for: .navigationBar)
                // 右栏自动填充剩余空间，设置最小宽度避免过窄
                .navigationSplitViewColumnWidth(min: 200)
        }
        .navigationSplitViewStyle(.prominentDetail)
    }
}

关键说明 #

• .prominentDetail样式支持自定义列宽比例，不会强制平衡宽度，适合你需要左栏占比60%的场景。
• 用UIScreen.main.bounds.width动态计算宽度，能适配不同尺寸的iPad。
• 手机端依然会自动切换为堆叠布局，符合你的需求。
• 如果确实必须使用.balanced样式，那么NavigationSplitView无法满足你要左栏占60%的要求，这种情况下可以考虑用HStack结合GeometryReader手动实现两栏布局，同时通过@Environment(\.horizontalSizeClass)判断设备尺寸来切换堆叠/分栏模式。

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