[SwiftUI] 0907 설정앱 만들기 중 알게된 것 2 - UI그리기

* 공부했던 내용을 주관적으로 해석하여 '제가' 이해하기 쉽도록 작성하였습니다. 잘못된 정보가 있을 시 알려주시면 제게 큰 힘이 됩니다!

* 아래 문서는 공식문서와 설명을 찾으며 공부를 하며 만들었으나, 큰 틀은 개발자리님의 #1 설정앱 실습영상을 참고했습니다.

 

https://youtu.be/XrwLqAqCU2c?si=Fjf0EbVOXGT5rt7q

---

후후 완성해버렸다.

사실 적은 가지수의 코드가 반복이라 만드는데 생각보다 오래걸리지 않았음.

 

---

[Toggle] 버튼 만들기

1. Toggle 버튼을 만들기 위해선 State와 Binding의 개념이 필요하다.

 

- State : 보내는애 / Binding : 받는애 (내가 기억하는것)

 

- @State : 값이 변경 되었을 때 감지해서 화면에서 보여줘야할 때

- @Binding : state 같은 녀석들을 화면간에 공유해야 할 때(뷰 간의 값이 공유되어야할 때) / 좁은 영역 

- @EnvironmentObject : 하위뷰에 모두 공유해야 할 때

(찾았을 때 나오는 설명.. 출처 : https://youtu.be/1BjRFQCROoM?si=SKC3sbmk-E7dOqXc)

 

번역 : SwiftUI가 관리하는 값을 읽고 쓸 수 있는 속성 래퍼 유형.

 

2. 방법

struct ContentView: View {
    
    @State private var planeToggle = false
    @State private var vpnToggle = false
    
    var body: some View {
    ...
    	}
    }

이렇게 Struct와 body 사이에 @State를 걸어주고(ture/false로 기본값을 설정해줌),

토글 스위치가 필요한 곳에 가서 

  Toggle("에어플레인 모드", isOn: $planeToggle)

이렇게 한 줄 써주면 된다.

 

다른 옵션들 처럼 NavigationLink를 사용하지 않는다 왜냐하면 이걸 눌러도 페이지 이동이 필요없기 때문...

---

[SearchBar] 만들기

1. 이거 튜토리얼 찾았었는데 개복잡해서 머리를 쥐어뜯었더니 리이오가 한방에 짠! 하고 해결해주셨다.

@State var searchtext: String = ""

일단 @State 위치에 요렇게 서치텍스트 스트링을 걸어준다음,

 .searchable(text: $searchtext)

NavigationStack 마지막에 searchable을 달아주면 됨 / text 는 검색창에 있을 단어(State에서 비워놨으니 없음)

해보니 안들어가더라...ㅎ

2. 실질적으로 검색은 안되던데 왜 안되는지 모르겠다...

 

---

앞으로 할 것 : 반복문 공부해서 적용해보기