在 SwiftUI 中将 Picker 的焦点边框隐藏在 watchOS 上

问题描述

我需要使用 Picker 视图，但我没有看到任何隐藏绿色焦点边框的选项.

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

代码:

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

推荐答案

以下扩展在选择器边框上放置了一个黑色覆盖层.

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

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

用法

确保 .focusBorderHidden() 是 first 修饰符.

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

这篇关于在 SwiftUI 中将 Picker 的焦点边框隐藏在 watchOS 上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！