Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

SwiftUI List disable cell press

I am using xCode 11 beta 7 with SwiftUI.

I have a simple list which each list element has several buttons. Currently when the user presses the cell(not the buttons) it is highlighting the back of the list cell(probably not the correct terminology for SwiftUI).

How do i disable this behaviour? I could not locate an obvious api to disable it.

List {
    HStack {
        Group {
            Button(action: {}) {
                Text("Read").padding(5)
            }.onTapGesture {
                print("1")                    
            }
            .padding()
            .background(Color.blue)
            .cornerRadius(5)
        }
        Group {
            Button(action: {}) {
                Text("Notify").padding(5)
            }.onTapGesture {
                print("2") 
            }
            .padding()
            .background(Color.purple)
            .cornerRadius(5)
        }
        Group {
            Button(action: {}) {
                Text("Write").padding(5)
            }.onTapGesture {
                print("3")
            }
            .padding()
            .background(Color.yellow)
            .cornerRadius(5)
        }
    }
}
like image 984
Reedy Avatar asked Sep 03 '19 10:09

Reedy


1 Answers

Same answer as in How to remove highlight on tap of List with SwiftUI?

I know I'm a bit late, but it's for those of you who are searching (like me 😇)

What I found

I guess you should take a look at the short article How to disable the overlay color for images inside Button and NavigationLink from @TwoStraws

Just add the .buttonStyle(PlainButtonStyle()) modifier to your item in the List and you'll have what you wanted. It also makes the Buttons work again in the List, which is another problem I encountered.

A working example for Swift 5.1 :

import Combine
import SwiftUI

struct YourItem: Identifiable {
    let id = UUID()
    let text: String
}

class YourDataSource: ObservableObject {
    let willChange = PassthroughSubject<Void, Never>()
    var items = [YourItem]()

    init() {
        items = [
            YourItem(text: "Some text"),
            YourItem(text: "Some other text")
        ]
    }
}

struct YourItemView: View {
    var item: YourItem

    var body: some View {
        VStack(alignment: .leading) {
            Text(item.text)
            HStack {
                Button(action: {
                    print("Like")
                }) {
                    Image(systemName: "heart.fill")
                }
                Button(action: {
                    print("Star")
                }) {
                    Image(systemName: "star.fill")
                }
            }
        }
        .buttonStyle(PlainButtonStyle())
    }
}

struct YourListView: View {
    @ObservedObject var dataSource = YourDataSource()

    var body: some View {
        List(dataSource.items) { item in
            YourItemView(item: item)
        }
        .navigationBarTitle("List example", displayMode: .inline)
        .edgesIgnoringSafeArea(.bottom)
    }
}

#if DEBUG
struct YourListView_Previews: PreviewProvider {
    static var previews: some View {
        YourListView()
    }
}
#endif

As said in the article, it also works with NavigationLinks. I hope it helped some of you 🤞🏻

like image 149
Rémi B. Avatar answered Oct 11 '22 12:10

Rémi B.