SwiftUI 여러 종류의 Button

• 이번에는 SwiftUI에서 여러 종류의 Button를 어떻게 사용하는지에 대해 알아보겠습니다.

일반 Button

• SwiftUI에서 일반 버튼을 만들기 위해서는 이렇게 하면 됩니다.
• Text를 버튼으로 사용하기 위해 텍스트와 Action(실행할 코드)을 입력합니다.
• 커스텀 뷰를 버튼으로 사용하고 싶다면, Action과 Label을 입력합니다.

struct ContentView : View {
  @State var text: String = ""
  
  var body: some View {
    VStack {
      Spacer()
      
      Button("버튼") {
        // 실행할 코드
      }
      
      Spacer()
      
      Button {
        // 실행할 코드
      } label: {
        Image(systemName: "circle")
      }
      
      Spacer()
    }
  }
}

• Button은 예를들어 이렇게 사용될 수 있습니다.
• Button을 보면, Text를 레이블로 갖고 있는데요.
• 이러한 버튼을 누르면 showDetails의 값을 토글하고 디테일 Text를 보여줍니다.

struct ContentView : View {
  @State var showDetails = false
  
  var body: some View {
    VStack {
      Button {
        showDetails.toggle()
      } label: {
        Text("Show details")
      }
      
      if showDetails {
        Text("Detail description")
          .padding()
      }
    }
  }
}

여러 종류의 버튼

• EditButton은 NavigationView의 toolbar과 같은 곳에서 사용 할 수 있는 편집 버튼입니다.

struct ContentView : View {
  var body: some View {
    NavigationView {
      Text("Example")
        .navigationTitle("Buttons")
        .toolbar {
          EditButton()
        }
    }
  }
}

• Link는 버튼을 누르면 해당 링크로 이동하게 해주는 버튼입니다.

struct ContentView : View {
  var body: some View {
    Link("My site", destination: URL(string: "https://www.hohyeonmoon.com")!)
  }
}

• Menu 역시 이름 그대로 메뉴 버튼을 만들 수 있게 해줍니다.
• Menu 안에 Button을 넣으면 해당 버튼들이 메뉴의 옵션이 됩니다.

struct ContentView : View {
  var body: some View {
    Menu("Copy") {
      Button("Copy Normal") {
        print("Normal")
      }
      Button("Copy Formatted") {
        print("Formatted")
      }
    }
  }
}

Navigation Link

• NavigationView가 있고 이를 다음 페이지로 push 하고 싶다면 NavigationLink를 사용하면 됩니다.
• 예를 들어, 이렇게 간단한 DetailView가 있다고 해봅시다.

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

• 그리고 이렇게 ContentView가 있으면 NavigationView를 NavigationLink를 통해 DetailView로 push 할 수 있습니다.

struct ContentView : View {
  var body: some View {
    NavigationView {
      NavigationLink(destination: DetailView()) {
        Image(systemName: "arrowtriangle.right.circle.fill").resizable()
          .frame(width: 50, height: 50)
      }.navigationBarTitle("Buttons")
    }
  }
}

Toggle 버튼

• UIKit의 UISwitch의 역할을 SwiftUI에서는 Toggle이 합니다.
• Toggle(..., isOn: ...)을 사용하면 showGreeting의 값은 토글 스위치가 눌릴 때마다 변경됩니다.

struct ContentView : View {
  @State var showGreeting = false
  
  var body: some View {
    VStack {
      Toggle("Toggle", isOn: $showGreeting)
        .padding()
        .background(.orange)
        .cornerRadius(15)
        .padding()
      
      if showGreeting {
        Text("Hello.")
      }
    }
  }
}

마무리

• 이렇게 해서 SwiftUI에서 어떻게 여러 종류의 버튼을 사용하는지에 대해 알아봤습니다.