SwiftUI scrollTransition访问@State属性报错的解决方法

报错原因 #

shouldScale作为@State属性默认受Main Actor隔离，但scrollTransition的闭包属于非隔离的autoclosure，直接访问会违反Actor隔离规则，触发报错。

解决方法 #

方法1：用@MainActor修饰闭包 #

直接将scrollTransition的内容闭包标记为Main Actor隔离，确保访问shouldScale时处于正确的Actor上下文：

ScrollView(.horizontal) {
    LazyHStack {
        ForEach(items) { item in
            CardView(item: item)
                .scrollTransition(@MainActor { content, phase in
                    content.scaleEffect(phase.isIdentity && shouldScale ? 1 : 0.9)
                })
        }
    }
}
@State private var shouldScale = true

方法2：封装Main Actor隔离的计算逻辑 #

在视图中定义一个受Main Actor隔离的方法/计算属性，提前处理缩放逻辑，避免在闭包中直接访问@State：

struct ContentView: View {
    @State private var shouldScale = true
    // 数据源等其他属性
    
    @MainActor private func getScale(for phase: ScrollTransitionPhase) -> CGFloat {
        shouldScale ? (phase.isIdentity ? 1 : 0.9) : 1
    }
    
    var body: some View {
        ScrollView(.horizontal) {
            LazyHStack {
                ForEach(items) { item in
                    CardView(item: item)
                        .scrollTransition { content, phase in
                            content.scaleEffect(getScale(for: phase))
                        }
                }
            }
        }
    }
}

方法3：使用@Observable封装状态（iOS 17+） #

如果是iOS 17及以上版本，可将状态封装到Observable对象中，利用其自动Actor隔离特性简化代码：

@Observable
class ViewModel {
    var shouldScale = true
}

struct ContentView: View {
    @State private var viewModel = ViewModel()
    
    var body: some View {
        ScrollView(.horizontal) {
            LazyHStack {
                ForEach(items) { item in
                    CardView(item: item)
                        .scrollTransition { content, phase in
                            content.scaleEffect(phase.isIdentity && viewModel.shouldScale ? 1 : 0.9)
                        }
                }
            }
        }
    }
}

编辑上下文切换逻辑实现 #

在进入/退出编辑状态时，直接切换shouldScale的值即可让所有卡片尺寸统一：

Button("进入编辑") {
    withAnimation {
        shouldScale = false
    }
}
Button("退出编辑") {
    withAnimation {
        shouldScale = true
    }
}

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