Я думаю, мы все согласны с тем, что самое большое преимущество SwiftUI - это возможность реализовать определенные элементы управления всего с помощью пары строк; это полная противоположность UIKit, где даже самый простой элемент управления требует нескольких строк кода для его правильной инициализации и настройки. Таким образом, становится понятным, почему SwiftUI с первого дня приобрел столько поклонников и продолжает это делать.
Несмотря на то, что SwiftUI еще не идеален, и есть много разработчиков, предпочитающих UIKit над SwiftUI - и по уважительным причинам - мы просто не можем упустить из виду, что есть несколько встроенных элементов управления (представлений в соответствии с терминологией SwiftUI), которые мы можем интегрировать в SwiftUI. вид как ветерок. Я писал о многих из них в предыдущих уроках, а сегодня сосредоточусь на другом; в режиме выбора.
Представление «Выбор» - это кандидат номер один, который можно использовать, когда дело доходит до предоставления пользователям ряда опций на выбор. В SwiftUI сборщик может довольно быстро и безболезненно получать различный вид; это очень полезно, когда в разных местах должны появиться разные типы сборщиков. Средства выбора могут представлять любые значения, которые мы хотим отобразить в качестве параметров для пользователей. Настройка сборщика не требует много времени и усилий; и в этом посте вы прочтете все, что вам нужно, чтобы сразу начать использовать средства выбора SwiftUI.
Примечание. В предыдущем уроке я писал о палитре цветов в SwiftUI. Это еще один вид палитры, предназначенный для выбора цветов, и если вы хотите, вы можете прочитать больше здесь.
Отображение средства выбора
В следующем фрагменте вы можете увидеть простейший способ инициализировать и представить Picker в представлении SwiftUI:
Представление Picker принимает три аргумента:
- Строковое значение, отображаемое в качестве метки средства выбора при определенных обстоятельствах. Подробнее об этом позже.
- Связывающее значение источника истины (обычно из локального свойства, отмеченного оболочкой свойства
@State
). - Параметры, которые выберет пользователь, обычно реализованы в виде серии текстовых представлений.
Первоначально фокусируясь на втором пункте, $colorScheme
, показанное выше, является значением привязки следующего свойства @State
:
Начальное значение, предоставленное такому свойству , должно указывать на параметр, показанный как выбранный по умолчанию. Чтобы найти соответствие между этим и правильным вариантом среди всех тех, которые включены в закрытие средства выбора, мы используем значение тега. У каждой опции должно быть различное значение тега, которое мы передаем в качестве аргументов методу tag(_:)
сразу после каждого просмотра. Это может быть что угодно, если тип значений, передаваемых методу tag(_:)
, совпадает с типом значения в источнике истины. В приведенном выше примере я выбрал целочисленное значение. Начальное значение 1, присвоенное свойству colorScheme
, совпадает со значением тега параметра «Темный», и оно будет автоматически выбираться, когда появится средство выбора.
Стили выбора
Есть несколько разных стилей, которые мы можем применить к Picker. Они влияют на его внешний вид, и какой из них наиболее подходит для использования, зависит только от потребностей разрабатываемого нами приложения.
Если мы не устанавливаем конкретный стиль, по умолчанию используется стиль меню. В этом случае параметр по умолчанию отображается в виде кнопки. При нажатии появляется меню с остальными опциями. Например, приведенные выше несколько строк кода приводят к следующему:
Другой стиль, знакомый из прошлого, - это стиль wheel. Здесь все доступные параметры отображаются в колесе, которое прокручивается вверх или вниз. Чтобы применить этот стиль к средству выбора, мы должны явно установить его, как показано ниже:
Также существует сегментированный стиль, который мы можем применить к средству выбора. С его помощью сегментированный элемент управления представляет параметры средства выбора.
Примечание. Вы можете прочитать руководство по сегментированному элементу управления в SwiftUI в этой старой публикации.
Как и раньше, для использования метода pickerStyle(_:)
необходимо предоставить сегментированный стиль:
Стиль колеса, вероятно, больше всего подходит для отображения длинного списка опций. С меню и сегментированными стилями пользователи ожидают найти небольшой набор опций на выбор.
Средство выбора в формах
Представление Picker особенно интересно при использовании в формах SwiftUI. Если мы не предоставляем конкретный стиль для использования, тогда средство выбора будет иметь совершенно другой вид, который не имеет ничего общего с ранее продемонстрированными. Рядом с выбранным параметром отображается индикатор раскрытия, но в дополнение к этому, текст метки также виден на переднем крае строки, содержащей средство выбора.
При нажатии открывается новое представление со всеми доступными параметрами, из которых пользователи могут выбирать. Это новое представление создается автоматически и содержит все параметры средства выбора в виде списка. Навигация по умолчанию приводится в движение для того, чтобы нажимать и открывать это вторичное представление и позволять пользователям перемещаться вперед и назад, чтобы изменить свой выбор.
Однако есть требование, чтобы все это работало. Мы должны включить представление формы в представление навигации, иначе средство выбора не будет реагировать на наши жесты касания.
Следующий код суммирует все это в нескольких строках. Обратите внимание, что представление верхнего уровня - это представление навигации, которое, в свою очередь, содержит представление формы. Форма содержит вид сечения, и, наконец, раздел содержит средство выбора:
Вот результат нескольких приведенных выше строк:
Перечисление нескольких вариантов
Во всех предыдущих частях я использовал один и тот же пример средства выбора, который содержал только две конкретные опции. В общем, это нормально и приемлемо для ограниченного числа вариантов. Но совершенно очевидно, что жесткое программирование длинных списков опций совершенно непродуктивно, и даже более того, иногда это также невозможно; что, если доступные параметры меняются динамически?
В таких случаях следует придерживаться другого подхода, который оставляет в стороне использование тегов, которые мы видели до сих пор. Мы перечисляем все доступные варианты, используя ForEach
представление.
Давайте посмотрим на простую демонстрацию. Следующий массив содержит все годы в виде целых чисел от 2000 до 2021. Свойство @State
содержит текущее значение (год), которое будет отображаться как выбор по умолчанию, когда появится средство выбора:
Следующее окно выбора отображает все годы в колесе. Он использует представление ForEach
, а массив years
задается в качестве аргумента:
$0.formatted(.number.grouping(.never))
- это новый способ работы с модулями форматирования в iOS 15. Его задача в этом примере - удалить разделитель группировки из отображаемых чисел, поэтому годы не будут отображаться как 2,021 или 2,021 (в зависимости от языкового стандарта).
Сборщики с настраиваемыми типами
Прямо выше мы использовали ForEach
, чтобы отображать значения базового типа данных (целое число) в средстве выбора. Однако мы можем сделать то же самое и с пользовательскими типами. Есть только одно требование - настраиваемый тип должен соответствовать протоколу Identifiable
.
Предположим, что мы разрабатываем игру и у нас есть следующая структура, которая представляет оружие и ущерб, который оно может причинить. Свойство id
является требованием протокола Identifiable
, и его цель - однозначно идентифицировать каждый Weapon
объект в коллекции:
Теперь давайте создадим массив с несколькими видами оружия и свойством @State
с оружием игрока по умолчанию:
Предоставление возможности смены оружия с помощью пикера очень похоже на то, что было продемонстрировано в предыдущей части. На самом деле меняется то, что вместо \.self
мы указываем путь ключа к свойству, которое однозначно идентифицирует каждый отображаемый объект; id
в этом случае:
Вывод
Работа с Picker в SwiftUI - не сложная задача, поскольку с его помощью довольно легко представить либо небольшой, либо длинный набор параметров. Изменить его внешний вид, установив любой из доступных стилей, одинаково легко, но в дополнение к этому впечатляет, как ведет себя средство выбора при использовании в формах. Я надеюсь, что несколько примеров, представленных в вышеупомянутых частях, предоставили вам всю необходимую информацию, так что вы можете без колебаний начать интеграцию средств выбора в свои проекты SwiftUI. Спасибо за чтение и ждите новых новостей.
👉 Вы нашли этот пост полезным? Теперь вы можете поддержать мои усилия по созданию бесплатных руководств, купив мне кофе!
Первоначально опубликовано на https://serialcoder.dev 1 октября 2021 г.