サイトロゴ

SwiftUIでViewを入れ替える方法

著者画像
Toshihiko Arai
投稿日: 2022-12-27

はじめに

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

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

ゴール

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

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

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

関連記事