아이폰을 이용하고 있으면 자주 사용하는 이하의 액션 시트의 간단한 구현의 비망록입니다.

일일이부터 구현하는 일은 없고, swift측이 편리한 툴을 준비해 줍니다.


사용하는 코드

· actionSheet ()
· actionSheet의 수정자 인 Actionsheet ()
・BUtton()
· dufault()
· cancel ()
· destrcutive ()

전체 코드

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

import SwiftUI

struct ContentView: View {
    @State var isSheet: Bool = false
    var body: some View {
        Button(action: {
            isSheet = true
        }) {
            Text("アクションシートテスト")
        }.actionSheet(isPresented: $isSheet) {
            ActionSheet(title: Text("タイトル"),
            message: Text("メッセージ文"),
            buttons: [
                .default(Text("ボタン1"), action: {}),
                .default(Text("ボタン2"), action: {}),
                .destructive(Text("削除"), action:{}),
                .cancel(Text("キャンセル"), action: {})
            ])
        }
    }
}

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

Button으로 액션 설정을 한다.

라이브러리 패널의 Button을 사용하여 동작과 텍스트를 설정합니다.

 Button(action: {
            isSheet = true
        }) {
            Text("アクションシートテスト")

클릭 가능한 버튼이 있습니다.
버튼을 클릭하면 isSheet에 true가 대입됩니다.
Text는 "액션 시트 텍스트"를 설정합니다.

액션 시트를 표시하는 코드를 추가합니다.

actionSheet 수정자를 사용하여 인수에 사용자가 정의한 변수인 isSheet를 설정합니다. Button의 action 실행시 isSheet가 true이므로 ActionSheet가 실행되고 액션 시트가 표시됩니다.
title에는 제목, message에는 메시지를 설정합니다.
buttons:에 필요한 버튼을 설정하면 완료됩니다.
버튼에 따라 처리를 하고 싶으면 action:{} 안에 기재하면 됩니다.

.actionSheet(isPresented: $isSheet) {
            ActionSheet(title: Text("タイトル"),
            message: Text("メッセージ文"),
            buttons: [
                .default(Text("ボタン1"), action: {}),
                .default(Text("ボタン2"), action: {}),
                .destructive(Text("削除"), action:{}),
                .cancel(Text("キャンセル"), action: {})
            ])
        }

buttons:로 설정하고 싶은 버튼의 종류를 간단하게 설정할 수 있습니다..default이면 일반 파란색 버튼, destructive그렇다면 빨간색 버튼 cancel이면 독립적 인 취소 버튼이 설정됩니다.

buttons: [
                .default(Text("ボタン1"), action: {}),
                .default(Text("ボタン2"), action: {}),
                .destructive(Text("削除"), action:{}),
                .cancel(Text("キャンセル"), action: {})
            ])

덤 삭제를 확인하는 액션 시트

※ 델리트 처리는 쓰지 않으므로 자신의 제작하고 싶은 것에 따라 다시 씁니다.

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

import SwiftUI

struct ContentView: View {
    @State var isSheet: Bool = false
    var body: some View {
        Button(action: {
            isSheet = true
        }){
            Text("削除")
                .foregroundColor(.white)
                //カプセル型のボタン
                .background(Capsule()
                .foregroundColor(.red)
                .frame(width: 100,height: 30))
        }.actionSheet(isPresented: $isSheet){
            ActionSheet(title: Text("削除しますか?"),
                        buttons:[
                            .destructive(Text("削除"), action:{
                                deleteProcess()
                            }),
                            .cancel(Text("キャンセル"),action:{})
                        ]
            )
        }
    }
}
func deleteProcess(){
    print("削除しました。")
}
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

이상입니다.