【SwiftUI】条件によってViewの見た目を変える方法

(2020/10/24 更新)

特定の条件によってViewの見た目を変える方法を紹介します。

スポンサーリンク

環境

この記事の情報は次のバージョンで動作確認しています。

【Xcode】12.0
【Swift】5.3
【iOS】14.0
【macOS】Catalina バージョン 10.15.6
スポンサーリンク

if条件を使用してViewを変える

ボタンをクリックすると背景色が変わるサンプルソースです。

useYellowBackgroundフラグの値をif条件で判断し、背景色を設定します。trueの場合は黄色、falseの場合は白色。
「背景色変更」ボタンをクリックすると、useYellowBackgroundフラグの内容が反転します。

SwiftUIでは@Stateで宣言されたプロパティの変更を監視し、bodyプロパティが再呼び出しされます。
この為、useYellowBackgroundプロパティが変更されるたびに、背景色がすぐに更新されます。

スポンサーリンク

三項演算子による条件付きView

三項演算子を使うと、Viewの挙動を、より簡単に変えられます。

先程のソースのif文は、次のように1行に置き換えられます。

スポンサーリンク

if条件による分岐でエラーになるケース

本章のエラーケースはXcode11で発生していたものです。
Xcode12以降では発生しませんが、情報として残しておきます。

先程と全く同じif条件を使っても、エラーになるケースがあります。

ケース1

次のエラーが発生する
Function declares an opaque return type, but has no return statements in its body from which to infer an underlying type
(関数は不透明な戻り値の型を宣言していますが、基本的な型を推測するためのreturnステートメントがありません。)

ケース2

次のエラーが発生する
Unable to infer complex closure return type; add explicit type to disambiguate
(複雑なクロージャーの戻り値の型を推測できません。明確にするために明示的な型を追加してください。)

回避方法

いずれのケースもSwiftUIは型が明確なViewが返ってくる事を期待していますが、if条件を使う事でその前提がくずれてしまいます。
このような場合は、次のようにif条件全体をGruop{}で囲むと解決できます。
Group型という型が明確なViewになるわけです。

スポンサーリンク

最後に

特定の条件でViewの見た目を変える方法として、if条件分岐と、三項演算子を使った例を紹介しました。
状況によって使い分けると良いでしょう。

スポンサーリンク

あわせて読みたい記事

【SwiftUI】@Stateの使い方
(2020/11/28 更新)SwiftUIのデータバインディングの仕組みの一つである、@Stateについて解説します。プロパティが更新された場合に、参照しているViewも同時に更新される仕組みが実現できます。その他のデータバインデ...
【SwiftUI】色の指定方法(Color)
(2020/8/13 更新)SwiftUIでの色の指定方法を解説します。色の指定にはColor構造体を使用します。
【SwiftUI】画面の背景色指定
画面の背景色を指定する方法を解説します。UIKitではUIViewControllerのプロパティで設定しますが、SwiftUIではどうするのでしょうか?