Учебник 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
:
Спасибо за прочтение!