SwiftUI_003_Button.md

Layout - SwiftUI: Button

UIButton Init

Button은 보여질 내용과 해야할 Action으로 나뉘어진다.

아래는 기본적인 형태이다.

import SwiftUI

struct ContentView: View {
    var body: some View {
      Button("Hit me") {
        print("Hitted")
      }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

기본구조

객체를 만들때 이니셜라이저를 만들기 위해 소괄호를 열면 여러 가지 형태, 용도의 형태를 익힐 수 가 있다.

Button {
  // Action
  print("Hitted")
} label: {
  // View
  Text("Hit me")
}

객체를 만들때 이니셜라이저를 만들기 위해 소괄호를 열면 여러 가지 형태, 용도의 형태를 익힐 수 가 있다.

이때 Role이라는 걸 볼 수 있다.

Role

• none
• destructive
• cancel

Role에서는 none, .destructive, .cancel의 enum을 세팅하면 버튼의 용도에 따른 색상을 만들수 있다.

선언형

버튼의 모양에 여러 가지 값들을 선언형으로 구현이 가능하다

아래모양은 먼저 동작을 정하고, Label의 UI를 지정하는 코드이다.

  Button(role: .none) {
    print("Hitted")
  } label: {
    Text("Hit me")
      .padding()           // 안쪽 여백 만들기
      .frame(width: 150)   // 가로의 길이 지정하기
      .background(.purple) // 색상을 넣는 방법
      .cornerRadius(15)    // 가장자리를 둥글게
  }