なかなか意図通りに動かないので、シンプルに順番に試してみます。

まず、シンプルなボタン。

Button("orange") {
  print("clicked.") 
}

// → イベントは反応する

次は、オレンジ色を overlay します。

Button("orange") {
  print("clicked.") 
}
.overlay {
  Color.orange
}

// → 透過できない

上に被せると透過しないのか。

では、無色で。

Button("clear") {
  print("clicked.") 
}
.overlay {
  Color.clear
}

// → 透過できる

なるほど、無色の Color.clear は透過するのか。

では、opacity を付けると、

Button("orange - 0.5") {
  print("clicked.") 
}
.overlay {
  Color.orange
    .opacity(0.5)
}

// → 透過できない

なるほど、すなわち有色は透過しないということか。

続いて、overlay 側に frame でサイズ指定してみる。

Button("orange - 200x50 - 0.5") {
  print("clicked.") 
}
.overlay {
  Color.orange
    .frame(width: 200, height: 50)
    .opacity(0.5)
}

// → 透過できる

なんで透過するの ?

続いて、opacity を 0.6 に。

Button("orange - 200x50 - 0.6") {
  print("clicked.")
}
.overlay {
  Color.orange
    .frame(width: 200, height: 50)
    .opacity(0.6)
}

// → 透過できない

opacity も影響はする。

なら、modifier の順序を変えてみる。

Button("orange - 0.5 - 200x50") {
  print("clicked.")
}
.overlay {
  Color.orange
    .opacity(0.5)
    .frame(width: 200, height: 50)
}

// → 透過できない

...。

 

🤔 まとめ

どう考えたらいいのか分かりません !

同じ SwiftUI でも iOS と macOS で挙動も変わる模様。

本当は、ZStack や zIndex なども比較したかったのですが折れました。

関連ワード:  iOS・iPhone・mac・macOS・Swift・SwiftUI・今さら聞けない・開発