[SwiftUI] 동일한 화면에서 View 전환 모범 사례

동일한 화면에서 View 전환

SwiftUI의 경우 同一画面内에서 View를 전환하는 장면이 자주 있을 것이다.예를 들어 データ読み込み中,データの表示,エラー表示 등이다.
전환 방법도 if과switch의 방법이 있는데 이번switch에는 가능한 한 간단한 방법을 사용하겠습니다.
사용법

enum에서 변환 모드를 정의하고 @State를 통해 관리

①호출법, ②Binding방법을 사용한 2가지 모드

여러 모델의 실시를 보고 나는 좋은 점과 나쁜 점을 고려해 보고 싶다.

enum에서 전환 모드 정의

전환 모드는 다음과 같습니다.

enum ContentState {
    case first //１つ目のView
    case second(text: String) //２つ目のView（値を渡します）
    case third //３つ目のView
}

ContentView

홈 뷰는 다음과 같이 정의됩니다.

struct ContentView: View {
    
    @State var state: ContentState = .first
    
    var body: some View {
        NavigationView {
            switch state {
            case .first:
                FirstView { text in
                    state = .second(text: text)
                }
            case .second(let text):
                SecondView(text: text) {
                    state = .third
                }
            case .third:
                ThirdView(state: $state)

            }
        }
    }
}

방금 정의한 ContentState를 사용하고 @State로 초기 상태를 정의합니다.switch를 사용하여 각자의 도형으로view를 나누어 줍니다.FirstView,SecondView①호출 방법,ThirdView②Binding호출 방법을 사용합니다.
FirstView->SecondView->TheirdView->FirstView와 같은 전환 절차.FirstView,SecondView,ThirdView는 다음과 같은 실시 방식이다.

struct FirstView: View {
    
    var onClick: (String) -> Void
    
    var body: some View {
        VStack(spacing: 32) {
            Text("First")
                .font(.title)
            Button("Next") {
                onClick("From first")
            }
        }                
    }
}

struct SecondView: View {
    
    var text: String
    var onClick: () -> Void

    var body: some View {
        VStack(spacing: 32) {
            Text("Second")
                .font(.title)
            Text(text)
            Button("Next") {
                onClick()
            }
        }
    }
}

struct ThirdView: View {
    
    @Binding var state: ContentState
    
    var body: some View {
        VStack(spacing: 32) {
            Text("Third View")
            Button("go to First") {
                state = .first
            }
        }        
    }
}

①호출 사용 방법

장점

부View 측에서 enum의 내용을 몰라도 되기 때문에 코드를 추가하기 쉽다

서브뷰의 전환은 단방향으로 하기 쉽다

결점

여러 대상 전환 시 사용하기 어려움

코드가 약간 증가

② Binding을 사용하는 방법

장점

콜백이 없으므로 친View 측 코드가 간단해짐

서브뷰 전환은 여러 개의 서브뷰

를 뛰어넘을 수 있음

결점

enum의 내용은 보조 뷰에서 알아야 합니다

.

서브뷰의 전환 위치 추적이 어려워짐

끝맺다

호출을 사용하는 방법과 빙딩을 사용하는 방법을 비교해 봤다.둘 다 편한 방법이지만 단점도 있다.
설치할 때 이 장점과 단점을 감안하여 적당한 방법을 선택할 수 있다면 읽기 쉽고 유지보수성이 높은 코드를 쓸 수 있다.

보태다

이번에 View의 전환 관리는 사용되지 않았습니다ObservableObject.ObservableObject는 MVVM 구조의 ViewModel에 해당하지만 View의 전환 논리는 View 측면이 비교적 좋다.이렇게 하면 ViewModel이 복잡해지는 것을 방지하려는 의도가 있다.

샘플 코드

https://github.com/usk-sample/RouterSwitchSample