Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ContextMenu on a rounded LinearGradient produces sharp edges in SwiftUI

I have the following view:

struct ContentView: View {
    var body: some View {
        LinearGradient(gradient: Gradient(colors: [.blue, .red]), startPoint: .topTrailing, endPoint: .bottomLeading)
            .cornerRadius(16)
            .frame(width: 140, height: 140)
            .contextMenu {
                Button("", action: {})
            }
    }

}

However, when the ContextMenu is invoked, the edges are not rounded:

enter image description here

I've tried several things, such as:

  • Applying the clipShape modifier to clip it to a RoundedRectangle
  • Wrapping the gradient as the background of a RoundedRectangle view
  • Using a Color instead of a LinearGradient (which works as expected, but not what I need)

However none work. Any advice would be appreciated, thanks!

like image 491
Richard Robinson Avatar asked Jul 05 '20 14:07

Richard Robinson


1 Answers

Add the following code after .frame(...):

.contentShape(RoundedRectangle(cornerRadius: 16, style: .continuous))
like image 145
Reed Avatar answered Oct 18 '22 23:10

Reed