Two buttons in swift UI on watchOS - swiftui

Question

I have a view which I would like to use as a List item on WatchOS.
The view has a ZStack which has one VStacks in it and HStack on top of it. The top HStack has two buttons in it, each taking half of the list item. The idea is to have two transparent buttons on top of the text in the list item with two different actions based on which one is tapped.
When I tap one of the buttons in the list. Both of the action callbacks get triggered. I found this post where the Button style had to be changed to BorderlessButtonStyle to have the callback work but this is not available on watchOS.
Another solution was to use .onTapGesture {} on the button which works for me when the button has some color(check image below for reference).
But when I set the color of the buttons to clear and it looks as I want it, the .onTapGesture {} is not called anymore and only the action callback fires.
Is it even possible to make this work with SwiftUI and using List?
Here is my view code.
var body: some View {
ZStack(content: {
VStack(alignment: .leading, spacing: nil, content: {
Text(goal.title).foregroundColor(.red).padding(.leading, 8)
.padding(.trailing, 8)
.padding(.top, 4)
HStack(alignment: .center,content: {
Text("0").padding(.top,8).padding(.trailing, 16).padding(.bottom, 4).font(.title2)
}).frame(minWidth: 0, maxWidth: .infinity, minHeight: 0,maxHeight: 35,alignment: .trailing)
}).listRowPlatterColor(Color.blue).frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, alignment: .leading).background(Color(UIColor.goalBackroundColor)).cornerRadius(10)
HStack(alignment: .center, spacing: nil, content: {
Button(action: {
//print("\(goal.id) -1")
print("huehue")
}){
Text("").frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: .center)
}.background(Color.clear).onTapGesture {
print("\(goal.id) -1")
}
Button(action: {print("hue")}){
Text("").frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: .center)
}.background(Color.clear).onTapGesture {
print("\(goal.id) +1")
}
}).frame(minWidth: 0, maxWidth: .infinity, minHeight: 0,maxHeight: .infinity,alignment: .center)
})
}