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 !!
  }