Создайте представление нижней карточки с помощью жеста перетаскивания
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% нашего представления.
Все сделано! Спасибо за прочтение!