WidgetでImageにcornerRadiusを指定すると画像が表示されない
ようやく最近、SwiftUI に入門して Widget 開発をしています。
そのなかで問題にぶちあたったのでその内容と回避方法（自分では未検証）を紹介しておきます。
環境
- Xcode v12.2
- macOS Catalina
問題
画像を表示する時に、リサイズをして角丸で表示したい！というのはよくあることだと思います。
SwiftUI では以下のようにできるはずです
Image("image_name")
.resizable()
.scaledToFill()
.frame(width: 100, height: 50)
.cornerRadius(5)
実際これでできます。
Widgetじゃなければ
そう、Widgetだとこのコードで表示させようとすると画像が消えるのです。
cornerRadius() 部分を外すと表示されるようになります。
原因
どうやら Xcode v12.1 以上でかつ、macOS Big Sur ではない場合に発生する謎現象のようです。
上記組み合わせの場合 cornerRadius 以外にもいくつか正常に動作しないものがあるらしいです。
ただし、Preview や Simulator で発生する現象のようで、実機で確認すると正常に表示されます。
回避策
原因に上げた組み合わせが問題なので、それを解消したら行けそうです。
- macOS Big Sur にアップグレードをする
- Xcode 12.0 をつかう
OSをアップグレードするのが順当かと思います。
個人的にBig Surは UI が結構変わるのでビビってまだアップグレードしていないですし、
検証のためだけにいまさら Xcode 12.0 を落としてきてはいないので、自分では確認はしていないですが、
この問題が声高に語られてない（笑）ので、おそらく Big Sur 環境下では問題ないはずです。
もしどっちも絶対に嫌だというなら、見えてないことに目をつぶって心眼でみつつ、要所で実機で確認するという開発スタイルをするしかなさそうです。。