Picker в SwiftUI: выбирай и назначай

Всем привет! Вы на канале школы мобильной разработки 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