😺

[SwiftUI] contextMenu modifier タップしたViewの背景色を消す方法

2024/04/09に公開

Problem

Context Menuを表示するために、viewをタップするが、アニメーション中viewの周りに背景色が付いている。特にviewに角丸が付いている時などで目立つ。

HStack {
    Circle()
        .fill(Color.blue)
        .frame(width: 64, height: 64)
        .contextMenu {
            Button{
            } label: {
                Text("Action")
            }
        } preview: {
            Rectangle()
                .fill(Color.blue)
                .frame(width: 128, height: 128)
        }
}

Solution

.contentShape(.contextMenuPreview, .circle)modifierを利用する。

HStack {
    Circle()
        .fill(Color.blue)
        .frame(width: 64, height: 64)
        .contentShape(.contextMenuPreview, .circle) // 追加
        .contextMenu {
            Button{
            } label: {
                Text("Action")
            }
        } preview: {
            Rectangle()
                .fill(Color.blue)
                .frame(width: 128, height: 128)
        }
}

Discussion