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:
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 theNavigationLink
click on in a means the motion was now not actioning 🙂 -
Made a 3rd element file
CustomStyle
containingview struct PressableStyle: ButtonStyle
that was then added as a modifier to theNavigationLink
as.buttonStyle(PressableStyle())
but it surely did not actually do something.. -
ChatGPT steered i attempt making a element view
FolderRowLink
that calls theFolderRowView
, nests it inside a button, and embeds a hiddenNavigationLink
triggered by the button. Then within theHomeView
i would solely should name thatFolderRowLink
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?