Создавайте интуитивно понятные приложения для iOS

Оповещения - один из важнейших строительных блоков приложений iOS. Мы можем использовать их, чтобы информировать пользователей об ошибке, если что-то требует больше времени, например, загрузка файла или проверка, что все в порядке. Другой вариант использования предупреждений - это запрос подтверждения, когда пользователи нашего приложения хотят что-то удалить или осуществить банковский перевод.

SwiftUI имеет для этого Alert компонент, и есть несколько способов его использования. Давайте их проверим.

Тревога

Один из самых простых способов показать предупреждение с помощью SwiftUI - иметь локальную переменную состояния, чтобы указать, должно ли предупреждение быть видимым или нет. После этого нам нужно добавить модификатор вида .alert, который требует возврата вида Alert.

В этом примере мы видели, что переменная состояния showAlert сохраняет значение bool. Сначала предупреждение не отображается и отображается false. Когда мы нажимаем кнопку, нам нужно изменить переменную состояния на true, что активирует отображение предупреждения на экране.

Мы видим, что по умолчанию в предупреждении есть кнопка «ОК», чтобы его закрыть. Мы постараемся добавить больше кнопок позже в этой статье.

Для представления Alert мы можем предоставить не только поле title, но также поле message одно под другим.

Alert(title: Text("Title"),
      message: Text("Message"))

Оповещение с идентифицируемым предметом

Другой способ представить предупреждение в SwiftUI - использовать идентифицируемую переменную состояния представления. Используя этот подход, система компоновки SwiftUI передает значение этой переменной состояния, и мы можем заполнить заголовок предупреждения, сообщения или кнопки событий, используя их содержимое. Бонус в том, что как только этот элемент изменится, система макета SwiftUI обновит предупреждение с новым значением, что является довольно интересной функцией, которую мы получаем бесплатно.

Давайте посмотрим, как это сделать в коде. Сначала нам нужно настроить объект, реализующий протокол Identifiable. Создадим пользовательскую структуру. Нам нужно создать константу id, и мы можем использовать структуру UUID, которая представляет глобально уникальное значение, которое может идентифицировать значения между ними.

struct User: Identifiable {
  let id: UUID
  let name: String
}

Затем перейдем к части SwiftUI и создадим наше представление:

Важно отметить, что переменная состояния просмотра является необязательной, поскольку SwiftUI определяет, должно ли предупреждение отображаться на экране.

При использовании модификатора представления .alert у нас есть замыкание с входной переменной, которая является текущим значением переменной состояния. Таким образом, например, мы можем заполнить заголовок предупреждения.

Кнопки предупреждений

Теперь мы знаем, как отображать предупреждение на экране с помощью SwiftUI с двумя разными подходами. Но как мы можем показать более одной кнопки и настроить их?

Чтобы добавить кнопки к предупреждению, мы можем использовать либо инициализатор Alert, указывающий кнопку отклонения, либо инициализировать Alert, указав первичную и вторичную кнопки.

Давайте создадим подтверждающее оповещение, которое спросит наших пользователей, хотят ли они удалить что-то из списка:

Давайте развернем код. Чтобы отобразить предупреждение, мы используем наш первый подход с переменной состояния представления, которая указывает, когда мы хотим отображать предупреждение на экране.

Внутри модификатора представления .alert, в котором мы конструируем представление Alert, мы видим, что мы используем другой инициализатор для предоставления информации о кнопках предупреждений. Это особая кнопка, которая представляет действие алерта. В SwiftUI мы можем использовать четыре разных стиля кнопок:

  • default
  • cancel - указывает на отмену с помощью метки, предоставленной системой.
  • cancel(_:action:) - аналогично описанному выше, но с настраиваемой меткой.
  • destructive - указывает на деструктивное действие, например удаление.

Мы используем стили кнопок cancel и destructive для нашего уведомления о подтверждении, потому что наши пользователи могут отменить или удалить элемент из списка.

Показать несколько предупреждений

Есть два метода отображения нескольких предупреждений в представлении.

Использование переменных состояния

Первый способ - сохранить переменную состояния просмотра для каждого предупреждения. Но нам нужно добавить модификатор .alert - не для полного просмотра. Мы можем добавить его, например, для кнопки, вызывающей предупреждение. Если мы добавим два .alert модификатора один за другим, механизм компоновки SwiftUI покажет только первый:

Использование идентифицируемой переменной состояния

Мне гораздо больше нравится второй подход, потому что он более безопасен по типу. Во-первых, нам нужно настроить структуру, представляющую предупреждение, которое соответствует протоколу Identifiable. Внутри этой структуры у нас есть локальный тип перечисления, представляющий все типы предупреждений, которые мы хотели бы отображать и возвращать конкретное представление предупреждений. В идеале он должен быть разделен, но для демонстрации я оставил его так:

Затем мы хотим создать представление SwiftUI и использовать его. Наше представление будет иметь локальную переменную состояния с нашим новым типом AlertIdentifier при вызове и создании предупреждения. Мы можем использовать его и вычисленное свойство alertView, которое мы создали ранее, внутри перечисления ActiveAlert:

Здесь есть что распаковать, но главное - безопасно показывать несколько предупреждений в одном представлении без добавления переменной состояния для каждого предупреждения. Используя этот подход, нам не нужно беспокоиться о том, отображается ли наше предупреждение пользователю, потому что у нас нет нескольких .alert модификаторов представления, разбросанных по самому представлению.

TL;DR

Отображение предупреждения для информирования пользователей нашего приложения или запроса подтверждения имеет важное значение для пользовательского интерфейса. Мы можем показать предупреждение с помощью SwiftUI двумя способами. Первый заключается в использовании переменной состояния, которая указывает, является ли предупреждение видимым. Второй использует идентифицируемую переменную состояния, которую можно использовать для заполнения заголовка предупреждения, сообщения и кнопок.

Мы можем настроить несколько типов кнопок для оповещения. Если мы хотим показать больше двух, нам нужно будет использовать листы SwiftUI.

Чтобы представить несколько предупреждений в одном представлении, мы можем добиться этого либо с помощью нескольких переменных состояния представления, либо с помощью одной идентифицируемой структуры, которая будет отвечать за создание самого предупреждения.

Ресурсы