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

(2020/03/25 更新)

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

スポンサーリンク

環境

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

【Xcode】11.2.1
【Swift】5.1
【iOS】13.2.2
【macOS】Catalina バージョン 10.15.3

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

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

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

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

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

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

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

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

先程と全く同じ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の使い方
SwiftUIのデータバインディングの仕組みの一つである、@Stateについて解説します。
【SwiftUI】色の指定方法
SwiftUIでの色の指定方法を解説します。色の指定にはColor構造体を使用します。
【SwiftUI】画面の背景色指定
画面の背景色を指定する方法を解説します。UIKitではUIViewControllerのプロパティで設定しますが、SwiftUIではどうするのでしょうか?
SwiftUI
スポンサーリンク
スポンサーリンク
カピ通信

コメント