SwiftUI の Divider に透明度のある色を設定する

こんにちは、亀山です。みなさん SwiftUI は使っていますでしょうか。

最近は feather for Mastodon でテーマ対応を行っています。ダークテーマだけでなく、多様なテーマをユーザーが選べることで、視認性の向上だけでなく、より自分のものという親しみが持てるようになります。しかし、SwiftUI は意外と融通が効かず、意図した色が簡単に指定できないことがあります。今回は Divider に色が反映されなかった現象についての紹介と対処法について説明します。

デフォルト

Divider()

とすると、デフォルトの灰色の線が表示されます。

うまくいかない方法

Divider()
    .foregroundColor(.red)

foregroundColor で設定した色は反映されません。同様に、tint(.red) も反映されません

Divider().overlay(.red)

overlay で設定した色は反映されます。

しかし、実は元の色がのこっているため、ここに透明度のある色を指定すると灰色と混ざった色となってしまいます。

Divider().overlay(.red.opacity(0.1))

灰色になりました。

解決法

Divider()
    .opacity(0)
    .overlay(.red.opacity(0.1))

opacity(0) を付けて元の色を消すことで指定した色がそのまま表示できます。

下記のようなコードでも同じことができますが、Divider だと HStack や VStack に関わらず使えるので便利です。

Color.red
    .frame(height: 0.5)
    .frame(maxWidth: .inifinity)