ios - SwiftUI 中的自定义模态转换
问题描述
我正在尝试使用SwiftUI重新创建 iOS 11/12 App Store 。让我们假设“故事”是点击卡片时显示的视图。
我已经完成了卡片,但我现在遇到的问题是如何制作动画以显示“故事”。
由于我不擅长解释,这里有一个 gif:
我曾想过将整个卡片设为 PresentationLink,但“故事”显示为模态,因此它不会覆盖整个屏幕,也不会做我想要的动画。
最相似的东西是 NavigationLink,但这迫使我添加一个 NavigationView,并且卡片像另一个页面一样显示。
我实际上不在乎它是 PresentationLink 还是 NavigationLink 或其他任何东西,只要它执行动画并显示“故事”即可。
提前致谢。
我的代码:
Card.swift
struct Card: View {
var icon: UIImage = UIImage(named: "flappy")!
var cardTitle: String = "Welcome to \nCards!"
var cardSubtitle: String = ""
var itemTitle: String = "Flappy Bird"
var itemSubtitle: String = "Flap That!"
var cardCategory: String = ""
var textColor: UIColor = UIColor.white
var background: String = ""
var titleColor: Color = .black
var backgroundColor: Color = .white
var body: some View {
VStack {
if background != "" {
Image(background)
.resizable()
.frame(width: 380, height: 400)
.cornerRadius(20)
} else {
RoundedRectangle(cornerRadius: 20)
.frame(width: 400, height: 400)
.foregroundColor(backgroundColor)
}
VStack {
HStack {
VStack(alignment: .leading) {
if cardCategory != "" {
Text(verbatim: cardCategory.uppercased())
.font(.headline)
.fontWeight(.heavy)
.opacity(0.3)
.foregroundColor(titleColor)
//.opacity(1)
}
HStack {
Text(verbatim: cardTitle)
.font(.largeTitle)
.fontWeight(.heavy)
.lineLimit(3)
.foregroundColor(titleColor)
}
}
Spacer()
}.offset(y: -390)
.padding(.bottom, -390)
HStack {
if cardSubtitle != "" {
Text(verbatim: cardSubtitle)
.font(.system(size: 17))
.foregroundColor(titleColor)
}
Spacer()
}
.offset(y: -50)
.padding(.bottom, -50)
}
.padding(.leading)
}.padding(.leading).padding(.trailing)
}
}
所以
Card(cardSubtitle: "Welcome to this library I made :p", cardCategory: "CONNECT", background: "flBackground", titleColor: .white)
解决方案
SwiftUI 现在不做自定义模态转换,所以我们必须使用一种解决方法。
我能想到的一种方法是自己使用ZStack
. 可以使用GeometryReader
. 然后,可以使用框架和位置修改器来控制目标形状。
一开始,目标将被设置为与源的位置和大小完全匹配。然后立即在动画块中将目标设置为全屏大小。
struct ContentView: View {
@State var isPresenting = false
@State var isFullscreen = false
@State var sourceRect: CGRect? = nil
var body: some View {
ZStack {
GeometryReader { proxy in
Button(action: {
self.isFullscreen = false
self.isPresenting = true
self.sourceRect = proxy.frame(in: .global)
}) { ... }
}
if isPresenting {
GeometryReader { proxy in
ModalView()
.frame(
width: self.isFullscreen ? nil : self.sourceRect?.width ?? nil,
height: self.isFullscreen ? nil : self.sourceRect?.height ?? nil)
.position(
self.isFullscreen ? proxy.frame(in: .global).center :
self.sourceRect?.center ?? proxy.frame(in: .global).center)
.onAppear {
withAnimation {
self.isFullscreen = true
}
}
}
}
}
.edgesIgnoringSafeArea(.all)
}
}
extension CGRect {
var center : CGPoint {
return CGPoint(x:self.midX, y:self.midY)
}
}
推荐阅读
- python - 是否可以为此编写一个 lambda 函数?
- angular - 使用 ngModel 从数组传递对象 - Angular
- python - M1 上的张量流
- for-loop - 连续 24 个字母的排列
- asp.net-core - 检查 Blazor 类库中的用户代理
- javascript - 如果所有子域都指向同一个网站,cookie 是否会在多个子域之间共享?
- assembly - 强制 RIP 相对访问 NASM 中的固定偏移量
- javascript - 如何在 React / Gatsby 类组件中获取当前 url
- wpf - 单击一次:如何更改更新位置以进行编程更新?
- javascript - ajax 调用成功或错误函数不会执行