Swift「ハーフモーダルビュー」を作る~備忘録~

ハーフモーダルビューとは現在のビューに重なるように表示されるビューです。一時的にシーンを移行して表示されるビューであり、下へのスワイプで元のビューに戻ります。
3回ハーフモーダルが出現するとcheckというボタンがグレイアウトする処理を書きます。1.checkを押すと
![スクリーンショット 2021-06-16 1.25.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/826735/d24fd462-1721-0501-092d-bba457ef942a.png)

2.ハーフモーダルが飛び出ます
![スクリーンショット 2021-06-16 1.25.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/826735/e5cc4fa3-a115-7d3c-2544-e70b9ec7dbc7.png)

1~2を繰り返すとcheckボタンがグレイアウトします。
![スクリーンショット 2021-06-16 1.26.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/826735/93c5a66a-355c-e295-5de1-b0723a203045.png)


#全体のコード


```swift
//
//  ContentView.swift
//  Shared
//
//  
//

import SwiftUI

struct ContentView: View {
    @State var isModal:Bool = false
    @State var count:Int = 0
    var body: some View {
        VStack {
            Button(action: {
                isModal = true
            }){
                Text("check")
            }
            //isMOdaleがButtonを押したことでtrueになりSomeViewが閉じたタイミングでcountUp関数が実行される。
            .sheet(isPresented: $isModal, onDismiss: {countUp()}) {
                SomeView()
            }
            .disabled(count >= 3)//3回表示したらボタンを無効(グレイアウト)にする。
            Text("回数:\(count)")
                .font(.title)
                .padding()
        }
    }
    //countをupする関数。ハーフモーダルが閉じたタイミングで実行される。
    func countUp(){
        count += 1
    }
}


struct SomeView: View {
    var body: some View {
        Text("飛び出てジャジャン")
    }
}

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



```


#1.フラグとなるBool型のisModdalとInt型のcountを定義します。
isModalはcountボタン押下時にtrueにしてそれ以降処理を実行します。
countは3になったらグレイアウトするためのカウンター設定の変数です。

```swift
    @State var isModal:Bool = false
    @State var count:Int = 0

```

#2.ボタン押下時に実行する処理一覧

```swift

 var body: some View {
        VStack {
            Button(action: {
                isModal = true
            }){
                Text("check")
            }
            //isMOdaleがButtonを押したことでtrueになりSomeViewが閉じたタイミングでcountUp関数が実行される。
            .sheet(isPresented: $isModal, onDismiss: {countUp()}) {
                SomeView()
            }
            .disabled(count >= 3)//3回表示したらボタンを無効(グレイアウト)にする。
            Text("回数:\(count)")
                .font(.title)
                .padding()
        }
    }
    //countをupする関数。ハーフモーダルが閉じたタイミングで実行される。
    func countUp(){
        count += 1
    }
```

##2ボタンを設定とテキスト回数:
Buttonを配置しaction:引数以降に処理を書く。isModalフラグがtrueになるので.sheetモディファイアが実行されます。この時onDismiss:引数をつけると、ハーフモーダルビューが閉じた時の処理を設定する事ができます。ここではcountUp()というユーザー定義関数が実行されています(関数の内容は後述)
SomeViewを実行し、ハーフモーダルビューを出現させます。
.Buttonにdisabledモディファイアを設定していますが、countが3を超えた時点で実行されます。
Text("回数")と、count変数を設置しています。

```swift
VStack {
            Button(action: {
                isModal = true
            }){
                Text("check")
            }
            //isMOdaleがButtonを押したことでtrueになりSomeViewが閉じたタイミングでcountUp関数が実行される。
            .sheet(isPresented: $isModal, onDismiss: {countUp()}) {
                SomeView()
            }
            .disabled(count >= 3)//3回表示したらボタンを無効(グレイアウト)にする。
            Text("回数:\(count)")
                .font(.title)
                .padding()
        }


```

##3.countup関数
count判定のためにたすだけのcountup関数です。onDismissによってハーフモーダルが閉じた時点で実行します。

```swift
//countをupする関数。ハーフモーダルが閉じたタイミングで実行される。
    func countUp(){
        count += 1
    }

```

##4ハーフモーダル

実際に実行されるハーフモーダルの内容です。

```swift
struct SomeView: View {
    var body: some View {
        Text("飛び出てジャジャン")
    }
}

```

以上です。