本文价值与收获

看完本文后，您将能够作出下面的界面

Jietu20200507-092122@2x.jpg

Jietu20200507-092136.gif

看完本文您将掌握的技能

• 掌握ZStack使用
• 掌握 GeometryReader
• 制作卡片效果

代码

import SwiftUIstruct ContentView: View {@State var isPresenting = false@State var isFullscreen = false@State var sourceRect: CGRect? = nilvar body: some View {ZStack {GeometryReader { proxy inButton(action: {self.isFullscreen = falseself.isPresenting = trueself.sourceRect = proxy.frame(in: .global)}) { Text("show") }}if isPresenting {GeometryReader { proxy inCard(cardTitle:"国宝十大名画",cardSubtitle: "五马图", cardCategory: "名画", background: "5", titleColor: .white).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)}
}struct ContentView_Previews: PreviewProvider {static var previews: some View {ContentView()}
}struct Card: View {var icon: UIImage = UIImage(named: "1")!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.whitevar background: String = ""var titleColor: Color = .blackvar backgroundColor: Color = .whitevar 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)}}

技术交流

QQ:3365059189
SwiftUI技术交流QQ群:518696470

• 请关注我的专栏icloudend, SwiftUI教程与源码
  https://www.jianshu.com/c/7b3e3b671970

推荐

基础文章推荐

• 《SwiftUI是什么，听听大牛们如何说》

经典教程推荐

• onevcat 大神的《SwiftUI 与 Combine 编程》
• 更新近百篇SwiftUI教程《SwiftUI2020教程》
• 帮您突破数据存储难关《SwiftUI vs CoreData数据存储解决方案》

技术源码推荐

推荐文章

CoreData篇

• SwiftUI数据存储之做个笔记App 新增与查询(CoreData)
• SwiftUI进阶之存储用户状态实现登录与登出
• SwiftUI 数据之List显示Sqlite数据库内容（2020年教程）

TextField篇

• 《SwiftUI 一篇文章全面掌握TextField文本框 (教程和全部源码)》
• 《SwiftUI实战之TextField风格自定义与formatters》
• 《SwiftUI实战之TextField如何给键盘增加个返回按钮(隐藏键盘)》
• 《SwiftUI 当键盘出现时避免TextField被遮挡自动向上移动》
• 《SwiftUI实战之TextField如何给键盘增加个返回按钮(隐藏键盘)》

JSON文件篇

• SwiftUI JSON文件下载、存储、解析和展示(代码大全)

一篇文章系列

• SwiftUI一篇文章全面掌握List(教程和源码)
• 《SwiftUI 一篇文章全面掌握TextField文本框 (教程和全部源码)》
• SwiftUI一篇文章全面掌握Picker,解决数据选择(教程和源码)
• SwiftUI一篇文章全面掌握Form(教程和源码)
• SwiftUI Color 颜色一篇文章全解决