SwiftUI: Görünüm oluşturulduktan sonra görünümün geçişini dinamik olarak değiştirin

Question

Görünüm oluşturulduktan sonra görünümün geçişini dinamik olarak değiştirmek istiyorum . Ben bir devlet değişkeni geçiş isTransition1arasındaki anahtara bir düğmeyi tıklayarak transition1ve transition2aşağıdaki gibi. Ancak, bu geçişlerden birinin opaklık olması amaçlandığı gibi çalışmaz. Geçiş değiştirildikten hemen sonra kaldırılacak görünüm her zaman orijinal geçişini korur. Şaşırtıcı bir şekilde, transition2kaydırmaya geçersem sorunsuz çalışacaktır. Kaldırılacak görünüm, yeni geçişi kullanacaktır. Burada opaklığı çalıştırmanın bir yolu var mı?

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

Answer 1

Hangi etkiyi elde etmeye çalıştığınızı doğru anladığımdan emin değilim, ancak görünüm hiyerarşisini sıfırlamaya çalışın (en azından bu, geçişleri kesinlikle sıfırlar, böylece birbirlerini etkilemezler):

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