Я думаю, мы все согласны с тем, что самое большое преимущество 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 г.