LoginSignup
3
2

More than 3 years have passed since last update.

SwiftUI初心者向け:ビューコンポーネントを条件に応じて表示し、ビューモディファイアを設定する

Last updated at Posted at 2020-11-25

本記事はSwiftUIプログラミングの初心者に向けたものです。次についてお話しします:

  • インラインの条件ステートメントを使う
  • 条件に応じてビュー要素が表示されるように条件ステートメントを使う
  • ビューモディファイア(フォント .font、パディングなど .padding)に条件ステートメントを使う

画面にどの要素が表示されるかを簡単にコントロールできるのは、SwiftUIの最も素晴らしい機能のひとつだと思います。

インライン条件ステートメント

インライン条件ステートメントを使うことができます。例えば、サインインしていないユーザーには「あなたはサインインしていません」、サインイン済みのユーザーには「サインインしました」と表示されるようにできます。

Text(isSignedIn ? "サインインしました" : "あなたはサインインしていません")

構文は以下のとおりです:

[条件] ? [条件が真の場合の表現] : [条件が偽の場合の表現]

ビューコンポーネントを条件に応じて表示する

ビュー要素を条件に応じて表示することもできます。例えば、ユーザーがサインインしていなかったら、サインボタンを表示するようにできます。

struct ContentView: View {

    @State var isSignedIn: Bool

    var body: some View {
        if !isSignedIn {
            SignInWithAppleButton(...)
        }
    }

}

条件に応じたビューモディファイア

また、入力付きのビューモディファイアを作成することもできます。View にエクステンションを追加できます。

extension View {
    @ViewBuilder
    func redacted(showPlaceholder: Bool) -> some View {
        if showPlaceholder {
            self
                .redacted(reason: .placeholder)
        } else {
            self
                .unredacted()
        }
    }
}

これで、自作のビューモディファイアを条件に応じてコールできます:

WeatherView(weatherInformation: $weatherInformation)
    .redacted(showPlaceholder: (weatherInformation == nil))

条件付きビュー修飾子を使用することで、一定の条件を満たした場合にのみビューにアニメーションを適用することもできます。こちらの以前のQiita記事で、それについて説明しています。


:relaxed: Twitter @MszPro

:sunny: 私の公開されているQiita記事のリストをカテゴリー別にご覧いただけます。

3
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
2