iPad模拟器中NavigationSplitView侧边栏TabView宽度异常问题

学习SwiftUI已有一段时间，整体体验很不错。但在尝试将TabView添加到NavigationSplitView的侧边栏视图时，遇到了布局问题：该组件在iPhone模拟器和Mac上运行表现符合预期，但在iPad模拟器中，TabView的宽度出现异常，超出了其所在侧边栏的范围。请问是不是操作有误？恳请帮忙解答。

相关代码 #

struct TestView: View {
    var body: some View {
        NavigationSplitView {
            TabView {
                Text("This is sidebar 1")
                    .tabItem {
                        VStack {
                            Image(systemName: "gear")
                            Text("Sidebar 1")
                        }
                    }
                    .tag(0)
                Text("This is sidebar 2")
                    .tabItem {
                        VStack {
                            Image(systemName: "gear")
                            Text("Sidebar 2")
                        }
                    }
                    .tag(1)
            }
        } detail: {
            Text("This is detail")
        }
    }
}

问题截图 #

• iPad上TabView宽度异常：
  
• 使用自定义视图测试后仍出现相同问题：
  

解决方案 #

这个问题源于TabView在NavigationSplitView侧边栏中未正确继承父容器的宽度约束。iPad的侧边栏有固定宽度范围，但TabView默认布局逻辑未限制自身宽度，导致溢出。

只需给TabView添加frame(maxWidth: .infinity)，让它填充侧边栏的可用宽度即可解决：

struct TestView: View {
    var body: some View {
        NavigationSplitView {
            TabView {
                Text("This is sidebar 1")
                    .tabItem {
                        VStack {
                            Image(systemName: "gear")
                            Text("Sidebar 1")
                        }
                    }
                    .tag(0)
                Text("This is sidebar 2")
                    .tabItem {
                        VStack {
                            Image(systemName: "gear")
                            Text("Sidebar 2")
                        }
                    }
                    .tag(1)
            }
            .frame(maxWidth: .infinity) // 新增宽度约束
        } detail: {
            Text("This is detail")
        }
    }
}

添加这行代码后，TabView会自动适配侧边栏的宽度，不会再出现溢出问题。

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