@arno_app here's how I remediated this issue using the SwiftUI overlay with gradient approach. The trick was in using also * .listItemTint** (Still disappointed that this bug was not caught before launching in Watch OS 10 and had to add all this extra code). Hope this helps!
TextField(...)
.listRowInsets(DrawingConstants.zeroPadding)
.listItemTint(DrawingConstants.listItemTint) // THIS IS THE TRICK FOR WATCHOS 10
.overlay {
HStack(spacing: 0) {
Spacer()
Rectangle()
.fill(DrawingConstant.gradient)
.frame(maxWidth: DrawingConstants.spacingWidth, maxHeight: .infinity)
Button(...)
.buttonStyle(.borderless)
.frame(maxHeight: .infinity)
.background(DrawingConstants.overlayBackground)
}
.clipShape(RoundedRectangle(cornerRadius: DrawingConstants.clearButtonRadius))
}
...
struct DrawingConstants {
static let overlayBackground: Color = ... red: 31, green: 31, blue: 31
static let listItemTint = {
if #available(watchOS 10, *) {
return Color.clear
} else {
return DrawingConstants.overlayBackground
}
}()
static let spacingGradient = LinearGradient(gradient: Gradient(colors: [.clear, DrawingConstants.overlayBackground]), startPoint: .leading, endPoint: .trailing)
...
}