Всем привет! Вы на канале школы мобильной разработки SwiftBook. Здесь мы рассказываем и показываем всё, что знаем о языке Swift и Kotlin: увлечённо, понятно и без воды.
С вами Анна Васичко и в этом уроке мы поговорим про элемент, доступный в SwiftUI, который называется Picker - он используется для осуществления выбора среди набора значений.
Ссылка на видео здесь.
Picker создаётся на основе параметров selection, куда передаётся bindibg свойство, title и content.
Давайте рассмотрим возможности этого элемента на следующем примере.
Для начала мы объявим перечисление, в котором будут храниться значения, которые мы будем отображать далее при помощи Picker.
Это будет перечисление с неким набором товаров, назовём его GoodsCategory с типом исходных значений String, а также подпишем перечисление под протоколы Caseiterable для доступа к свойству allCases, а также Identifiable, чтобы обеспечить возможности уникальной идентификации для значений.
enum GoodsCategory: String, CaseIterable, Identifiable {
case clothes
case shoes
case food
case electronics
Внутри перечисления укажем также вычисляемые свойства id и также свойство title, возвращающее строковую репрезентацию для элементов перечисления:
var id: Self {
self
}
var title: String {
switch self {
case .clothes:
return "Clothes"
case .shoes:
return "Shoes"
case .food:
return "Food"
case .electronics:
return "Electronics"
}
}
}
Теперь перейдём непосредственно к самому Picker, обратимся к этому элементу с параметрами title, selection и content
В selection нам необходимо передать binding свойство, для этого выше объявим State private свойство с типом нашего перечисления и со значением в виде одного из кейсов.
Выбор при помощи пикера будет осуществляться среди кейсов перечисления.
Теперь передадим это свойство со знаком $ в параметр selection нашего пикера.
В контенте пикера отобразим при помощи текста кейсы перечисления: в сам текст мы передаём строку, обращаясь к свойству title, а также мы должны добавить тэги, этого требует Picker, в тэгах мы обращаемся к соответствующему кейсу перечисления.
Но, понятное дело, что вот так прописывать текст для каждого кейса не имеет смысла, не зря мы подписывали перечисление под протоколы CaseIterable и Identifiable, мы воспользуемся инструментом ForEach:
ForEach(GoodsCategory.allCases) { category in
Text(category.title).tag(category)
}
И справа мы уже видим отобразившийся Picker.
По дефолту он имеет стиль меню.
Давайте поменяем цвет Picker на, например, красный
И также обернём его в Vstack и ниже добавим Hstack, в котором будем отображать значение, выбранное через Picker.
Сейчас я хочу вам продемонстрировать, что с этим значением можно далее как-либо работать. В нашем случае мы просто отобразим его на экране.
.tint(.red)
HStack {
Text("You search in:")
Text(selectedCategory.rawValue)
}
Также мы можем поместить Picker внутрь List, в нашем случае я просто заменю VStack на List, и здесь уже цвет не отображается, поэтому модификатор tint мы можем удалить.
Зато в этом варианте нам становится доступен к отображению параметр title у Пикера, мы видим его слева.
Кроме того, мы можем изменить стиль Picker. Для этого используется модификатор
.pickerStyle
.pickerStyle(.segmented)
У этого варианта мы можем, например, изменить цвет фона
.background(Color.gray)
Также есть стили wheel и inline.
Кроме того, при стандартном отображении в виде меню помимо текста можно также добавить и иконку, вот таким образом:
category in
HStack {
Text(category.title).tag(category)
Spacer()
Image(systemName: "magnifyingglass.circle")
}
Можно сделать разные картинки для разных категорий при помощи switch, у меня есть для этого сниппет, правда я не нашла подходящей иконки для обуви, оставила поэтому картинку с лупой.
Вот таким образом можно работать с элементом Picker в SwiftUI, он достаточно интересный и несложный в использовании.
Подписывайся на наши соцсети: Telegram / VKontakte
Вступай в открытый чат для iOS-разработчиков: t.me/swiftbook_chat