SwiftUI의 버튼에 대해서 공부해보자:)

개요

어플에서 버튼을 추가하는 방법에 대해서 알아보겠다.

애플 공식문서

---

버튼

---

struct Button<Label> where Label : View

어플에서 탭을 했을 때 특정 작업을 수행하게 하는 가장 기본적인 컨트롤이다.

버튼에는 여러 생성자가 있다.

그냥 앱에서 흔히 보는 버튼들을 만드는 구조체이다.

---

뷰와 컨트롤의 차이

---

텍스트, 색, 이미지처럼 화면에 콘텐츠를 표현하는 것에 초점을 두는 것을 뷰.

상호작용을 할 수 있도록 추가적인 행동이 정의된 뷰를 컨트롤이라고 한다. 크게 그냥 다 뷰라고 해도된다.

---

버튼 레이블

---

레이블은 뷰 프로토콜을 준수하는 타입이면 모두 가능하다.

HStack() {
  Button("button") {
    print("Button1")
  }

  Button(action: { print("Button2") }) {
    Text("Button")
      .padding()
      .background(Rectangle().strokeBorder())
  }
}

위의 예시처럼 버튼의 이름(레이블), 그리고 버튼이 눌렸을 때 실행할 작업을 적어줘도 되고

레이블 위치에 실행할 작업을 적고 블럭 안에 레이블의 코드를 적어도 된다.

여기서는 텍스트로만 했는데 이미지로 해도된다.

---

ButtonStyle

---

ButtonStyle의 수식어를 사용하면 버튼의 스타일을 적용할 수 있다.

버튼 스타일로는 3가지를 제공한다.

• DefaultButtonStyle : 디폴트 버튼으로 모든 OS에서 사용할 수 있다.
• BorderlessButtonStyle : iOS에서의 버튼은 모두 테두리가 없다. 다른 OS에서 유용
• PlainButtonStyle : 대기 상태일 때는 시각적 요소를 적용하지 않는다.

VStack() {
  Button("default") {}
    .buttonStyle(DefaultButtonStyle())
  Button("default") {}
    .buttonStyle(BorderlessButtonStyle())
  Button("default") {}
    .buttonStyle(PlainButtonStyle())

---

onTapGesture

---

버튼을 사용하지 않고 특정 뷰를 탭하면 작업을 실행하는 수식어이다.

외형도 동일하고 작업도 동일하지만 커스텀을 할 수는 없다.

Image(systemName: "person.circle").imageScale(.large)
  .onTapGesture { print("onTapGesture") }

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

---

EditButton

---

아이폰 앱을 쓰다보면 Edit 버튼이 있고 누르면 목록들을 수정할 수 있는 것을 본적이 있다. 이 기능을 구현하려면 EditButton을 사용하면 된다.

누르면 EditMode로 변환한다.

@State private var fruits = [
    "Apple",
    "Banana",
    "Papaya",
    "Mango"
]

var body: some View {
    NavigationView {
        List {
            ForEach(fruits, id: \.self) { fruit in
                Text(fruit)
            }
            .onDelete { fruits.remove(atOffsets: $0) }
            .onMove { fruits.move(fromOffsets: $0, toOffset: $1) }
        }
        .navigationTitle("Fruits")
        .toolbar {
            EditButton()
        }
    }
}