Списки SwiftUI с настраиваемыми боковыми кнопками

В этом уроке мы собираемся создать настраиваемый список с двумя кнопками действий, которые появятся, когда вы проведете по строке влево. Начнем с одной боковой кнопки. Это будет кнопка удаления. Затем мы можем добавить вторую кнопку, чтобы показать, как добавить дополнительные кнопки в строку.

Начните новый проект iOS 14 и продолжайте.

Константы и переменные

Создайте новую структуру типа View и объявите следующие переменные:

  • Text: хранит содержимое нашей строки.
  • index: индекс строки. Используется для удаления / скрытия строки.
  • width: Ширина всех боковых кнопок. Используется, чтобы знать, сколько смахнуть влево.
  • indices: Связывающая переменная массива, в которой хранятся индексы удаленных / скрытых строк.
  • offset: Переменная с плавающей запятой, используемая для перемещения строки влево при смахивании.
  • scale: используется для анимации масштаба боковых кнопок, когда они появляются.

Содержимое строки

Внутри переменной body используйте GeometryReader, чтобы получить ширину и высоту нашей строки. В VStack вставьте все содержимое своей строки. В этом руководстве у нас есть Text представление, которое принимает нашу текстовую переменную и боковую кнопку, которая будет кнопкой удаления.

Используйте изображение с именем SF Symbol «мусор» для кнопки удаления. Используйте onTapGesture вместо помещения изображения в Button(). Внутри onTapGesture добавьте индекс удаленной / скрытой строки в массив indices.

Используйте модификатор фона на HStack, чтобы добавить цвет. Без цвета фона вы сможете пролистывать строку только тогда, когда ваше движение начинается поверх Text представления. Мы хотим иметь возможность запускать свайп из любой позиции внутри строки:

Анимация смахивания

Добавьте следующие модификаторы к HStack под модификатором фона:

  • offset: используется для смещения строки влево и обратно в правильное положение. Значение ширины смещения чередуется между нулем и шириной боковых кнопок в минусе.
  • animation: анимирует движение строки и масштаб кнопки корзины.
  • gesture: использует DragGesture() для обнаружения смахивания влево, проверяя значения ширины перевода в начале и конце жестов. При обнаружении смахивания мы можем сместить строку и изменить масштаб кнопки корзины.

ContentView

Внутри нашего ContentView мы будем использовать ScrollView и LazyVStack вместо списка. Это потому, что нам не нужна разделительная линия между строками.

Создайте массив, содержащий наш текстовый контент, затем используйте ForEach для его просмотра. Прежде чем использовать RowContent и передать ему переменные text, index и indices, нам нужно проверить, находится ли index в массиве indices, который содержит индексы наших удаленных / скрытых строк. Дайте нашему RowContent модификатор кадра, чтобы настроить высоту каждой строки:

Добавление кнопок

Чтобы показать, как добавить больше кнопок в наши строки, мы добавим изображение с перекрывающимся изображением. Сначала удалите константу ширины и используйте постоянное значение, например 60, для ширины каждой кнопки. Отрегулируйте значение смещения внутри нашего DragGesture() на сумму ширины всех наших кнопок. Здесь будет 120.

Я добавил переменную offsetY, которая будет использоваться для анимации нашей новой кнопки. Кнопка будет состоять из двух перекрывающихся изображений. Второе изображение будет смещено по оси Y при смахивании. Добавьте модификатор смещения к перекрывающемуся изображению, затем измените значение offsetY внутри нашего DragGesture. Значение будет меняться от -20 до нуля.

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