-
SwiftUI Sheet 58 - Sheet 크기별로 디스플레이 하기 (1/4, 중간, 전체사이즈)SwiftUI 100 레시피/Sheets 2022. 6. 27. 13:16
#1. ContentView
import SwiftUI
struct ContentView: View {
@State private var sheetMode: SheetMode = .none
var body: some View {
ZStack{
FlexibleSheet(sheetMode: $sheetMode){
VStack{
Text("Hello World")
.foregroundColor(.white)
.font(.largeTitle)
} .frame(maxWidth: .infinity, maxHeight: .infinity)
.background(Color.green)
.clipShape(RoundedRectangle(cornerRadius: 25.0, style: .continuous))
}
Button("Show"){
switch sheetMode{
case .none:
sheetMode = .quarter
case .quarter:
sheetMode = .half
case .half:
sheetMode = .full
case .full:
sheetMode = .none
}
} .font(.largeTitle)
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
#2. FlexibleSheet
import SwiftUI
enum SheetMode{
case none
case quarter
case half
case full
}
struct FlexibleSheet<Content: View>: View {
let content: () -> Content
var sheetMode: Binding<SheetMode>
init(sheetMode: Binding<SheetMode>, @ViewBuilder content: @escaping() -> Content){
self.content = content
self.sheetMode = sheetMode
}
private func calculateOffset() -> CGFloat{
switch sheetMode.wrappedValue{
case .none:
return UIScreen.main.bounds.height
case .quarter:
return UIScreen.main.bounds.height - 200
case .half:
return UIScreen.main.bounds.height / 2
case .full:
return 0
}
}
var body: some View {
content()
.offset(y: calculateOffset())
//.animation(.spring())
.animation(.spring(), value: 2)
.edgesIgnoringSafeArea(.all)
}
}
struct FlexibleSheet_Previews: PreviewProvider {
static var previews: some View {
FlexibleSheet(sheetMode: .constant(.none)){
VStack{
Text("Hello World")
} .frame(maxWidth: .infinity, maxHeight: .infinity)
.background(Color.blue)
.clipShape(RoundedRectangle(cornerRadius: 25.0, style: .continuous))
}
}
}
.none 
.quarter 
.half 
.full 'SwiftUI 100 레시피 > Sheets' 카테고리의 다른 글
SwiftUI Sheet 57 - 여러개 Sheet 열기 (0) 2022.06.27 SwiftUI Sheet 56 - Sheet 열기, 닫기 (0) 2022.06.27