SwiftUI中带动画Offset的按钮无法点击问题求助

问题根源在于：SwiftUI的.offset修饰符仅改变视图的绘制位置，不会同步更新视图的点击响应区域。你的HStack初始offset为-300，此时它的实际点击区域在屏幕左侧外，自然无法触发点击；当offset接近250时，HStack的部分响应区域刚好回到屏幕范围内，所以能短暂点击。

下面提供两种可行的解决方案：

方案一：使用transform代替offset #

transform(.offset(x:))会同时修改视图的绘制位置和点击响应区域，完美匹配你的动画需求：

struct ContentView: View {
    @State var offset: CGFloat = -300
    var body: some View {
        HStack {
            Button(action: {
                print("clickable")
            }, label: {
                Text("Click me")
            })
            Button(action: {
                print("clickable2")
            }, label: {
                Text("Click me2")
            })
            Button(action: {
                print("clickable3")
            }, label: {
                Text("Click me3")
            })
        }
        .transform(.offset(x: offset)) // 替换为transform
        .onAppear(perform: {
            withAnimation(.linear(duration: 10).repeatForever()) {
                offset = 300
            }
        })
    }
}

方案二：保留offset并扩展响应区域 #

如果必须使用.offset，可以通过添加全屏背景和设置contentShape让点击响应区域跟随绘制位置：

struct ContentView: View {
    @State var offset: CGFloat = -300
    var body: some View {
        Color.clear
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .overlay(
                HStack {
                    Button(action: {
                        print("clickable")
                    }, label: {
                        Text("Click me")
                    })
                    Button(action: {
                        print("clickable2")
                    }, label: {
                        Text("Click me2")
                    })
                    Button(action: {
                        print("clickable3")
                    }, label: {
                        Text("Click me3")
                    })
                }
                .offset(x: offset)
            )
            .contentShape(Rectangle()) // 确保全屏区域都能响应点击
            .onAppear(perform: {
                withAnimation(.linear(duration: 10).repeatForever()) {
                    offset = 300
                }
            })
    }
}

两种方案都能让按钮在动画过程中全程可点击，根据你的实际场景选择即可。

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