SwiftUIでViewを入れ替える方法

SwiftUIでViewを入れ替える方法
SwiftUIでViewを入れ替える方法

前回、ButtonでTextの文字を変更するやり方を解説しましたが、今回はView単位で入れ替える方法を解説いたします。

ここで紹介するやり方以外にもViewを入れ替える方法はあります。

ゴール

次の動画がゴールのイメージです。紫色とオレンジ色の部分のViewを固定されたボタンで切り替えます。

SwiftUIでViewを入れ替える
SwiftUIでViewを入れ替える

SwiftUIでViewを入れ替えるプログラム

swift
import SwiftUI

enum ContentState {
    case first
    case second
}

struct ContentView: View {
    @State var state: ContentState = .first
                
    var body: some View {
        ZStack {
           Color.green
                .ignoresSafeArea()

            VStack(spacing: 64) {
                switch state {
                case .first:
                    FirstView()
                case .second:
                    SecondView()
                }
                ButtonView(state: $state)
            }.padding()
       }

    }
}

struct FirstView: View {
    var body: some View {
        VStack() {
            Text("First").font(.system(size: 80)).bold()
        }.padding().background(Color.purple).foregroundColor(.white)
    }

}

struct SecondView: View {
    var body: some View {
        VStack() {
            Text("Second").font(.system(size: 80)).bold().foregroundColor(.white)
        }.padding().background(Color.orange)
    }
}

struct ButtonView: View {
    @Binding var state: ContentState
    var body: some View {
        HStack(spacing: 32)  {
            Button(action: {
                state = .first

            }, label: {
                Text("First").font(.system(size: 30)).foregroundColor(.white).bold()
            })
            Button(action: {
                state = .second

            }, label: {
                Text("Second").font(.system(size: 30)).foregroundColor(.white)
                    .bold()
            })
        }
        .padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

プログラムの解説

viewの状態を管理しやすいように enumContentState を宣言しました。ボタン部分は ButtonView で管理し、@BindingContentStateのプロパティ更新を通知できるようにしてます。また、全体の画面色は Zstack を使って変更してます。 ignoresSafeArea()を指定することで画面の隅から隅までの背景色を変更できます。

関連記事

最後までご覧いただきありがとうございます!

▼ 記事に関するご質問やお仕事のご相談は以下よりお願いいたします。
お問い合わせフォーム

関連記事