Как создавать и анимировать флажки в SwiftUI

Создавайте различные анимированные флажки с помощью Shapes и AnimatableData

Окно флажка RoundedRectangle

Для первого флажка начните с создания нового представления структуры и добавления к нему RoundedRectangle. Используйте функцию stroke и присвойте ей StrokeStyle с шириной линии по вашему выбору:

Вставьте RoundedRectangle в ZStack и добавьте еще RoundedRectangle, заполненный выбранным вами цветом. Убедитесь, что второй RoundedRectangle меньше первого:

Объявите связывающую логическую переменную с именем checked в верхней части представления структуры. Добавьте изображение галочки под вторым RoundedRectangle внутри скобки условия, как показано ниже:

Теперь используйте ту же переменную checked для управления цветами прямоугольников:

Объявите другую переменную для управления значением функции trim первого RoundedRectangle. Это значение будет анимировано. Поместите это значение в переменную animatableData:

Измените значение to: функции trim на новую переменную trimVal:

Вы закончили с CheckBoxView. Внутри вашего ContentView добавьте свой CheckBoxView в качестве кнопки и передайте две переменные состояния (checked и trimVal):

Вам нужно изменить checked и trimVal внутри кнопки. Внутри withAnimation присвойте trimVal значение 1 и используйте toggle(), чтобы изменить логическое значение checked. Вы также можете добавить оператор else, чтобы отменить анимацию:

Вместо кнопки можно использовать onTapGesture. Это устранит мигание, которое вы получаете при нажатии кнопки:

Круговой CheckBox

Вы можете вернуться к своему CheckBoxView и изменить форму на круг, как показано ниже:

Капсула CheckBox

У меня две капсулы, одна над другой. Давайте добавим две переменные: width и removeText. Переменная width будет использоваться с рамками капсулы. Чтобы убедиться, что вторая капсула меньше первой, вычтите 10 из ширины. Наконец, добавьте текстовое представление внутри оператора if, как показано ниже:

Внутри вашего ContentView добавьте переменные removeText и width и измените код onTapGesture на код ниже:

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