SwiftUI常用基础高频语句概览

前面学习Swift以及SwiftUI，忘了记录，现在补上，配置：Win10 挂载MacOS10.15.3系统的虚拟机，编译工具：Xcode11.4（PS：虚拟机是真的卡，每运行一次3min。。。）

常用网站

AppIcon https://appicon.co/#app-icon

UI教程 https://www.bilibili.com/video/BV1X7411R73g

github项目 https://github.com/dkhamsing/open-source-ios-apps

swift代码练习 https://repl.it/student/classrooms/134164

时序曲线 https://cubic-bezier.com/#.17,.67,.83,.67

快捷键

command+I 设置缩进

选中的代码 + command+[ :向左位移

选中的代码 + command+]: 向右位移

选中的代码 + command+option+[ :向上位移

选中的代码 + command+option+]:向下位移

文字及图标设置

/*针对于Text的语法*/

.font(.title)  //设置字体类型

.fontWeight(.semibold)  //设置字体粗细

.foregroundColor(Color.red)  //设置字体前景颜色

.mutilineTextAlignment(.leading/.center) //设置多行对齐

.linespacing(4) //设置行距  

Text("\bottom(State.Height)").offset(y:-300)  //即时获取位置信息

Image(systemName: "gear")  //系统图标及字体可直接调用

.font(.system(size: 20,weight: .bold, design: .rounded))  //设置字体

.overlay   //叠加层

排版优化

/*针对于Image/VStack/HStack/ZStack的语法*/

Spacer()	//在几个模块间加入空间

.frame(width: 340.0, height: 220.0，alignment: .top )	//设置外框，保证内容在外框里面

.resizable( )	//保证图像适应外框，但会使高宽比失调

.aspectRatio(contentMode: .fill/.fit)	//在适应外框的基础上，图像不变形

.background(Color.blue) //设置背景色

.cornerRadius(20)	//设置圆角及其半径

.shadow(radius: 20)	//添加阴影及其半径（必须先添加圆角，再添加阴影）

.shadow(color:Color.black.opacity(0.2),radius:20,x:0,y:20)	//自定义阴影

.padding()	//设置模块距离边框内边距的长度（可以单独添加给水平或垂直
eg.
    .padding(.horizontal, 20)/.padding(.top,20)

.offset(x: 0,y:  -20)	//设置模块偏移量

.scaleEffect(0.7)	//设置模块缩放

.rotationEffect(Angle.degree(5))	//设置旋转角度

.rotation3DEffect(Angle.degree(5),axis:(x: 10.0,y:0,z:0)	//设置3D旋转角度

.blenderMode(.hardlight)	//设置混合模式

Rectangle( )   //矩形视图

.opacity(0.1)	//设置透明度

.frame(maxWidth: .infinity)	//将框架设置为最大宽度

.blur( radius: 20)	//设置模糊程度

.clipShape(roundRrctangle(cornerRadius: 20,style:continuous))	//设置平滑角

.clipShape(Circle())	//裁剪成圆角

.background(LinearGradient(gradient:Gradient(colors[Color.red,Color.blue]),startpoint:.leading,endpoint: .trailing))	//设置渐变色

Color Literal	//自由选择颜色

动画

普通动画

@State var show  =  false   //设置状态（动画间切换）

.onTapGesture{            //手势判断

self.show.toggle()

}

.rotationEffect（Angle.degrees(show ? 0: 5)	//三元运算符判断

.offset(x:0, y:show? -200:-20)	//三元运算符判断

.animation(.linenear)	//线性动画

.animation(.easeInOut)	//平滑开始，平滑结束

.animation(.easeInOut，duration(:0.3))	//平滑开始，平滑结束

.animation(.default)   

@State var showCard  = false

.animation(.timingCurve(0.2, 0.8, 0.2, 1 ,duration: 0.8))  //时序曲线

.animation(		//细节修饰
	Animation
    .default
	.delay(0.1)
	.speed(2)	//二倍速

)

手势

@State var viewState = CGSize.zero

.offset(x: viewState.width, y:viewState.height)  //使得即时返回`

.gesture(   // 拖拽手势`

DragGesture().onChange{  value in` 

self.viewState = value.translation`

}  

.onEnded {    //使得拖拽后图片返回原位置`

	self.viewState = .zero
    
})

.animation (.spring( ))	//弹性舒缓

/*
response: 0.3	设置响应速度，数值越小，响应越快

dampingFraction: 0.3	数字越小，弹性系数越大

blendDuration: 0	设置参数设置滞后时间	
*/

页面属性

Color(.grey)       

.edgesIgnoringSafeArea(.all)	//设置页面安全区域

@State var showProfile  =  false    

Button(action:{self.showProfile.toggle( ) }){

Image("Avatar")

	.renderingMode(.orginal)  //显示图片原始样式

	.resizable( )

	.frame( )

}