Reputation: 3708
I want to achieve a .buttonStyle(.card)
scrolling behaviour in custom button style in NavigationLink
.
NavigationLink {
Color.blue
} label: {
listItem(model: model)
}
.buttonStyle(
HomeCardStyle(onFocusChange: { isFocused in
if isFocused {
// My Custom Code
}
})
)
Button Style Code:
struct HomeCardStyle: ButtonStyle {
let onFocusChange: (Bool) -> Void
@Environment(\.isFocused) private var focused: Bool
func makeBody(configuration: Self.Configuration) -> some View {
configuration.label
.overlay(
Rectangle()
.stroke(
Color.yellow,
lineWidth: focused ? Constants.UI.Padding.xxSmall : Constants.UI.Padding.zero
)
.shadow(
color: focused ? .yellow : .clear,
radius: Constants.UI.Padding.xxxxxSmall,
x: Constants.UI.Padding.zero,
y: Constants.UI.Padding.one
)
)
.contentShape(Rectangle())
.padding(.horizontal, focused ? Constants.UI.Padding.default : Constants.UI.Padding.zero)
.scaleEffect(focused ? Constants.UI.Frame.homeFeaturedItemScaleMedium : Constants.UI.Frame.homeFeaturedItemScaleRegular)
.animation(.linear(duration: Constants.UI.AnimationDuration.indicator), value: focused)
.onChange(of: focused) { newValue in
onFocusChange(newValue)
}
}
}
I have a requirement to show a custom indicator that's why using a custom button style. So I have a horizontal list of the above as shown in the image below:
Now the problem is in the case of .buttonStyle(.card)
, the list automatically scrolls to the top when the focus comes to the NavigationLinks
.
But that is not working if I'm using a custom button style.
How I can achieve same behaviour?
Upvotes: 1
Views: 475