NavigationLink跳转视图宽度受限，如何设置为全屏显示？

问题根源在于你把NavigationView嵌套在了LazyVGrid的单个网格项内部，这会让整个导航栈的宽度被网格项的尺寸限制死，后续所有跳转的子视图都会继承这个窄宽度。

只需要把NavigationView移到HomeView的最外层，作为整个视图的根容器即可解决：

struct HomeView: View {
    
    let columns = [
        GridItem(.adaptive(minimum: 150))
    ]
    
    var body: some View {
        NavigationView { // 将NavigationView移至此处作为根视图
            ScrollView {
                LazyVGrid(columns: columns) {
                    // 移除原网格项内嵌套的NavigationView
                    NavigationLink {
                        WorkoutListView()
                    } label: {
                        VStack {
                            Image(systemName: "figure.run.square.stack.fill")
                                .resizable()
                                .scaledToFit()
                                .frame(width: 100, height: 100)
                                .padding()
                            VStack {
                                Text("Create Workout")
                                    .font(.headline)
                                    .foregroundColor(.white)
                            }
                            .padding(.vertical)
                            .frame(maxWidth: .infinity)
                            .background(Color(red: 0.2, green: 0.2, blue: 0.3))
                        }
                        .clipShape(RoundedRectangle(cornerRadius: 10))
                        .overlay(
                            RoundedRectangle(cornerRadius: 10)
                                .stroke(Color(red: 0.2, green: 0.2, blue: 0.3))
                        )
                    }
                }
                .padding([.horizontal, .bottom])
            }
        }
    }
}

修改后，导航栈的宽度会自适应屏幕尺寸，WorkoutListView和CreateWorkoutView无需任何改动，就能自动占满整个屏幕宽度。

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