SwiftUI: modifica dinamicamente la transizione di una vista dopo la creazione della vista

Aug 16 2020

Voglio modificare dinamicamente la transizione di una vista dopo che la vista è stata creata. Attiva o disattiva una variabile di stato isTransition1facendo clic su un pulsante per passare da transition1e transition2come di seguito. Tuttavia, non funziona come previsto se una di queste transizioni è l'opacità. La vista da rimuovere immediatamente dopo aver modificato la transizione mantiene sempre la transizione originale. Sorprendentemente, se cambio transition2per scorrere, funzionerà senza problemi. La vista da rimuovere utilizzerà la nuova transizione. C'è un modo per far funzionare l'opacità qui?

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

Risposte

1 Asperi Aug 16 2020 at 11:44

Non sono sicuro di aver capito correttamente quale effetto hai cercato di ottenere, ma prova a ripristinare la gerarchia della vista (almeno questo ripristina definitivamente le transizioni, quindi non si influenzano a vicenda):

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