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