如何避免macOS应用中NavigationSplitView侧边栏文本初始截断

方案1：给侧边栏列表设置最小宽度 #

直接给List添加frame(minWidth: ...)修饰符，指定足够容纳长文本的最小宽度，确保启动时侧边栏宽度足够：

struct ContentView: View {
    enum ContentType: CaseIterable, Identifiable, Equatable {
        case a, b
        
        var id: Self { self }
    }
    
    @State var contentType = ContentType.a
    
    var body: some View {
        NavigationSplitView {
            List(ContentType.allCases, selection: $contentType) { value in
                NavigationLink(value: value) {
                    Image(systemName: "info")
                    Text("Some Long Text That Would Otherwise Be Truncated")
                }
            }
            .frame(minWidth: 280) // 根据你的文本长度调整这个值
        } detail: {
            Text("Detail Content")
        }
    }
}

方案2：让文本强制完整显示 #

给Text添加fixedSize(horizontal: true, vertical: false)，强制文本不换行、不截断，List会自动调整侧边栏宽度来适配内容，启动时就能完整显示：

struct ContentView: View {
    enum ContentType: CaseIterable, Identifiable, Equatable {
        case a, b
        
        var id: Self { self }
    }
    
    @State var contentType = ContentType.a
    
    var body: some View {
        NavigationSplitView {
            List(ContentType.allCases, selection: $contentType) { value in
                NavigationLink(value: value) {
                    Image(systemName: "info")
                    Text("Some Long Text That Would Otherwise Be Truncated")
                        .fixedSize(horizontal: true, vertical: false)
                }
            }
        } detail: {
            Text("Detail Content")
        }
    }
}

方案3：自定义NavigationSplitView列宽度策略 #

使用navigationSplitViewColumnWidth修饰符，设置侧边栏的理想宽度为内容自适应（.intrinsic），让系统自动计算能容纳所有内容的宽度：

struct ContentView: View {
    enum ContentType: CaseIterable, Identifiable, Equatable {
        case a, b
        
        var id: Self { self }
    }
    
    @State var contentType = ContentType.a
    
    var body: some View {
        NavigationSplitView {
            List(ContentType.allCases, selection: $contentType) { value in
                NavigationLink(value: value) {
                    Image(systemName: "info")
                    Text("Some Long Text That Would Otherwise Be Truncated")
                }
            }
        } detail: {
            Text("Detail Content")
        }
        .navigationSplitViewColumnWidth(min: 200, ideal: .intrinsic, max: 400)
    }
}

方案对比 #

• 方案1适合文本长度固定、能预估宽度的场景，简单直接；
• 方案2无需预估宽度，完全由文本长度驱动，最省心；
• 方案3更灵活，可同时限制侧边栏的最小/最大宽度，适合需要控制宽度范围的场景。

内容的提问来源于stack exchange，提问作者J. Doe