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

CardView

Во-первых, давайте сделаем наш CardView. Для учебника у меня есть только ZStack с цветом и некоторым текстом. Чтобы получить закругленные края, вы можете использовать .cornerRadius(radius: CGFloat) или .clipShape(shape: Shape).

Внутри нашего основного представления, где мы собираемся отображать нашу карточку, нам нужна переменная для смещения позиции карточки. Ниже у меня есть переменная высота как высота экрана, умноженная на 0,9. Это смещает наш обзор, чтобы он находился в нижних 10% экрана. Вы можете поэкспериментировать с другими значениями, так как 10% может быть очень мало на длинных экранах, таких как iPhone 11 Pro Max.

@State private var offset = CGSize(width: 0, height: UIScreen.main.bounds.height * 0.9)

Добавьте наш CardView к основному виду (ContentView), затем добавьте к нему смещение и анимацию пружины:

DragGesture

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

Вместо этого используйте жест ниже:

Внутри .onChanged назначьте высоту смещения высоте перевода жеста. Это позволит перетаскивать нашу карточку вверх и вниз, а не в стороны:

self.offset.height = gesture.translation.height

Внутри .onEnd проверьте, находится ли перевод жестов в нижних 50% представления или в верхних 50% представления, используя значения прокси GeometryReader. Если жест находится в нижних 50%, то сместите карточку, чтобы покрыть 85% обзора, умножив высоту геометрического размера на 0,15. В противном случае верните вид вниз, умножив высоту геометрического размера на 0,9, чтобы вид снова покрыл только 10%.

if $0.translation.height < geometry.size.height * 0.5 {
self.offset.height = geometry.size.height * 0.15
} else {
self.offset.height = geometry.size.height * 0.9
}

Окончательный код для ContentView приведен ниже:

Вы можете настроить значения высоты смещения и переноса, с которыми мы играем, чтобы они подходили для разных форм.

Чтобы изменить нашу CardView на круглую форму, мы можем использовать .clipShape(Circle()):

Это заставит наш CardView исчезнуть из-за нашего смещения. Отрегулируйте высоту переменной смещения, чтобы вид снизу составлял 40% вместо 10%:

@State private var offset = CGSize(width: 0, height: UIScreen.main.bounds.height * 0.6)

Теперь нам нужно настроить условия внутри .onEnd, чтобы разместить нашу карточку внизу нашего представления. Вы можете поэкспериментировать со значениями, которые я указал ниже, чтобы представление могло достигать верхних 50% нашего представления.

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