watchOS 10 TextField background behaviour in List

Question

Hi,

I am struggling with a design change in watchOS 10.

I have a TextField next to an Image in an HStack inside a List

The following code produces another (correct looking view) when using watchOS9. With watchOS10 a strange background is added that I can not remove.

struct ContentView: View {
    @State private var searchFieldInput: String = ""
    var body: some View {
           
            List {
                HStack{
                    Image(systemName: "magnifyingglass").foregroundColor(.accentColor)
                    TextField("Search", text: $searchFieldInput)
                }
            }
    }
}

This picture shows the difference: (watchOS 9 on the left; watchOS 10 on the right

Does anybody know how to remove this background or if this intentionally?

I already filed a Feedback (FB12293618) but haven't heard back yet

439

Posted by

arno_app

Reply

Add a Comment

Answer 1

Same for me, with similar code that I use for a clearable TextField for iOS and Watch OS. I couldn't find a workaround because the background is added as an alpha visual effect in TextField itself and could not be overwritten or even blended.

HStack {
    TextField(...)

    Spacer()

    Button(...)
}

If I still want this to look decent in WatchOS 10 looks like I'll need to experiment with an overlay and alpha gradient for text blending which pretty much defeats the purpose and magic of SwiftUI of reusing views between platforms and OS versions.

Posted by

justicer

Add a Comment

Answer 2

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

    ...
}

Posted by

justicer

Add a Comment

watchOS 10 TextField background behaviour in List

Replies