SwiftUI: Thay đổi động chuyển đổi của một chế độ xem sau khi chế độ xem được tạo

Aug 16 2020

Tôi muốn thay đổi động chuyển đổi của chế độ xem sau khi chế độ xem được tạo. Tôi chuyển đổi một biến Trạng thái isTransition1bằng cách nhấp vào nút để chuyển đổi giữa transition1transition2như bên dưới. Tuy nhiên, nó không hoạt động như dự định nếu một trong những chuyển đổi này là độ mờ. Chế độ xem được xóa ngay sau khi thay đổi quá trình chuyển đổi luôn giữ chuyển đổi ban đầu của nó. Đáng ngạc nhiên, nếu tôi thay đổi transition2để trượt, nó sẽ hoạt động mà không có vấn đề gì. Chế độ xem bị xóa sẽ sử dụng chuyển đổi mới. Có cách nào để làm cho độ mờ hoạt động ở đây không?

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

Trả lời

1 Asperi Aug 16 2020 at 11:44

Không chắc liệu tôi có hiểu chính xác hiệu ứng mà bạn đã cố gắng đạt được hay không, nhưng hãy thử đặt lại phân cấp chế độ xem (ít nhất điều này chắc chắn đặt lại các chuyển đổi, vì vậy chúng không ảnh hưởng đến nhau):

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