[SwiftUI] - Button과 ImageButton

기본적인 텍스트 버튼의 경우는 아래와 같이 구성합니다.

    var body: some View {
        HStack(spacing: 20){
            Button("Button"){
                print("Button1")
            }
            Button(action:{print("Button2")}){
                Text("Button")
                    .padding()
                    .background(RoundedRectangle(cornerRadius: 10).strokeBorder())
            }
            Button(action: {print("Button3")}) {
                Circle()
                    .stroke(lineWidth: 2)
                    .frame(width: 80, height: 80)
                    .overlay(Text("Button"))
            }
            .accentColor(.green)
        }
    }

 

버튼에 이미지를 넣고싶다면?

    var body: some View {
        HStack(spacing: 20){
            Button(action: {print("Button1")}){
                Image("SwiftUI")
                    .resizable()
                    .frame(width: 120, height: 120)
            }
            Button(action:{print("Button2")}){
                Image(systemName: "play.circle")
                    .imageScale(.large)
                    .font(.largeTitle)
            }
        }.padding()
    }

이미지 사용 시 유의사항

- 이미지 원본 색상을 잃고 accentColoer로 덮일 수 있음

해결방법 2가지

1. 렌더링 모드 변경

renderingMode를 original로 설정

           Image("SwiftUI")
                    .renderingMode(.original)

2. 버튼 스타일 적용

buttonStyle 기본값 DefaultButtonStyle대신 PlainButtonStyle 사용

이 스타일을 적용하면 renderingMode가 original로 바뀝니다.

원래 이 속성은 버튼을 누르거나 포커스 시 비활성화된 표실르 표현할 때 적용하는 스타일

  Image("SwiftUI")
                    .buttonStyle(PlainButtonStyle)