🎨

Color.clearをそのままViewで使うときに気をつけること

2024/04/19に公開1

問題

タッチイベントなどの都合で任意のViewに透明なViewを重ねたいときに以下のように書いたら、Color.whiteColor.clearで挙動が変わることに気づいた。

具体的には、clearのときにはそもそもその大きさのViewが存在しない。
(なので、おそらくheightをつけるとうまくいきそうではある)

    ZStack(alignment: .leading) {
        content
        Color.clear
            .frame(width: 8.0)
            .frame(maxHeight: .infinity)
    }

解決策

Colorでやる必要もないけど愚直にやるならこんな感じ。
高さは可変のまま行きたいので、限りなく透明な色付きのViewにして解決した。

    Color.white
        .opacity(Double.leastNonzeroMagnitude)
        .frame(width: 8.0)
        .frame(maxHeight: .infinity)

Discussion

Tài LêTài Lê
    ZStack(alignment: .leading) {
        content
        Color.clear
            .contentShape(Rectangle())
    }

@yagijin san
Another tip, because you embed code inside ZStack, just add contentShape enough in this case.
I don't know Janapnese so please translate my comment :D