CODEWITHSUNDEEP
iosswiftuiipados
Nicolapps
Nicolapps

Reputation: 988

SwiftUI: How to apply .clipShape to .hoverEffect?

I’m using the .hoverEffect modifier. It adds an hover effect to my button when users have their mouse/trackpad pointer on it:

import SwiftUI

struct ContentView: View {
    var body: some View {
        Button("Hello world") {
            // Action…
        }
        .padding()
        .background(Color.blue)
        .foregroundColor(.white)
        .hoverEffect(.lift) // ← Hover effect
        .clipShape(Capsule())
    }
}

However, when I apply a clip shape to the button (e.g. RoundedRectangle or Capsule), the view is clipped but the hover effect isn’t.

Button with a hover effect

How can I have a hover effect that matches the shape of the button?

Upvotes: 3

Views: 1383

Answers (2)

Akivili Collindort
Akivili Collindort

Reputation: 11

In SwiftUI, the order of modifier can change the view's behaviour, if you want to solve this problem, make sure the .hoverEffect(:_) used after clipShape.

use the code below instead:

// declarations...
.clipShape(Capsule())
.hoverEffect(.lift)

Upvotes: 1

MutatingFunc
MutatingFunc

Reputation: 51

Use .contentShape(Capsule()) to change the shape of the hover effect to match your clipShape. Note that this modifier also affects the hit testing area, which is probably desirable in most examples similar to your own.

Upvotes: 2

Related Questions