swiftuiwatchosswiftui-picker

Hiding Picker's focus border on watchOS in SwiftUI


I need to use a Picker view but I don't see any options to hide the green focus border.

Code:

@State private var selectedIndex = 0
var values: [String] = (0 ... 12).map { String($0) }

var body: some View {
    Picker(selection: $selectedIndex, label: Text("")) {
        ForEach(0 ..< values.count) {
            Text(values[$0])
        }
    }
    .labelsHidden()
}

Screenshot of the Picker


Solution

  • The following extension puts a black overlay over the picker border.

    Result

    Screenshot of the result

    Code

    extension Picker {
        func focusBorderHidden() -> some View {
            let isWatchOS7: Bool = {
                if #available(watchOS 7, *) {
                    return true
                }
    
                return false
            }()
    
            let padding: EdgeInsets = {
                if isWatchOS7 {
                    return .init(top: 17, leading: 0, bottom: 0, trailing: 0)
                }
    
                return .init(top: 8.5, leading: 0.5, bottom: 8.5, trailing: 0.5)
            }()
    
            return self
                .overlay(
                    RoundedRectangle(cornerRadius: isWatchOS7 ? 8 : 7)
                        .stroke(Color.black, lineWidth: isWatchOS7 ? 4 : 3.5)
                        .offset(y: isWatchOS7 ? 0 : 8)
                        .padding(padding)
                )
        }
    }
    

    Usage

    Make sure .focusBorderHidden() is the first modifier.

    Picker( [...] ) {
        [...]
    }
    .focusBorderHidden()
    [...]