SwiftUI Tricks: Part 2

Continue for a series of articles about tips and tricks for SwiftUI.

Photo by Amza Andrei on Unsplash

It is hard to imagine application without buttons. Sometimes it is not obvious. any clickable link i.e. text or image or combination of both may be realised on top of button functionality power. In FitRadar user is interacting with application by pressing and clicking and pushing many UI elements expanding details about trainer, trainer’s rating, statistics and other information. Same for sport event which has many attributes and user can instantly get access to any of it.

Here is technical problem to solve: quite often you don’t want your UI element look like button (change color on press, etc). The most advised approach online would be to use custom button style PlainButtonStyle.

Button {
// do some logic
} label: {
// some fancy UI
}
.buttonStyle(PlainButtonStyle())

However, it’s still keep it’s visual effect as described in documentation

/// A button style that doesn't style or decorate its content while idle, but
/// may apply a visual effect to indicate the pressed, focused, or enabled state
/// of the button.

Here is trick to remove any visual or behavioural indication of a button. Let’s declare a custom style

struct NoneButtonStyle: ButtonStyle {
func makeBody(configuration: Self.Configuration) -> some View {
configuration.label
}
}

Now use where you want to keep functionality of a button yet keep it simple

Button {
// do some logic
} label: {
// some fancy UI
}
.buttonStyle(NoneButtonStyle())

That’s all for today. Join the waiting list at https://www.fitradar.me to be the first one to know when app released.

P.S. Text by Dmitrijs Beloborodvs

Leave a Reply

Your email address will not be published. Required fields are marked *