Учебник SwiftUI по созданию асинхронного микровзаимодействия с кнопками для вашего приложения

Добро пожаловать назад! Статьи на этой неделе охватывают ассортимент микровзаимодействий SwiftUI, которые я сделал для своих приложений. Преимущества этого взаимодействия могут действительно помочь сделать ваше приложение безупречным и простым в использовании.

Сегодняшнее руководство по микровзаимодействию посвящено созданию настраиваемой кнопки для асинхронных задач, таких как загрузка, отправка или загрузка данных.

Создание AsyncButton

Прежде чем приступить к программированию, давайте объясним различные состояния AsyncButton:

  • inactive - Пользователь не запустил асинхронную задачу.
  • inProgress - Активно обрабатываемая асинхронная задача.
  • isComplete - Асинхронная задача завершена.

В каждом из этих состояний AsyncButton будет показывать разные View, описывающие асинхронную задачу:

Начиная

Ниже представлен шаблон для нашего AsyncButton, который включает свойства для состояний, описанных выше. Мы собираемся сосредоточиться на программировании представлений для различных состояний. Если вам интересно, как работает функция init или что такое @ViewBuilder, то я рекомендую вам ознакомиться со статьей Маджид Джабраилов о силе оболочки свойств @ViewBuilder в SwiftUI.

Программирование различных состояний просмотра

Внутри замыкания label: мы собираемся начать с использования VStack для группировки всех различных представлений состояния. Я выбрал VStack специально для анимации AsyncButton изменений состояния. Если мы установим выравнивание стека на .center, тогда новые представления будут анимироваться из центра кнопки, создавая впечатление, что кнопка сама меняет размер.

При изменении состояния кнопки мы возвращаем различные представления, такие как ProgressView, Image и content, которые предоставляются при создании экземпляра.

Обновление состояния кнопки

Когда пользователь нажимает AsyncButton, мы хотим убедиться, что делаем две вещи:

  • Вызов закрытия действия, переданного разработчиком во время создания экземпляра.
  • Обновите состояние AsyncButton, обновив свойство inProgress.

Добавление стиля

Ниже я добавил немного стиля к AsyncButton, но я рекомендую вам поэкспериментировать с ним и изменить его в соответствии с темой или стилем вашего приложения:

Использование AsyncButton

В этом примере показано, как создать простую кнопку отправки, используя наш полный AsyncButton:

Спасибо за прочтение!