1

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).

buttons with background colors

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.

buttons with clear color on top of text

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)
    })
    
    
}
beowulf
  • 546
  • 1
  • 10
  • 16
  • I added `.background(Color(UIColor.testBackround))` where the `testBackround` color is black with `0.01` opacity. this makes the `.onTapGesture {}` fire and it only fires one button from the list and not both. This is a very hacky solution though. – beowulf Jul 27 '21 at 09:21
  • 2
    I've been developing for watchos for some time and alpha 0.01 is widely used solution there =) – Phil Dukhov Jul 27 '21 at 10:25
  • This seems to be an issue with SwiftUI generally. I have found that using `.buttonStyle(PlainButtonStyle())` will fix the problem. See: [SwiftUI - Two buttons in a List](https://stackoverflow.com/questions/56576298/swiftui-two-buttons-in-a-list). That style is available in WatchOS. It doesn't seem to be that you have to set the style to borderless, rather you have to explicitly set the style when it is in a list. – Yrb Jul 27 '21 at 18:25

0 Answers0