학습 노트/Swift UI (2022) (28) 썸네일형 리스트형 23. State & Binding UIKit SwiftUI UIKit과 SwiftUI의 가장 큰 차이점은 View(UI)를 직접 업데이트하지 않는다는 점이다. SwiftUI에서 View는 상태(State)에 자동으로 반응한다. 이러한 상태를 나타내는 변수를 Property Wrapper 라고 부르며 자주 사용되는 것들은 다음과 같다. State Binding Environment ObservedObject EnvironmentObject StateObject All SwiftUI property wrappers explained and compared - a free SwiftUI by Example tutorial Was this page useful? Let us know! 1 2 3 4 5 www.hackingwithswift.co.. 22. NavigationView & TabView NavigationView Apple Developer Documentation developer.apple.com 정리하는 시점에는 이미 사용이 중단돼 NavigationStack으로 대체됐다. NavigationStack Apple Developer Documentation developer.apple.com 대부분의 modifier는 그대로 사용할 수 있으니 글은 NavigationView를 기준으로 정리하고, 변경된 부분에 대한 설명이 필요할 경우 추가 언급하도록 한다. 앱을 사용하다 보면 아래에서 올라오는 게 아닌, 옆으로 넘어가는 전환 효과와 함께 새로운 화면을 표시하는 경우가 있다. 새로운 화면을 표시하는 과정(왼쪽)을 'Push'라고 부르고, 이전의 화면으로 돌아가는 과정(오른쪽)을 'Po.. 21. Animation Animation Apple Developer Documentation developer.apple.com struct AnimationView: View { @State private var position = CGPoint.zero var body: some View { VStack { Circle() .foregroundColor(.blue) .frame(width: 50, height: 50) .position(position) .offset(x: 50, y: 50) .animation(.easeIn) Spacer() Button(action: { self.position = self.position == .zero ? CGPoint(x: 300, y: 300) : .zero }, label: {.. 20. Image & SFSymbol & AsyncImage Image Apple Developer Documentation developer.apple.com struct ColorImageView: View { var body: some View { Image("sampleBG") } } Image View는 말 그대로 이미지를 표시하는 View다. 정확히는 Labeled Image와 Unlabeled Image가 존재하며, 같은 View를 생성하지만 전달하는 파라미터가 다르다. 보통은 생성자에 Asset에 추가한 이미지의 이름을 전달해 사용한다. 이미지는 실제 크기를 사용하지만 modifier를 사용해 자유롭게 변경할 수 있다. struct ColorImageView: View { var body: some View { Image("sampleBG") .re.. 19. Color & Material Color Apple Developer Documentation developer.apple.com struct ColorImageView: View { var body: some View { VStack { Text("This") .foregroundColor(Color(uiColor: .systemOrange)) .fontWeight(.black) Text("is") .foregroundColor(.cyan) .fontWeight(.black) Text("Color") .foregroundColor(Color(red: 0.4, green: 0.2, blue: 0.7)) .fontWeight(.black) } } } Color 그 자체로도 하나의 View의 역할을 하지만, 보통은 다른 View의 Mod.. 18. Stepper & Picker & Date Picker & Color Picker Stepper Apple Developer Documentation developer.apple.com struct ControlsView: View { @State private var stepperVal = 0 var body: some View { VStack { Spacer() Image(systemName: "gear") .resizable() .frame(width: CGFloat(stepperVal) * 5, height: CGFloat(stepperVal) * 5, alignment: .center) .scaledToFit() Spacer() Stepper() { Label { Text("value is \(stepperVal) and real gear change to \(stepperV.. 17. Toggle & Slider & ProgressView Toggle Apple Developer Documentation developer.apple.com struct ControlsView: View { @State private var toggleStat = true var body: some View { Image(systemName: toggleStat ? "lightbulb.fill" : "lightbulb") Toggle(isOn: $toggleStat) { Text("Switch it!") } } } title과 label로 이름을 설정하고, isOn에 State Variable을 전달해 해당 변수를 true 나 false로 반전시킨다. 기본 스타일은 너비 전체를 채우고, Control이 오른쪽, 높이는 콘텐츠 표시를 위한 최소한으로 지정된다... 16. Button & Link & Menu Button Apple Developer Documentation developer.apple.com 일반적으로 사용하는 파라미터는 아래와 같다 action Button의 동작 label Button의 UI title Button의 이름 role Alert, Context에 Button을 사용하는 경우 특정 역할을 부여 struct ControlsView: View { @State private var text = "" var body: some View { Text(text) Button("test", role: .destructive) { text = "Hello" } } } Link Apple Developer Documentation developer.apple.com struct Controls.. 14 ~ 15. TextField & TextField Style & TextEditor TextField Apple Developer Documentation developer.apple.com TextField는 한 줄 입력에 최적화된 View이다. struct LabelView: View { @State private var value = "" var body: some View { Form { Text("testing") .padding() TextField("title", text: $value, prompt: Text("prompt1")) .padding() TextField("title", text: $value) .padding() } } } 생성자의 기본 파라미터는 세 개로 아래와 같다. title iOS와 iPadOS에서 placeholder로 사용된다. macOS에서 La.. 13. Label & Font Label Apple Developer Documentation developer.apple.com Label은 이미지와 문자열을 표시하기에 적합한 View다. SwiftUI 초기에는 존재하지 않았기 때문에 하위 호환성을 고려해 사용해야 한다. struct LabelView: View { var body: some View { Label("Bulb", systemImage: "lightbulb") } } 기본 형태는 title + systemImage이고, Custom은 title + iCon으로 이 경우엔 Image View와 Text View를 조합해 사용하는 것과 크게 다르지 않다. struct LabelView: View { var body: some View { NavigationView { B.. 이전 1 2 3 다음
