Section Fully Clickable in SwiftUI – NavigationLink Issue

Question

DanDudeDev OP

Created 1d

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

1d

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