Создавайте интуитивно понятные приложения для 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.
Чтобы представить несколько предупреждений в одном представлении, мы можем добиться этого либо с помощью нескольких переменных состояния представления, либо с помощью одной идентифицируемой структуры, которая будет отвечать за создание самого предупреждения.