I’ve got a grid of icons laid out as 2 icons per row. Each icon is a NavigationLink that leads to the appropriate view. The problem is any view that I link to is forced to use the same width as the icon that links to it. I want the linked view to occupy the full screen.

Here’s the HomeView which contains the grid of icons (right now it only contains one icon).

struct HomeView: View {
    
    let columns = [
        GridItem(.adaptive(minimum: 150))
    ]
    
    var body: some View {
        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])
        }
    }
}

When you tap on Create Workout, the WorkoutListView is constrained to the same width as the Create Workout icon.

struct WorkoutListView: View {
    @StateObject private var viewModel = ViewModel()
    
    var body: some View {
        List {
            ForEach(viewModel.workoutList) { workout in
                NavigationLink {
                    CreateWorkoutView(workoutId: workout.WorkoutId)
                } label: {
                    Text(workout.WorkoutName)
                }
            }
        }
        .listStyle(PlainListStyle())
        .onAppear {
            Task {
                let hashString = "a"
                
                await viewModel.getWorkouts(hashString: hashString)
            }
        }
    }
}

If you tap on a workout in WorkoutListView, the CreateWorkoutView it points to is also constrained to the width of the grid icon from HomeView. How do I get these child views to occupy the full screen?

>Solution :

NavigationView should be at the very top not inside the grid.