Button

[Jinsujin]

👉 Document

Button을 생성하는 다양한 방법들

1. (default)문자열을 입력하여 Label 을 생성하는 버튼

   Button("버튼의 타이틀") {
     // 버튼을 눌렀을때 동작할 Action 정의
   }

2. Custom Label 을 표시하는 버튼 생성

   Button {
     // 버튼을 눌렀을때 동작할 Action 정의
   } label: {
     // 버튼의 생김새 정의
   }

3. Custom Label 을 표시하는 role을 가진 버튼 생성

   Button("Delete", role: .desctructive) {
     // 버튼을 눌렀을때 동작할 Action 정의
   }

예제

1. 라운드 처리된 버튼 만들기

   Button {
     print("Hello world!")
   } label: {
     Text("Touch Me")
         .frame(width: 200, height: 40, alignment: .center)
         .foregroundColor(.white)
         .background(.purple)
         .cornerRadius(20)
   }

2. 이미지 버튼

   Button {
     print("hello")
   } label: {
     Image(systemName: "folder")
         .resizable() // 이미지 사이즈를 프레임 크기에 맞춘다.
         .frame(width: 80, height: 60, alignment: .center)
   }

3. 텍스트와 이미지를 함께 사용하기

   Button {
     print("hello")
   } label: {
     HStack {
         Image(systemName: "folder")
             .resizable()
             .frame(width: 80, height: 60, alignment: .center)
         Text("Save File")
             .foregroundColor(.brown)
     }
   }