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

ハーフモーダルビューとは現在のビューに重なるように表示されるビューです。一時的にシーンを移行して表示されるビューであり、下へのスワイプで元のビューに戻ります。
3回ハーフモーダルが出現するとcheckというボタンがグレイアウトする処理を書きます。1.checkを押すと

2.ハーフモーダルが飛び出ます

1~2を繰り返すとcheckボタンがグレイアウトします。

全体のコード

//
//  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になったらグレイアウトするためのカウンター設定の変数です。

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

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

 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変数を設置しています。

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によってハーフモーダルが閉じた時点で実行します。

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

4ハーフモーダル

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

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

以上です。