Hover effect not working on standard buttons

Question

Created Apr ’24

Replies 2

Boosts 0

Participants 2

I have an iPhone app that I have a visionOS destination. It seems to run just fine, but I can't get the normal visionOS hover effects to work on any of my controls. I'm talking about the usual highlight effect to indicate which control you are looking at, nothing special.

I'm using standard control, I think. Some of the standard control, like the back button on the navigation stack and the tab icons for my tab view. But none of the standard button highlight.

Here's a navigation bar button, for example.

			.toolbarBackground(.visible, for: .navigationBar)
			.navigationBarItems(
				trailing:
					Button(action: addSketch, label: toolbarAddIcon)
			)

The label function just supplies a standard icon.

//Standard + icon for Add items to list.
func toolbarAddIcon() -> some View
{
	Image(systemName: "plus.circle")
		.resizable()
		.frame(width: roundIconDia, height: roundIconDia)
		.padding([.leading, .trailing], 20)
}

So this icon does not highlight, even though the back button does. I've tried many combination of adding a .hoverEffect() modifier, but to no avail. According to the WWDC23 video, I shouldn't have to do anything.

What I am overlooking?

Boost

Answer 1

barisbakirli OP

Apr ’24

If you want to use VisionOS' standard highlight effects in your iPhone app, you may need to configure the controls in SwiftUI correctly. Standard UIKit controls usually provide hover effects automatically, but some additional steps may be required to achieve these effects in SwiftUI. Here are some points to consider in this regard:

Using Button Control: When using Button in SwiftUI, you can use buttonStyle modifier to achieve the highlighting effect. For example:

Button(action: addSketch) { Image(systemName: "plus.circle") .resizable() .frame(width: roundIconDia, height: roundIconDia) .padding([.leading, .trailing], 20) } .buttonStyle(.plain) // Plain button style is used for highlighting effect

The standard highlight effect can be achieved by specifying buttonStyle(.plain).

If you use controls on the navigation stack, such as the back button or tab view, with NavigationLink, you will automatically get the highlight effect. However, if you are customizing buttons, you may need to use the buttonStyle modifier.

Some controls in SwiftUI, specifically buttons (Button) and navigation links (NavigationLink), provide automatic highlighting effects. However, if you are using some customized button styles or controls, you can specify visual behaviors using modifiers like buttonStyle or onChange.

The hover effect is typically triggered by user touch or mouse interaction. Be sure to use appropriate icon and color combinations to ensure your controls are highlighted.

In SwiftUI, the hoverEffect() modifier is used to determine how the control behaves when the user hovers over it. However, it may be more effective to use the buttonStyle() or onChange() modifiers directly for the highlighting effect.

0

Answer 2

johnSOS OP

Apr ’24

The button style did not help. The text and system image were both rendered in blue. They both turned black when I added the .plain style, so it was having an effect. I also tried setting the style to .automatic, which turned it back to blue, but that is the default, so no surprise there. That should be no different than having no button style.

When I navigate to a detail screen the Back button is rendered in blue and it has the hover effect, so I just don't see what is different about my toolbar buttons and the system generated back button.

Also, my regular buttons in the content view are defined like this:

				Button("Remote Control", action: showManualControl)

Isn't that as standard as you can get?

0