SwiftUI 여러 종류의 버튼 (SwiftUI 강좌)

이번에는 SwiftUI에서 여러 종류의 버튼을 어떻게 사용하는지에 대해 알아보겠습니다. 이 강좌는 Swift 기본 문법을 숙지하고 있다는 가정 하에 작성되었습니다.

일반 버튼

SwiftUI에서 일반 버튼을 만들기 위해서는 이렇게 하면 됩니다. Button 다음에 action과 display 칸을 마련합니다.

Button(action: {
    // action
}) {
    // display
}

Button은 이렇게 사용될 수 있습니다. body 부분의 Button을 보면, 버튼을 누르면 showDetails의 값을 토글하고 버튼 자체는 Text가 되는 것입니다.

struct ContentView : View {
    @State var showDetails = false

    var body: some View {
        VStack {
            Button(action: {
                self.showDetails.toggle()
            }) {
                Text("Show details")
            }

            if showDetails {
                Text("You should see me in a crown")
                    .font(.largeTitle)
                    .lineLimit(nil)
            }
        }
    }
}

내비게이션 링크

나중에 다룰 내용이긴 하지만, 내비게이션 뷰가 있고, SwiftUI의 내비게이션 뷰를 push 하고 싶다면 내비게이션 링크를 사용하면 됩니다. 예를 들어, 이렇게 디테일 뷰가 있고,

struct DetailView: View {
    var body: some View {
        Text("Detail")
    }
}

이렇게 콘텐츠 뷰가 있으면, 내비게이션 뷰를 이렇게 NavigationLink를 통해 push 할 수 있습니다.

struct ContentView : View {
    var body: some View {
        NavigationView {
            Text("Hi")
            .navigationBarTitle(Text("Intro"))
            .navigationBarItems(trailing:
                NavigationLink(destination: DetailView()) {
                    Image(systemName: "arrowtriangle.right.circle.fill").resizable()
                        .frame(width: 25, height: 25, alignment: .trailing)
                }
            )
        }
    }
}

토글 스위치

UIKit의 UISwitch의 역할을 SwiftUI에서는 Toggle이 합니다.

이렇게 코드가 있을 때, Toggle(isOn: )을 사용하면 showGreeting의 값은 토글 스위치가 눌릴 때마다 값이 변경되고, 그에 해당하는 코드가 실행됩니다.

struct ContentView : View {
    @State var showGreeting = true

    var body: some View {
        VStack {
            Toggle(isOn: $showGreeting) {
                Text("Welcome")
            }.padding()

            if showGreeting {
                Text("Hello Munon")
            }
        }
    }
}

마무리

이렇게 해서 SwiftUI에서 어떻게 여러 종류의 버튼을 사용하는지에 대해 알아봤는데요. 다음에는 SwiftUI는 어떤 방식으로 View를 구성하는지, 레이아웃을 어떻게 구현하는지에 대해 알아보려고 합니다. 궁금한 점은 댓글로 남겨주세요!

댓글

Please enter your comment!
Please enter your name here