Swift初心者がSwiftUIのみでページメニューもどきを作ってみた

<div class="hcb_wrap">
<pre class="prism line-numbers lang-swift" data-lang="Swift"><code>//
//  ContentView.swift
//  PageMenuView
//
//  Created by Assy on 2021/10/03.
//

import SwiftUI

struct ContentView: View {
    
    //列挙体（画面遷移する画面を作成、ここでは３つ）
    enum display {
        case first
        case second
        case third
    }
    
    //表示する画面の初期値
    @State var displayMode = display.first
    
    //ページメニューのボタンとViewを紐付けするプロパティ
    @State var page1 = true
    @State var page2 = false
    @State var page3 = false
    
    var body: some View {
        
        VStack {
            ScrollView (.horizontal, showsIndicators: false){
                HStack{
                    
                    //１つ目のボタン
                    Button(action: {
                        displayMode = display.first
                        self.page1 = true
                        self.page2 = false
                        self.page3 = false
                        
                    }) {
                        if page1 == true {
                            SelectedMenu("ページ１")
                        } else if page1 == false {
                            unSelectedMenu("ページ１")
                        }
                    }
                    
                    //２つ目のボタン
                    Button(action: {
                        displayMode = display.second
                        self.page1 = false
                        self.page2 = true
                        self.page3 = false
                    }) {
                        if page2 == true {
                            SelectedMenu("ページ２")
                        } else if page2 == false {
                            unSelectedMenu("ページ２")
                        }
                    }
                    
                    //３つ目のボタン
                    Button(action: {
                        displayMode = display.third
                        self.page1 = false
                        self.page2 = false
                        self.page3 = true
                    }) {
                        if page3 == true {
                            SelectedMenu("ページ３")
                        } else if page3 == false {
                            unSelectedMenu("ページ３")
                        }
                    }
                }
            }
        }
        
        Spacer()
        
        //条件分岐で画面を切り替え
        if displayMode  == display.first {
            FirstView(viewMode: $page1)
        } else if displayMode == display.second {
            SecondView(viewMode: $page2)
        } else if displayMode == display.third {
            ThirdView(viewMode: $page3)
        }
    }
}

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

//選択ボタンの表示
struct SelectedMenu : View{
    let menu:String
    
    init(_ text:String){
        self.menu = text
    }
    
    var body: some View{
        Text(self.menu)
            .foregroundColor(Color.white)
            .fontWeight(.heavy)
            .padding(.horizontal, 15)
            .padding(.vertical, 5)
            .background(Color.red)
            .clipShape(Capsule())
    }
}

//非選択ボタンの表示
struct unSelectedMenu : View{
    let menu:String
    
    init(_ text:String){
        self.menu = text
    }
    
    var body: some View{
        Text(self.menu)
            .foregroundColor(Color.white)
            .padding(.horizontal, 10)
            .padding(.vertical, 2)
            .background(Color.blue)
            .clipShape(Capsule())
    }
}

//画面１
struct FirstView: View {
    @Binding var viewMode: Bool
    var body: some View {
        Text("FirstView")
        Spacer()
    }
}

//画面２
struct SecondView: View {
    @Binding var viewMode: Bool
    var body: some View {
        Text("SecondView")
        Spacer()
    }
}

//画面３
struct ThirdView: View {
    @Binding var viewMode: Bool
    var body: some View {
        Text("ThirdView")
        Spacer()
    }
}</code></pre>
</div>