SwiftUI : 뷰가 생성 된 후 뷰의 전환을 동적으로 변경

Aug 16 2020

뷰가 생성 된 후 뷰의 전환을 동적으로 변경하고 싶습니다 . 나는 상태 변수를 전환 isTransition1사이에 스위치 버튼을 클릭 transition1하고 transition2아래로. 그러나 이러한 전환 중 하나가 불투명하면 의도 한대로 작동하지 않습니다. 전환 변경 직후 제거 할 뷰는 항상 원래 전환을 유지합니다. 놀랍게도 transition2슬라이드로 변경 하면 문제없이 작동합니다. 제거 할보기는 새 전환을 사용합니다. 여기에서 불투명도를 작동시키는 방법이 있습니까?

let transition1 = AnyTransition.asymmetric(insertion: .move(edge: .trailing),
                                           removal: .move(edge: .leading))

let transition2 = AnyTransition.opacity

struct Wrapper1<Content: View>: View {
  let content: Content

  var body: some View {
    content
  }
}

struct Wrapper2<Content: View>: View {
  let content: Content

  var body: some View {
    content
  }
}

struct TextView: View {
  let count: Int
  let color: Color

  var body: some View {
    ZStack {
      color
        .edgesIgnoringSafeArea(.all)
        .frame(maxWidth: UIScreen.main.bounds.width,
               maxHeight: UIScreen.main.bounds.height)

      Text("Count: \(count)")
        .font(.title)
        .offset(y: -200)
    }
  }
}

struct ContentView: View {
  @State private var count = 0
  @State private var isTransition1 = false

  var body: some View {
    ZStack {
      if count % 2 == 0 {
        Wrapper1(content: TextView(count: count, color: Color.green)
          .transition(isTransition1 ? transition1 : transition2))
        } else {
          Wrapper2(content: TextView(count: count, color: Color.red)
            .transition(isTransition1 ? transition1 : transition2))
        }

      HStack(spacing: 100) {
        Button(action: {
          self.isTransition1.toggle()
        }) {
          Text("Toggle Transition").font(.title)
        }

        Button(action: {
          withAnimation(.linear(duration: 2)) {
            self.count += 1
          }
        }) {
          Text("Increase").font(.title)
        }
      }
    }
  }
}

답변

1 Asperi Aug 16 2020 at 11:44

달성하려는 효과를 올바르게 이해했는지 확실하지 않지만 뷰 계층 구조를 재설정하십시오 (적어도 전환이 재설정되므로 서로 영향을 미치지 않습니다).

  var body: some View {
    ZStack {
      if count % 2 == 0 {
        Wrapper1(content: TextView(count: count, color: Color.green)
          .transition(isTransition1 ? transition1 : transition2))
        } else {
          Wrapper2(content: TextView(count: count, color: Color.red)
            .transition(isTransition1 ? transition1 : transition2))
        }

      HStack(spacing: 100) {
        Button(action: {
          self.isTransition1.toggle()
        }) {
          Text("Toggle Transition").font(.title)
        }

        Button(action: {
          withAnimation(.linear(duration: 2)) {
            self.count += 1
          }
        }) {
          Text("Increase").font(.title)
        }
      }
    }.id(isTransition1)     // << here !!
  }