SwiftUI中Sheet内视图切换动画失效问题排查

我想用SwiftUI的Sheet组件展示选项列表，点击选项时实现视图从右侧滑入的切换动画，编写了如下代码但未达到预期效果——尝试通过withAnimation结合布尔变量实现视图切换动画失败：

struct XYZ: App {
    let persistenceController = PersistenceController.shared
    @State var isPresented : Bool = false
    @State var isSwiped : Bool = false
    var body: some Scene {
        WindowGroup {
            optionList(isPresented: $isPresented)
                .sheet(isPresented: $isPresented, content: {
                    Text("This is from modal view!")
                        .onTapGesture {
                            withAnimation(Animation.easeIn(duration: 10)){
                                isSwiped.toggle()
                            }
                        }
                    if isSwiped {
                        checkedList()
                            .transition(.move(edge: .trailing))
                    }
                })
        }
    }
}
struct optionList : View {
    @Binding var isPresented : Bool
    var body: some View {
        Text("This is a testView")
            .onTapGesture {
                withAnimation{
                    isPresented.toggle()
                }
            }
    }
}

struct checkedList : View {
    @State var name : String = "WatchList"
    var arr = ["First", "Second", "Third", "Fourth", "Fifth", "Sixth", "Seventh"]
    @State var mp : [Int:Int] = [:]
    var body: some View {
        VStack{
            HStack{
                TextField("WatchlistName", text: $name)
                    .padding(.all)
                Image(systemName: "trash.fill")
                    .padding(.all)
                    .onTapGesture {
                        print("Delete watchList!!")
                    }
            }
            ScrollView{
                ForEach(arr.indices) { item in
                    HStack (spacing: 0) {
                        Image(systemName: mp.keys.contains(item) ? "checkmark.square" : "square")
                            .padding(.horizontal)
                        Text(arr[item])
                        
                    }
                    .padding(.bottom)
                    .frame(width: UIScreen.main.bounds.width, alignment: .leading)
                    .onTapGesture {
                        if mp.keys.contains(item) {
                            mp[item] = nil
                        } else {
                            mp[item] = 1
                        }
                        
                        
                    }
                }
            }
            Button {
                print("Remove Ticked Elements!")
                deleteWatchListItem(arr: Array(mp.keys))
            } label: {
                Text("Save")
            }
        }
    }
    
    func deleteWatchList(ind: Int){
        print(ind)
    }
    
    func deleteWatchListItem(arr : [Int]) {
        print(arr)
    }
}

问题根源 #

1. 视图结构不符合transition要求：Sheet的content中直接并列Text和checkedList，没有用同一个父容器包裹。SwiftUI的transition需要视图在同一个容器内被添加/移除时才会触发动画，直接并列的视图无法正确应用过渡效果。
2. 状态作用域错误：isSwiped是App层级的@State，而Sheet是独立的模态环境，跨层级的状态管理会导致动画触发时视图更新不及时。
3. 动画触发逻辑不匹配：虽然用withAnimation包裹了isSwiped.toggle()，但由于视图结构问题，过渡动画没有被绑定到正确的视图更新流程中。

修复方案 #

1. 将Sheet的内容重构为独立视图，把isSwiped状态移到该视图内部，确保状态和视图逻辑绑定。
2. 使用ZStack作为容器，让需要切换的视图在同一个层级下，保证transition能正确触发。
3. 调整视图切换逻辑，确保动画作用于容器内的视图变化。

修复后的完整代码 #

struct XYZ: App {
    let persistenceController = PersistenceController.shared
    @State var isPresented : Bool = false
    
    var body: some Scene {
        WindowGroup {
            optionList(isPresented: $isPresented)
                .sheet(isPresented: $isPresented) {
                    SheetContentView()
                }
        }
    }
}

struct optionList : View {
    @Binding var isPresented : Bool
    var body: some View {
        Text("This is a testView")
            .onTapGesture {
                withAnimation{
                    isPresented.toggle()
                }
            }
    }
}

// 独立的Sheet内容视图，封装状态和切换逻辑
struct SheetContentView: View {
    @State private var isSwiped = false
    
    var body: some View {
        ZStack {
            // 初始视图
            Text("This is from modal view!")
                .onTapGesture {
                    withAnimation(.easeIn(duration: 1)){
                        isSwiped.toggle()
                    }
                }
            
            // 切换视图，带右侧滑入过渡
            if isSwiped {
                checkedList()
                    .transition(.move(edge: .trailing))
            }
        }
    }
}

struct checkedList : View {
    @State var name : String = "WatchList"
    var arr = ["First", "Second", "Third", "Fourth", "Fifth", "Sixth", "Seventh"]
    @State var mp : [Int:Int] = [:]
    
    var body: some View {
        VStack{
            HStack{
                TextField("WatchlistName", text: $name)
                    .padding(.all)
                Image(systemName: "trash.fill")
                    .padding(.all)
                    .onTapGesture {
                        print("Delete watchList!!")
                    }
            }
            ScrollView{
                ForEach(arr.indices) { item in
                    HStack (spacing: 0) {
                        Image(systemName: mp.keys.contains(item) ? "checkmark.square" : "square")
                            .padding(.horizontal)
                        Text(arr[item])
                        
                    }
                    .padding(.bottom)
                    .frame(maxWidth: .infinity, alignment: .leading)
                    .onTapGesture {
                        if mp.keys.contains(item) {
                            mp[item] = nil
                        } else {
                            mp[item] = 1
                        }
                    }
                }
            }
            Button {
                print("Remove Ticked Elements!")
                deleteWatchListItem(arr: Array(mp.keys))
            } label: {
                Text("Save")
            }
        }
        .background(Color.white) // 添加背景覆盖初始视图，避免重叠
    }
    
    func deleteWatchList(ind: Int){
        print(ind)
    }
    
    func deleteWatchListItem(arr : [Int]) {
        print(arr)
    }
}

额外优化点 #

• 把frame(width: UIScreen.main.bounds.width)改成frame(maxWidth: .infinity)，避免依赖屏幕尺寸，适配不同设备。
• 给checkedList添加白色背景，确保切换时完全覆盖初始视图，避免视觉重叠。

内容的提问来源于stack exchange，提问作者Hitesh Patil