[SwiftUI] bottom sheet 띄우기

bottom card view, botton sheet 등 용어가 많은데 modifier의 이름은 sheet입니다

 

@State private var isShowingSheet: Bool = false

화면에 sheet으로 띄울 view를 보여줄지 여부를 위해 State를 하나 선언해 줍니다. 

false이면 화면에 보이지 않게 되고, true이면 하단에 sheet 형태로 view가 보이게 됩니다. 

 

Button {
    isShowingSheet.toggle()
    print(isShowingSheet)
} label: {
    Text("바텀시트 띄우기")
}

isShowingSheet 값을 바꾸기 위한 Button을 하나 만듭니다. 버튼을 누르면 isShowingSheet 을 토글해 줍니다. 

 

.sheet(isPresented: $isShowingSheet, content: {
    HStack {
        Text("바텀 시트 입니다. ")
    }
})

• contetn 내부에 View를 배치

 

• isPresented 파라미터나 바인딩 되어 있는데 그 뜻은 이 값을 sheet에서 바꿀 수 있다는 것

Button {
    isShowingSheet.toggle()
    print(isShowingSheet)
} label: {
    Text("바텀시트 띄우기")
}
.sheet(isPresented: $isShowingSheet, content: {
    HStack {
        Text("바텀 시트 입니다. ")
    }
    .onDisappear(perform: {
        print(isShowingSheet)
    })
})

• 버튼이 눌릴 때 트리거 역활을 하는 isShowingSheet의 값을 찍어보면 true
• sheet에서 띄워주는 view가 disappear 될때 isShowingSheet을 찍으면 false 가되는 것을 확인할 수 있음. 
• 즉 화면에 sheet가 나타나면 true로 화면에서 사라지면 false로 변경되는 것을 확인할 수 있음
• 버튼 클릭시 isShowingSheet.toggle() 과 isShowingSheet = true가 동일한 역활을 한다고 볼 수 있음

.sheet(isPresented: $isShowingSheet) {
    HStack {
        Text("바텀 시트 입니다. ")
    }
    .presentationDragIndicator(.visible)
}

• content로 전달하는 view에 presentationDragIndicator(.visible) modifier를 추가하면 sheet 상단에 핸들러가 생기는 것을 확인할 수 있음

 

.sheet(isPresented: $isShowingSheet) {
    HStack {
        Text("바텀 시트 입니다. ")
    }
    .presentationDetents([.height(40), .large])
}

• presentationDetents를 지정하면 sheet의 높이를 지정할 수 있음
• large == 100, medium == 50 으로 지정되며 .height를 사용하면 사용자 지정 높이로 설정할 수 있음

• 스와이프 제스처를 사용해서 지정한 detent 값으로 sheet의 높이를 변경할 수 있음
• 상단 예제에서는 large일때 살짝 아래로 스와이프 하면 높이 40으로 여기서 더 아래로 스와이프 하면 sheet이 완전히 화면에서 사라짐

Pexels에서 Cojanu Alexandru님의 사진: https://www.pexels.com/ko-kr/photo/17841512/