[SwiftUI] 플로팅 버튼 만들기

안드로이드에서 주로 쓰이는 UI인 플로팅 버튼을 만들어봅시다. 

[구조 파악]

1. Zstack으로 ScrollView를 아래에, floatingButton을 위에 띄워준다. 

2. spacer를 두개 줘서 왼쪽 아래에 floatingButton을 위치시킨다. (Hstack, Vstack 이용)

 

 

struct ContentView: View {
    @State private var isButtonVisible = false
    
    let pages = [
       "page1","page2","page3"
    ]
    
    var body: some View {
        ZStack {
            ScrollView{
                VStack {
                    ForEach(pages,id: \.self) { image in
                        Image(image)
                            .resizable()
                            .aspectRatio(contentMode: .fill)
                    }
                }
            }
            
            if isButtonVisible {
                VStack {
                    Spacer()
                    HStack {
                        Spacer()
                        Button(action: {
                            print("플로팅 버튼이 클릭되었습니다.")
                        }) {
                            Image(systemName: "plus")
                                .font(.title)
                                .padding()
                                .background(Color.blue)
                                .foregroundColor(.white)
                                .clipShape(Circle())
                        }
                        .padding(.trailing, 16)
                        .padding(.bottom, 16)
                    }
                }
                
            }
        }
        .onAppear {
            isButtonVisible = true
        }
    }
}