SwiftUI의 Tap 제스처에 이펙트 추가

SwiftUI의 List는 셀 내부에 Button이 배치되어 있는 경우, Button을 탭하지 않고도 셀을 탭하는 것만으로 Button의 탭이 유발합니다.
셀 내부에 Button이 여러 개 배치된 경우 각 Button의 작업이 수행되므로 셀 내부에 Button을 배치하기가 어렵습니다.

대신 수단으로 탭하고 싶은 대상에는 TapGesture를 지정하는 것입니다만, 단지 지정하는 것만으로 탭하고 있는 것 같은 이펙트가 나오지 않기 때문에 시인성이 좋지 않습니다.

그래서 Tap 제스처에 이펙트를 붙이는 스니펫을 만들어 보았습니다.

struct TapGestureWithEffect: ViewModifier {
    let action: () -> Void

    @State private var opacity = 1.0

    func body(content: Content) -> some View {
        content
            .opacity(self.opacity)
            .gesture(TapGesture().onEnded {
                withAnimation {
                    self.opacity = 0.3
                }
                DispatchQueue.main.asyncAfter(deadline: .now() + .milliseconds(150)) {
                    withAnimation {
                        self.opacity = 1
                    }
                }
                self.action()
            })
    }
}

이것은 다음과 같이 사용할 수 있습니다.

struct ContentView: View {
    var body: some View {
        List {
            ForEach(0..<100) { i in
                HStack(spacing: 12) {
                    RoundedRectangle(cornerRadius: 5)
                        .fill(Color.black)
                        .frame(width: 50, height: 50)
                    Text("Action")
                        .modifier(TapGestureWithEffect {
                            print(i)
                        })
                }
            }
        }
    }
}

이것은 다음과 같이 작동합니다.


이번은 단순히 opacity를 조작한 이펙트였습니다만, 이 근처를 변경하는 것으로 좀 더 고집한 이펙트를 만들 수도 있을까 생각합니다.