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

Posted

技术标签:

【中文标题】在 SwiftUI 中隐藏 Picker 在 watchOS 上的焦点边界【英文标题】:Hiding Picker's focus border on watchOS in SwiftUI 【发布时间】:2020-12-18 17:14:56 【问题描述】:

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

代码:

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

【问题讨论】:

【参考方案1】:

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

结果

代码

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()第一个修饰符。

Picker( [...] ) 
    [...]

.focusBorderHidden()
[...]

【讨论】:

【参考方案2】:

Picker 上,可以添加类似这样的东西来掩盖绿色边框。

@ScaledMetric var borderWidth: CGFloat = 5 // or it can be 3

Picker 
...
.border(Color.black, width: borderWidth)

【讨论】:

以上是关于在 SwiftUI 中隐藏 Picker 在 watchOS 上的焦点边界的主要内容,如果未能解决你的问题,请参考以下文章

SwiftUI:将动画添加到 Picker 而不将其添加到值中

在 SwiftUI 的 Picker 中添加新元素

在 SwiftUI 中,我如何知道 Picker 选择何时更改?为啥 didSet 不起作用?

SwiftUI Picker 在同一视图中更改第二个状态变量

SwiftUI Picker 视图在 TabView 中消失

在 SwiftUI 中,Picker 扩展为占据 HStack 内的整个空间