SwiftUI: Thay đổi động chuyển đổi của một chế độ xem sau khi chế độ xem được tạo
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 isTransition1
bằng cách nhấp vào nút để chuyển đổi giữa transition1
và transition2
như 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
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 !!
}