SwiftUI 컨트롤 컴포넌트

2021년 11월 5일 수정

≡ 목차 (Table of Contents)

Button

Button(
    action: { print("Button Action") },
    label: { Text("Button Title") }
)
Button(action: {}) {
    Text("Button with Image")
    Image(systemName: "square.and.arrow.up")
}

ButtonStyle

ButtonStyle 은 이름 처럼 버튼의 스타일을 정의할 수 있는 기능이다. 딱히 컨트롤 컴포넌트와는 관계는 없지만 Button과 비슷한 위치에 있으면 좋을 것 같아 여기에 정리한다.

버튼 스타일은 대충 아래와 같은 방식으로 구현한다.

struct SomeButonStyle: ButtonStyle {
    func makeBody(configuration: Self.Configuration) -> some View {
        configuration.label
            .foregroundColor(.primary)
            .padding()
    }
}

이렇게 정의된 스타일은 buttonStyle() 메서드를 이용해 지정할 수 있다.

Button("Some Button") {
    ...
}
.buttonStyle(SomeButtonStyle())

Toggle

Toggle(isOn: $someProperty) {
    Text("Switch Title")
}

TextEditor

TextEditor(text: $text)
.padding()
.foregroundColor(Color.black)
.font(.title)
.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: 200)
.border(Color.black, width: 1)

Picker

피커는 일종의 리스트에서 항목을 선택하기 위한 팝업(Popup) 버튼이다. 버튼을 누르면 리스트가 뜨고 여기서 선택하면 버튼이 선택된 항목으로 표시된다.

Picker("Quarter", selection: $pickerSelection) {
    Text("First").tag(0)
    Text("Second").tag(1)
    Text("Third").tag(2)
    Text("Fourth").tag(3)
}

selection으로 바인딩 된 항목은 태그의 값을 저장한다. 그래서 해당 프로퍼티는 아래처럼 생겼다.

@State private var pickerSelection: Int = 0

이 글을 링크하는 글들

❏ SwiftUI

SwiftUI의 소개와 관련된 글 정리 Updated on 2022년 11월 2일