Control of LongPressGesture-created element

I have been implementing the LongPressGesture to have a menu come up upon a long press. I love the functionality and it is very close to being where I want it to be.

I don't know if this is a visionOS-specific thing, but I am hoping to control the corner radius of the pulled-out element behind my "button." I've wrangled hover effects in the past with overlays, but I'm not sure what to target in this case.

Worst case, I'll have to change the border radius on all of my tiles to match this LongPressGesture-controlled behavior, or I could possibly change the radius onLongPressGesture to match.

Is there a simpler solution? Thanks!

Answered by Vision Pro Engineer in 807115022

Hey @tyler_waite,

You mentioned using LongPressGesture, but I'm wondering if contextMenu might suit your needs better. As called out in the documentation:

To customize the default preview, apply a contentShape(::eoFill:) with a contextMenuPreview kind. For example, you can change the preview’s corner radius or use a nested view as the preview.

Would the following approach work for your needs?

Text("On long press")
    .padding(20)
    .background(Color.white.opacity(0.5))
    .clipShape(.rect(cornerRadius: 2.0))
    .contentShape(.contextMenuPreview, .rect(cornerRadius: 2.0))
    .contextMenu {
        Button("Action 1", action: {})
    }

If not, can you provide more information as how you are using LongPressGesture?

Hope this helps,
Michael

Accepted Answer

Hey @tyler_waite,

You mentioned using LongPressGesture, but I'm wondering if contextMenu might suit your needs better. As called out in the documentation:

To customize the default preview, apply a contentShape(::eoFill:) with a contextMenuPreview kind. For example, you can change the preview’s corner radius or use a nested view as the preview.

Would the following approach work for your needs?

Text("On long press")
    .padding(20)
    .background(Color.white.opacity(0.5))
    .clipShape(.rect(cornerRadius: 2.0))
    .contentShape(.contextMenuPreview, .rect(cornerRadius: 2.0))
    .contextMenu {
        Button("Action 1", action: {})
    }

If not, can you provide more information as how you are using LongPressGesture?

Hope this helps,
Michael

Ah wow, I didn't realize that contextMenu was implicitly utilizing LongPressGesture! Now I can simplify things.

I applied

.contentShape(.contextMenuPreview, RoundedRectangle(cornerRadius: 25.0))

to my tile and that worked perfectly.

Thanks a ton. You all are doing awesome work with the frameworks behind the scenes; finally glad to be interacting with an extremely solid UI framework for spatial computing!

Control of LongPressGesture-created element
 
 
Q