8.7 C
New York
Sunday, March 16, 2025

ios – The best way to type NavigationLink when pressed?


I am a newbie and i have been attempting to construct a safari app extension as my first venture.
I am attempting to customise the look of NavigationLink rows inside a listing when pressed.

Proper now, urgent every row seems to be like this:

enter image description here

It will get that darkish grey spotlight, and that i need to change it to one thing smoother.

The code for that view is split in two information, the HomeView and the FolderRowView. I am going to add each for context:

// HomeView snippet

    var physique: some View {
        NavigationStack {
            VStack(alignment: .main, spacing: 8) {
                
                HStack {
                    Textual content("Discover")
                        .font(.title2)
                    
                    Spacer()
                    
                    SortButton(isAscending: $isAscending) // Now correctly updates sorting
                }
                
                SearchBar(textual content: $searchText)
                    .padding(.vertical, 2)

                //under is the record with the NavigationLink
                Record(filteredFolders) { folder in
                    NavigationLink(vacation spot: DummyFolderDetailView(folder: folder)) {
                        FolderRowView(folder: folder)
                    }
                }
                .clipShape(RoundedRectangle(cornerRadius: 8))
                .navigationTitle("Folders")
            }
        }
    }
// Element FolderRowView

struct FolderRowView: View {
    let folder: Folder
    @State personal var isHovering = false
    
    var physique: some View {
        HStack {
            // Folder Icon
            Picture(systemName: "folder.fill")
                .resizable()
                .scaledToFit()
                .body(width: 18, peak: 18)
                .foregroundStyle(.grey)
            
            Spacer()
            
            // Folder Title
            Textual content(folder.title)
                .font(.physique)
                .body(maxWidth: .infinity, alignment: .main)
            
            // Chevron Icon
            Picture(systemName: "chevron.proper")
                .foregroundColor(.grey)
        }
        .padding(.vertical, 6)
        .padding(.horizontal, 10) // Added horizontal padding for area round content material
        .background(isHovering ? Colour.grey.opacity(0.1) : Colour.clear) // Non-obligatory background change on hover
        .scaleEffect(isHovering ? 1.05 : 1.0) // Zoom-in impact
        .cornerRadius(8)
        .animation(.easeInOut(period: 0.2), worth: isHovering) // Clean animation
        .onHover { hovering in
            isHovering = hovering
        }
        .contextMenu { //(...)

In order you possibly can see i already efficiently added on hover styling and animation to the rows by working contained in the element file.
I understand that customizing the on press type is a little more sophisticated than that!

I attempted:

  • .onTapGesture with @State personal var isPressed = false within the element file, which confirmed up on press accurately, however interfered with the NavigationLink click on in a means the motion was now not actioning 🙂

  • Made a 3rd element file CustomStyle containing view struct PressableStyle: ButtonStyle that was then added as a modifier to the NavigationLink as .buttonStyle(PressableStyle()) but it surely did not actually do something..

  • ChatGPT steered i attempt making a element view FolderRowLink that calls the FolderRowView, nests it inside a button, and embeds a hidden NavigationLink triggered by the button. Then within the HomeView i would solely should name that FolderRowLink view within the record. I attempted this but it surely has the identical end result as the primary strategy, the place the brand new on press type exhibits up however clicking would not motion.


I perceive the spotlight colour utilized by default within the on press is the accentColor, however i’ve bumped into some points with it the place .foregroundStyle(.accent) calls my Belongings.xcassets AccentColor, however .foregroundStyle(Colour.accentColor) calls a darkish grey (the one exhibiting on press by default) and including type modifiers to the NavigationLink would not work both.

Total i assume i simply need to know whether or not styling that is attainable, and the way do you guys do it?

Related Articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Latest Articles