Help us understand the problem. What is going on with this article?

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

本記事は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 @MaShunzhe

:page_facing_up: 私の公開されているiOSの記事のリストをカテゴリー別にご覧いただけます (45)

:sparkles: 私が公開したすべてのQiitaプログラミング記事を読むのに使えるApp Clipを作成しました。お持ちのiPhoneからこのコードをスキャンして閲覧できます。

MaShunzhe
、😎ソフトウェアエンジニア、#Swift #iOS, 👨🏼‍💻 #WWDC Scholarship 17/18、U^ェ^U
https://mszmagic.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away