38 SwiftUI

简介: SwiftUI

SwiftUI

image.png

  • SwiftUI 是一种基于Swift的强大能力,简单创新的构建用户界面的方法,并且可以运行在苹果所有的平台上

image.png

SwiftUI - 声明式语法

  • SwiftUI采用声明式语法,因为你可以简单声明你的用户界面

image.png

  • Xcode11提供了强大的设计工具,可以通过简单的拖拽用SwiftUI生成用户界面

image.png

  • 只需要描述一次的布局-为你的视图声明任何状态的内容和布局,一旦状态发生改变,SwiftUI会自动更新视图的渲染
  • 构建可复用的组件-将小型、独立视图组合到更大,更复杂的界面中。在任何为Apple平台所设计的应用之间,共享您的自定义视图
  • 精简动画-创建平滑的动画就像调用单个方法一样简单。SwiftUI会在必要时自动计算并过渡动画


SwiftUI设计工具使用指南

创建项目

image.png

Stacks

image.png

如何使用SwiftUI构建可复用的组件

地标页例子

image.png

Image组件

image.png

image.png

image.pngimage.png


structContentView: View {
varbody: someView {
VStack {
//设置安全距离MapView().edgesIgnoringSafeArea(.all)
                .frame(height: 300)
CircleImage().offset(y: -130).padding(.bottom, -130)
//左对齐VStack (alignment: .leading) {
Text("圆明园").font(.title)
HStack {
Text("皇家园林").font(.subheadline)
Spacer()
Text("北京").font(.subheadline)
                }
            }.padding()//边界留白Spacer()//留白        }
    }
}

图片组件

structCircleImage: View {
varbody: someView {
//将图片剪切出一个圆Image("ymy").clipShape(Circle())
//加一个边框线        .overlay(Circle().stroke(Color.black, lineWidth: 4))
        .shadow(radius: 10)//阴影    }
}

地图组件

importSwiftUIimportMapKitstructMapView; UIViewRepresentable {
//创建地图组件funcmakeUIView(context: Context) ->MKMapView {
returnMKMapView(frame: .zero)
    }
//对地图组件进行设置funcupdateUIView(_uiView: MKMapView, context: Context) {
//圆明园的经纬度letlocation=CLLocationCoordinate2D(latitude: 40.00491139888854, longitude: 116.2896180152893)
//展示范围letspan=MKCoordinateSpan(latitudeDelta: 0.5, longitudeDelta: 0.5)
letregion=MKCoordinateRegion(center: location, span: span)
uiView.setRegion(region, animated: true)
    }
}

如何使用SwiftUI实现动画

SwiftUI - 动画

  • 在SwiftUI中,你可以将任意的改变过程封装进一个withAnimation块中。默认,SwiftUI会对这种改变采用fade in/out 的方式进行动画
structAnimationView: View {
//状态 当属性改变时, 会进行重写渲染@StateprivatevarshowDetail=falsevarbody: someView {
Button(action: {
withAnimation {
self.showDetail=!self.showDetail            }
        }) {
Image(systemName: "chevron.right.circle")//使用了一张系统图片                .imageScale(.large)//尺寸                .rotationEffect(.degrees(showDetail?90 : 0))//旋转90度或0度                .scaleEffect(showDeatil?1.5 : 1)//放大倍数            .padding()
        }
    }
}

在这里更改显示入口

image.png

深入理解SwiftUI:实现原理探秘

@propertyWrapper

  • 通过property Wrapper机制,对一些类似的属性的实现代码做同一封装
  • 通过@propertyWrapper可以移除掉一些重复或者类似的代码

@state

  • 通过@State SwiftUI 实现了值的绑定、动态查找和View的自动重现绘制

image.png

image.png

  • 课后题:查看源码,了解@Binding,@ObservedObject,@EnvironmentObject等装饰器的作用
extensionUserDefaults {
publicenumKeys {
staticlethadShownUserGuide="hadShownUserGuide"    }
varhadShownUserGuide: Bool {
set {
set(newValue, forKey: Keys.hadShownUserGuide)
        }
get {
bool(forKey: Keys.hadShownUserGuide)
        }
    }
}
structPropertyWrapperView: View {
@StateprivatevarshowText=UserDefaults.standard.hasShownUserGuide?"已经展示" : "没有展示过"varbody: someView {
Button(action: {
if (!UserDefaults.standard.hasShownUserGuide) {
UserDefaults.standard.hasShownUserGuide=trueself.showText="已经展示"            }
        }) {
Text(self.showText)
        }
    }
}
  • 使用propertyWrapper进行统一扩展
@propertyWrapperstructUserDefaultsWrapper<T> {
varkey: StringvardefaultValue : Tinit(_key: String, defaultValue: T) {
self.key=keyself.defaultValue=defaultValue    }
varwrappedValue: T {
get {
returnUserDefaults.standard.value(forKey: key) as?T??defaultValue        }
set {
UserDefaults.standard.set(newValue, forKey: key)
        }
    }
}
structPropertyWrapperView: View {
@UserDefaultsWrapper("hadShownUserGuide", defaultValue: false)
staticvarhadShownUserGuide : Bool@StateprivatevarshowText=PropertyWrapperView.hasShownUserGuide?"已经展示" : "没有展示过"varbody: someView {
Button(action: {
if (!PropertyWrapperView.hasShownUserGuide) {
PropertyWrapperView.hasShownUserGuide=trueself.showText="已经展示"            }
        }) {
Text(self.showText)
        }
    }
}








目录
相关文章
|
存储 iOS开发
SwiftUI极简教程17:Gestures手势的使用
SwiftUI极简教程17:Gestures手势的使用
1046 0
SwiftUI极简教程17:Gestures手势的使用
|
安全 开发者
SwiftUI极简教程02:Image图片的使用
SwiftUI极简教程02:Image图片的使用
1490 1
SwiftUI极简教程02:Image图片的使用
SwiftUI—快速制作一个缩放动画
SwiftUI—快速制作一个缩放动画
1014 0
SwiftUI—快速制作一个缩放动画
|
6月前
SwiftUI
【8月更文挑战第3天】
52 4
|
9月前
|
开发框架 前端开发 Swift
SwiftUI的优缺点
SwiftUI的优缺点
310 0
|
9月前
|
API iOS开发 UED
SwiftUI 设计
SwiftUI 设计
94 2
|
图形学
不断涌出的爱意,使用SwiftUI搭建一个爱心粒子动画~
不断涌出的爱意,使用SwiftUI搭建一个爱心粒子动画~
190 0
|
存储 JSON 安全
SwiftUI100天:使用SwiftUI搭建一个每日一句App
在本章中,你将学会使用SwiftUI搭建一个每日一句App。
363 0
SwiftUI100天:使用SwiftUI搭建一个每日一句App
SwiftUI 面面观
前言 Swift 5.1 新语法 单表达式隐式返回值 根据结构体默认成员合成默认初始化器 字符串插入运算符新设计 属性包装器 不透明返回类型 Swift Style DSL / Function Builder 其他新特性 Swift 从 3.x Attribute Swift/SwiftUI API Design Guide 值类型和引用类型
1522 0