SwiftUI NavigationLink无法占满屏幕宽度且跳转非全屏问题求助

问题根因 #

1. NavigationView放在根视图时NavigationLink标签宽度不足：是因为List默认样式自带cell边距，且NavigationLink的label未设置撑满宽度的约束。
2. NavigationView放在子视图时跳转页面不全屏：是因为NavigationView本身的布局范围被限制在子视图的frame内，push出来的页面只能在NavigationView的范围内展示。

解决方案 #

不需要强制使用fullScreenCover，优先保留根视图的NavigationView做导航栈管理，对现有代码做少量修改即可满足两个需求：

方案1：基于现有导航栈修改（推荐）

修改后完整代码如下：

struct ContentView: View {
    var body: some View {
        NavigationView {
            VStack {
                ListView()
                Text("Tabs here")
            }
        }
        // iOS 16+ 可以替换为NavigationStack，写法兼容
        // NavigationStack {
        //     VStack {
        //         ListView()
        //         Text("Tabs here")
        //     }
        // }
    }
}

struct ListView: View {
    var body: some View {
        List {
            NavigationLink(
                destination: Text("detail for item1")
                    // 目标页面占满全屏，需要隐藏导航栏可加下面这行
                    // .navigationBarHidden(true)
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
                    .background(.white),
                label: {
                    Text("item1")
                        // 标签撑满整个cell宽度，左对齐
                        .frame(maxWidth: .infinity, alignment: .leading)
                        // 保证整个宽度区域都能响应点击
                        .contentShape(Rectangle())
                }
            )
            NavigationLink(
                destination: Text("detail for item2")
                    // .navigationBarHidden(true)
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
                    .background(.white),
                label: {
                    Text("item2")
                        .frame(maxWidth: .infinity, alignment: .leading)
                        .contentShape(Rectangle())
                }
            )
        }
        // 移除List默认的分组边距
        .listStyle(.plain)
    }
}

方案2：使用fullScreenCover模态跳转

如果你需要完全的模态全屏跳转效果，不需要保留导航栈的返回手势上下文，可以用这个方案：

struct ContentView: View {
    @State private var selectedItem: String?
    @State private var showDetail = false
    
    var body: some View {
        VStack {
            ListView(selectedItem: $selectedItem, showDetail: $showDetail)
            Text("Tabs here")
        }
        .fullScreenCover(isPresented: $showDetail) {
            if let item = selectedItem {
                // 全屏详情页，自行添加关闭按钮
                VStack {
                    Button("关闭") {
                        showDetail = false
                    }
                    Text("detail for \(item)")
                }
                .frame(maxWidth: .infinity, maxHeight: .infinity)
                .background(.white)
            }
        }
    }
}

struct ListView: View {
    @Binding var selectedItem: String?
    @Binding var showDetail: Bool
    
    var body: some View {
        List {
            Button {
                selectedItem = "item1"
                showDetail = true
            } label: {
                Text("item1")
                    .frame(maxWidth: .infinity, alignment: .leading)
            }
            Button {
                selectedItem = "item2"
                showDetail = true
            } label: {
                Text("item2")
                    .frame(maxWidth: .infinity, alignment: .leading)
            }
        }
        .listStyle(.plain)
    }
}

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