swiftui学习笔记
swiftui 为灰色切图添加颜色
Image("setting_right_bar_icon")
.renderingMode(.template)
.foregroundColor(Color.yellow)
1
2
3
4
5
swiftui 修改图片大小
Image("icon_person")
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: 20, height: 20)
.clipped()
.cornerRadius(10)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
pod init || pod install || pod update 报错
gem install cocoapods --pre --user
1
swift网络请求封装框架
pod 'Moya', '~> 15.0'
# handyjson 处理数据
pod 'HandyJSON', '5.0.3-beta'
1
2
3
4
swiftui网络图片修改大小
AsyncImage(url: .init(string:"https://picsum.photos/400/200" ))
{ img in
img.resizable()
.frame(maxWidth: imageReader.size.width,
maxHeight: imageReader.size.height)
.aspectRatio(contentMode: .fill)
} placeholder: {
ProgressView()
.frame(maxWidth: .infinity,
maxHeight: .infinity, alignment: .center)
}
1
2
3
4
5
6
7
8
9
10
11
12
swiftUI 设置颜色的不透明度 && hexString设置颜色
#opacity 介于0和1之间
Color.init(UIColor(hexString:"#EDD44E")).opacity(0.1)
1
2
swiftUI 使用overlay设置圆角
Button("注册"){}
.frame(width: 250, height: 40)
.font(.caption)
.foregroundColor(hexColor(hex: 0x1D5EF3))
.overlay(RoundedRectangle(cornerRadius: 20, style: .continuous)
.stroke(hexColor(hex: 0x1D5EF3), lineWidth: 1)
)
.padding(.top, 8)
Text("注册")
.font(.system(size: 18))
.frame(width: 100, height: 38)
.foregroundColor(fontColor)
.overlay(RoundedRectangle(cornerRadius: 8)
.stroke(fontColor, lineWidth: 2)
)
.padding(.leading,64)
.padding(.top,16)
.padding(.bottom,23)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
swiftUI 设置阴影
#背景周边会展示阴影
VStack {
Image("turtlerock")
Image("turtlerock")
.shadow(radius: 15)
}
#背景阴影效果偏移
VStack {
Image("turtlerock")
Image("turtlerock")
.shadow(color: .green, radius: 5, x: 5, y: 5)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
swiftui 横向滚动
ScrollView(.horizontal, showsIndicators: false) {
HStack {
ForEach(boxes, id: \.id) { box in
BoxView(box: box)
}
}.frame(maxWidth: .infinity,
maxHeight: 92,alignment: .leading)
}
1
2
3
4
5
6
7
8
9
swiftui path 折线图
# 参考学习链接 https://juejin.cn/post/7033199647501844494
# 先扩展path
extension Path {
static func lineBkChart(points:[Double], step:CGPoint) -> Path {
var path = Path()
if (points.count < 2){
return path
}
guard let offset = points.min() else { return path }
path.move(to: .zero)
var p1 = CGPoint(x: 0, y: CGFloat(points[0]-offset)*step.y)
for pointIndex in 1..<points.count {
let p2 = CGPoint(x: step.x * CGFloat(pointIndex), y: step.y*CGFloat(points[pointIndex]-offset))
let conPoint1: CGPoint = CGPoint.init(x: CGFloat(p1.x + p2.x) / 2.0, y: p1.y)
let conPoint2: CGPoint = CGPoint.init(x: CGFloat(p1.x + p2.x) / 2.0, y: p2.y)
path.addCurve(to:p2,control1: conPoint1,control2: conPoint2)
p1 = p2
}
path.addLine(to: CGPoint(x: p1.x, y: 0))
path.closeSubpath()
return path
}
static func lineChart(points:[Double], step:CGPoint) -> Path {
var path = Path()
if (points.count < 2){
return path
}
guard let offset = points.min() else { return path }
var p1 = CGPoint(x: 0, y: CGFloat(points[0]-offset)*step.y)
path.move(to: p1)
for pointIndex in 1..<points.count {
let p2 = CGPoint(x: step.x * CGFloat(pointIndex), y: step.y*CGFloat(points[pointIndex]-offset))
let conPoint1: CGPoint = CGPoint.init(x: CGFloat(p1.x + p2.x) / 2.0, y: p1.y)
let conPoint2: CGPoint = CGPoint.init(x: CGFloat(p1.x + p2.x) / 2.0, y: p2.y)
path.addCurve(to:p2,control1: conPoint1,control2: conPoint2)
p1 = p2
}
return path
}
static func quadCurvedPathWithPoints(points:[Double], step:CGPoint, globalOffset: Double? = nil) -> Path {
var path = Path()
if (points.count < 2){
return path
}
let offset = globalOffset ?? points.min()!
var p1 = CGPoint(x: 0, y: CGFloat(points[0]-offset)*step.y)
path.move(to: p1)
for pointIndex in 1..<points.count {
let p2 = CGPoint(x: step.x * CGFloat(pointIndex), y: step.y*CGFloat(points[pointIndex]-offset))
let midPoint = CGPoint.midPointForPoints(p1: p1, p2: p2)
path.addQuadCurve(to: midPoint, control: CGPoint.controlPointForPoints(p1: midPoint, p2: p1))
path.addQuadCurve(to: p2, control: CGPoint.controlPointForPoints(p1: midPoint, p2: p2))
p1 = p2
}
return path
}
}
extension CGPoint {
static func midPointForPoints(p1:CGPoint, p2:CGPoint) -> CGPoint {
return CGPoint(x:(p1.x + p2.x) / 2,y: (p1.y + p2.y) / 2)
}
static func controlPointForPoints(p1:CGPoint, p2:CGPoint) -> CGPoint {
var controlPoint = CGPoint.midPointForPoints(p1:p1, p2:p2)
let diffY = abs(p2.y - controlPoint.y)
if (p1.y < p2.y){
controlPoint.y += diffY
} else if (p1.y > p2.y) {
controlPoint.y -= diffY
}
return controlPoint
}
}
# 自动计算高度和宽度
var stepWidth: CGFloat {
if data.count < 2 {
return 0
}
return frame.size.width / CGFloat(data.count-1)
}
var stepHeight: CGFloat {
var min: Double?
var max: Double?
let points = self.data
if let minPoint = points.min(), let maxPoint = points.max(), minPoint != maxPoint {
min = minPoint
max = maxPoint
}else {
return 0
}
if let min = min, let max = max, min != max {
if (min <= 0){
return (frame.size.height-padding) / CGFloat(max - min)
}else{
return (frame.size.height-padding) / CGFloat(max - min)
}
}
return 0
}
var pathBk: Path {
let points = self.data
return Path.lineBkChart(points: points, step: CGPoint(x: stepWidth, y: stepHeight))
}
var pathLine: Path {
let points = self.data
return Path.lineChart(points: points, step: CGPoint(x: stepWidth, y: stepHeight))
}
#画图
public var body: some View {
ZStack {
self.pathBk
.fill(LinearGradient(gradient: Gradient(colors: [topUp ? greenFontColor : redFontColor ,endColor]), startPoint: .bottom, endPoint: .top))
.rotationEffect(.degrees(180), anchor: .center)
.rotation3DEffect(.degrees(180), axis: (x: 0, y: 1, z: 0))
.drawingGroup()
self.pathLine
.stroke(style: StrokeStyle(lineWidth: 1, lineJoin: .round))
.foregroundColor(topUp ? greenFontColor : redFontColor)
.rotationEffect(.degrees(180), anchor: .center)
.rotation3DEffect(.degrees(180), axis: (x: 0, y: 1, z: 0))
.drawingGroup()
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
渐变器
# 线性渐变
LinearGradient(gradient: Gradient(colors: [.green ,.red]), startPoint: .bottom, endPoint: .top)
1
2
按给定的尺寸和锚点，对视图进行缩放
public func scaleEffect(_ scale: CGSize, anchor: UnitPoint = .center) -> some View
1
自己写的进度条
struct TearmProgressView:View {
var value:CGFloat
var total:CGFloat
var gradient = LinearGradient(gradient: Gradient(colors: [Color.init(UIColor(hexString: "#FFC745")),Color.init(UIColor(hexString: "#FF6F6F"))]), startPoint: .leading, endPoint: .trailing)
var body: some View {
ZStack {
RoundedRectangle(cornerRadius: 8)
.foregroundColor(Color.init(UIColor(hexString: "#D8D8D8")))
.frame(width: 139, height: 4)
HStack(spacing: 0) {
RoundedRectangle(cornerRadius: 8)
.fill(gradient)
.frame(width: 139 * (value / total), height: 4,alignment: .leading)
}
.frame(width: 139, height: 20,alignment: .leading)
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
swiftui 字重
字体粗细的值
black
比 heavy 厚的字体。
bold
比默认值更粗的字体。
heavy
比 bold 厚的字体。
light
比默认字体稍细的字体。
medium
比默认值稍厚的字体。
regular
默认字体粗细。
semibold
比medium稍厚的字体。
thin
比默认字体更细的字体。
ultralight
一种字体粗细，颜色比默认值更细更浅。
笔记
从最薄到最厚的font-weight值为
ultralight, thin, light, regular, medium, semibold, bold, heavy, 和black。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
swiftui 各种形状函数
Capsule()
Circle()
Ellipse()
Rectangle()
RoundedRectangle(cornerRadius: 25.0)
RoundedRectangle(cornerSize: CGSize(width: 25, height: 50))
struct Triangle: Shape {
func path(in rect: CGRect) -> Path {
var path = Path()
path.move(to: CGPoint(x: rect.midX, y: rect.minY))
path.addLine(to: CGPoint(x: rect.minX, y: rect.maxY))
path.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY))
path.addLine(to: CGPoint(x: rect.midX, y: rect.minY))
return path
}
}
Triangle()
.fill(Color.red)
.frame(width: 300, height: 300)
ShapeWithLabel(shape: Triangle(), label: "三角形")
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
matchGeometry 打点，据说是做动画的
内容超出省略模式
Text("MMMMMMMMM")
.truncationMode(.middle)
1
2
3
swiftui 页面的生命周期管理
.onAppear{
marketStore.getMarketList()
}
.onDisappear {
marketStore.stop()
}
1
2
3
4
5
6
7
8
9
10
# scrollviewreader 定位到scrollview 的index
tabview使用滑动样式
.tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
.animation(.spring())
1
2
3
4
5
swift 跳出多重循环
forItem: for item in itemList {
for index in item {
break forItem
}
}
1
2
3
4
5
6
Menu(content: {
Text("直播")
Text("发帖")
}, label: {
CommunityPostBtnView()
.padding(.trailing,12)
.padding([.bottom,.top],10)
})
1
2
3
4
5
6
7
8
9
swiftui text
VStack {
HStack {
Text("我是Label\n第二行")
.strikethrough(true, color: Color.black)
.underline()
.baselineOffset(50)
.italic()
.font(.largeTitle)
.fontWeight(.bold)
.kerning(10)
.lineSpacing(10)
.foregroundColor(Color.white)
.lineLimit(2)
.padding()
.background(Color.red)
.cornerRadius(30)
.onTapGesture {
print("点击1")
}
.onLongPressGesture(minimumDuration: 2, maximumDistance: 4, pressing: { (result) in
print("\(result ? "开始按压" : "按压结束")")
}) {
print("触发长按")
}
.gesture(
DragGesture()
.onChanged({ (value) in
print(value)
})
.onEnded({ (value) in
print(value)
})
)
}
.shadow(color: Color.red, radius: 20)
.padding(.bottom, 50)
Text("我文字有阴影")
.font(.largeTitle)
.shadow(color: Color.black, radius: 10)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
#UT 链接：https://www.youtube.com/watch?v=3S0dwmBJQOE
ScrollView {
foreach(data,id:\.self) { i in
if i == data.count -1 {
showView(data, islast: true)
} else {
showView(data, islast: true)
}
}
}
showView {
if islast {
Text()
.onAppear {
loadData()
}
} else {
Text()
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
