[SwiftUI] Button

Button 

---

• 액션을 시작하는 가장 기본적인 컨트롤
• UIKit의 UIButton과 같은 역할
• 기본적인 Button의 선언

Button(action: {
    // 버튼 액션
}){
    Text("버튼") // Button Title
}

Button

 

Button 사용

---

HStack(spacing: 20){
    // 첫 번째 버튼
    Button("Button"){
        print("Button1")
    }
    // 두 번째 버튼
    Button(action: {
        print("Button2")
    }){
        Text("Button")
            .padding()
            .background(RoundedRectangle(cornerRadius: 10.0).strokeBorder())
    }
    // 세 번째 버튼
    Button(action:{print("Button3")}){
        Circle()
            .stroke(lineWidth: 2)
            .frame(width: 80, height: 80)
            .overlay(Text("Button"))
    }
    .accentColor(.green)
}

여러 가지의 Button 사용

 

• 첫 번째 버튼은 Text로만 Title을 만들고 action을 추가
• 두 번째 버튼은 Text 주변으로 RoundedRectangle을 이용하여 외곽선 추가
  + action을 먼저 정의하고, View를 나중에 정의
• 세 번째 버튼은 외곽선을 먼저 그리고, 그 위에 Text를 추가한 케이스
  + accentColor는 UIKit tintColor의 역할

Button Image 사용

---

    // Image
    Button(action: {print("Button1")}){
        Image("SwiftUI")
            .resizable()
            .frame(width: 120, height: 120)
    }
    // System Image
    Button(action: { print("Button2")}){
        Image(systemName: "play.circle")
            .imageScale(.large)
            .font(.largeTitle)
    }.padding()

Button Image

 

Button Style

---

• DefaultButtonStyle
• BorderButtonStyle
• PlainButtonStyle

VStack(spacing: 20){
    // DefaultStyle
    Button(action: {print("Button1")}){
        Text("DefaultStyle")
    }
    .buttonStyle(DefaultButtonStyle())
    // BorderedButtonStyle
    Button(action: {print("Button2")}){
        Text("BorderedButtonStyle")
    }
    .buttonStyle(BorderedButtonStyle())
    // PlainButtonStyle
    Button(action: {print("Button3")}){
        Text("PlainButtonStyle")
    }
    .buttonStyle(PlainButtonStyle())
}

Button Style

 

 

onTapGesture

---

• 버튼을 사용하지 않고도 같은 기능을 하게 구현을 할 수 있음
• 탭 했을 때 지정된 동작을 수행하는 수식어
• Button의 Highlight Animation과 Button Style 같은 기본 효과는 사용할 수 없음

// Button에 Action
Button(action: {print("버튼")}){
    Image(systemName: "person.circle")
        .imageScale(.large)
}
// Image에 onTapGesture
Image(systemName: "person.circle")
    .imageScale(.large)
    .onTapGesture {
        print("onTapGesture")
}

 

 

출처

---

스윗한 SwiftUI (이봉원 저, 비제이퍼블릭)

Button | Apple Developer Documentation