Section Fully Clickable in SwiftUI – NavigationLink Issue

Question

DanDudeDev OP

Created Jul ’24

Replies 1

Boosts 0

Participants 2

Hi everyone,

I’m having an issue with SwiftUI where my entire Section becomes clickable, instead of just the “Edit profile” button. Here’s my code:

     VStack(alignment: .center) {
        KFImage(authManager.user?.photoURL)
            .resizable()
            .scaledToFill()
            .frame(width: 80, height: 80)
            .clipShape(Circle())
        
        Text(authManager.user?.displayName ?? "")
            .font(.system(.title, design: .rounded))
        
        Text(authManager.user?.email ?? "")
            .font(.subheadline)
            .foregroundColor(.gray)
        
        NavigationLink {
            EditProfileView()
        } label: {
            Text("Edit profile")
                .frame(minWidth: 0, maxWidth: .infinity)
                .font(.system(size: 18))
                .padding(10)
                .foregroundColor(.white)
                .background(Color.blue)
                .cornerRadius(25)
        }
        .padding(.top, 5)
    }
    .frame(maxWidth: .infinity, alignment: .center)
}

I want only the button to be clickable. How can I fix this?

Thanks!

Link to issue: https://imgur.com/a/iO9aNSM

Answered by Vision Pro Engineer in 794675022

One option here is to use the .navigationDestination(isPresented: , destination:) modifier instead of using a NavigationLink with a destination.

 NavigationStack {
  List {
    Button("Edit Profile") {
     isPresented = true
   }
   .buttonStyle(.borderless) 
   .frame(minWidth: 0, maxWidth: .infinity)
   .font(.system(size: 18))
   .padding(10)
   .foregroundColor(.white)
   .background(Color.blue)
   .cornerRadius(25)
  }
  .listStyle(.insetGrouped)
 .navigationDestination(isPresented: $isPresented) {
     Text("destination")
 }
}

Boost

Answer 1

Vision Pro Engineer OP

Apple

Jul ’24

Accepted Answer

One option here is to use the .navigationDestination(isPresented: , destination:) modifier instead of using a NavigationLink with a destination.

 NavigationStack {
  List {
    Button("Edit Profile") {
     isPresented = true
   }
   .buttonStyle(.borderless) 
   .frame(minWidth: 0, maxWidth: .infinity)
   .font(.system(size: 18))
   .padding(10)
   .foregroundColor(.white)
   .background(Color.blue)
   .cornerRadius(25)
  }
  .listStyle(.insetGrouped)
 .navigationDestination(isPresented: $isPresented) {
     Text("destination")
 }
}

0

	VStack(alignment: .center) {
	KFImage(authManager.user?.photoURL)
	.resizable()
	.scaledToFill()
	.frame(width: 80, height: 80)
	.clipShape(Circle())

	Text(authManager.user?.displayName ?? "")
	.font(.system(.title, design: .rounded))

	Text(authManager.user?.email ?? "")
	.font(.subheadline)
	.foregroundColor(.gray)

	NavigationLink {
	EditProfileView()
	} label: {
	Text("Edit profile")
	.frame(minWidth: 0, maxWidth: .infinity)
	.font(.system(size: 18))
	.padding(10)
	.foregroundColor(.white)
	.background(Color.blue)
	.cornerRadius(25)
	}
	.padding(.top, 5)
	}
	.frame(maxWidth: .infinity, alignment: .center)
	}

	NavigationStack {
	List {
	Button("Edit Profile") {
	isPresented = true
	}
	.buttonStyle(.borderless)
	.frame(minWidth: 0, maxWidth: .infinity)
	.font(.system(size: 18))
	.padding(10)
	.foregroundColor(.white)
	.background(Color.blue)
	.cornerRadius(25)
	}
	.listStyle(.insetGrouped)
	.navigationDestination(isPresented: $isPresented) {
	Text("destination")
	}
	}