Как реализовать чипы выбора компонентов материала с помощью SwiftUI?
Пользовательский интерфейс Chips - это часть материального дизайна. Они широко используются в качестве вспомогательного компонента, включая домашнюю страницу носителя. Сначала мы разберемся, что требуется для создания хорошего пользовательского интерфейса чипов.
Требование
- Chips View, который включает изображение и текст
- Выбрать жест и отменить выбор
- Контейнер автоматического макета, который может разметить фишки
Создание представления чипов
Представление фишек можно построить двумя способами.
- Горизонтальный стек с текстом и изображением.
- Использование нового введенного (в iOS-14) Label.
В этой демонстрации мы собираемся использовать HStack, поскольку метки SwiftUI все еще находятся в стадии бета-тестирования.
Вывод:
Строительный контейнер для чипов:
Мы хотим расположить виды фишек как текстовый поток (то есть справа - слева - следующая строка - повторить). Для этого нам нужно изменить руководство по макету. Нам также понадобится считыватель геометрии, чтобы получить доступную ширину и высоту.
Полная демонстрация:
