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)
}
}
}
Same answer as in How to remove highlight on tap of List with SwiftUI?
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 Button
s work again in the List
, which is another problem I encountered.
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 NavigationLink
s. I hope it helped some of you 🤞🏻
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With