Скрытие границы фокуса Picker на watchOS в SwiftUI
Мне нужно использовать представление 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()
}
Ответы 4
Следующее расширение помещает черное наложение поверх границы средства выбора.
Результат
Код
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()
[...]
На Picker можно добавить что-то подобное, чтобы скрыть зеленую рамку.
@ScaledMetric var borderWidth: CGFloat = 5 // or it can be 3
Picker {
...
}.border(Color.black, width: borderWidth)
Добавление маски углаРадиус любого необходимого, но с отступом 2 или более (чтобы замаскировать внешний край представления), поскольку ширина зеленой границы на часах имеет тенденцию быть около 2... сделает свое дело
.mask(RoundedRectangle(cornerRadius: 12).padding(2))
Мне также нравится метод границы от Рэя Хантера, но чтобы все было аккуратно и просто, я предпочитаю избегать большого количества переменных @...
Вместо использования средства выбора вы можете использовать любое представление (с пользовательской рамкой или без нее) вместе с модификатором .digitalCrownRotation().
Инструкции смотрите здесь: https://www.hackingwithswift.com/quick-start/swiftui/how-to-read-the-digital-crown-on-watchos-using-digitalcrownrotation
Обратите внимание, что он работает только со значением Double, но вы можете сделать его целым, используя форматирование текста и установив соответствующие параметры (например, значение шага).
Основное функциональное отличие, которое я обнаружил, заключается в том, что вы не можете «пролистнуть», чтобы изменить значение (но я думаю, что это на самом деле бонус, если вам нужно поместить его в ScrollView...).
Наконец, имейте в виду, что для фокусировки на касании это будет работать только в том случае, если они коснутся не «чистого пространства» внутри вашего представления (не пространства между рамкой и любым текстом/изображениями внутри). После некоторых исследований я обнаружил, что применение .contentShape(Rectangle()) к представлению, действующему как сборщик, исправило это. Я думаю, что это должно быть перед модификатором .digitalCrownRotation(), но я точно не помню.