（2020/10/24 更新）
特定の条件によってViewの見た目を変える方法を紹介します。
環境
この記事の情報は次のバージョンで動作確認しています。
【Swift】5.3
【iOS】14.0
【macOS】Catalina バージョン 10.15.6
if条件を使用してViewを変える
ボタンをクリックすると背景色が変わるサンプルソースです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
struct ContentView: View { @State private var useYellowBackground = false var body: some View { ZStack{ /// useYellowBackgroundがtrueの場合背景色を黄色にする if useYellowBackground { Color(.yellow) } else { Color(.white) } /// ボタンが押されたらuseYellowBackgroundフラグを反転する Button("背景色変更") { self.useYellowBackground.toggle() } } } } |
useYellowBackgroundフラグの値をif条件で判断し、背景色を設定します。trueの場合は黄色、falseの場合は白色。
「背景色変更」ボタンをクリックすると、useYellowBackgroundフラグの内容が反転します。
SwiftUIでは@Stateで宣言されたプロパティの変更を監視し、bodyプロパティが再呼び出しされます。
この為、useYellowBackgroundプロパティが変更されるたびに、背景色がすぐに更新されます。
三項演算子による条件付きView
三項演算子を使うと、Viewの挙動を、より簡単に変えられます。
先程のソースのif文は、次のように１行に置き換えられます。
|
1 2 3 4 |
// useYellowBackgroundがtrueの場合背景色を黄色にする Color(useYellowBackground ? .yellow : .white) |
if条件による分岐でエラーになるケース
先程と全く同じif条件を使っても、エラーになるケースがあります。
ケース１
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
struct ContentView: View { @State private var useYellowBackground = true var body: some View { if self.useYellowBackground { Color(.yellow) } else { Color(.white) } } } |
次のエラーが発生する
Function declares an opaque return type, but has no return statements in its body from which to infer an underlying type
（関数は不透明な戻り値の型を宣言していますが、基本的な型を推測するためのreturnステートメントがありません。）
ケース２
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
struct ContentView: View { @State private var useYellowBackground = true var body: some View { ForEach(1..<5, id: \.self) { index in if self.useYellowBackground { Color(.yellow) } else { Color(.white) } } } } |
次のエラーが発生する
Unable to infer complex closure return type; add explicit type to disambiguate
（複雑なクロージャーの戻り値の型を推測できません。明確にするために明示的な型を追加してください。）
回避方法
いずれのケースもSwiftUIは型が明確なViewが返ってくる事を期待していますが、if条件を使う事でその前提がくずれてしまいます。
このような場合は、次のようにif条件全体をGruop{}で囲むと解決できます。
Group型という型が明確なViewになるわけです。
|
1 2 3 4 5 6 7 8 9 |
Group { if self.useYellowBackground { Color(.yellow) } else { Color(.white) } } |
最後に
特定の条件でViewの見た目を変える方法として、if条件分岐と、三項演算子を使った例を紹介しました。
状況によって使い分けると良いでしょう。
あわせて読みたい記事
