Skip to content

Commit bc12bd2

Browse files
ming1016ming1016
committed
添加视觉相关内容
1 parent 9ae6c7d commit bc12bd2

File tree

13 files changed

+464
-27
lines changed

13 files changed

+464
-27
lines changed

‎SwiftPamphletApp.xcodeproj/project.pbxproj

+20
Original file line numberDiff line numberDiff line change
@@ -238,6 +238,11 @@
238238
087ECE392BFF26910011F679 /* Documents协议(ap).md in Resources */ = {isa = PBXBuildFile; fileRef = 087ECE382BFF26910011F679 /* Documents协议(ap).md */; };
239239
087ECE3B2BFF26B00011F679 /* 特定情况视图协议(ap).md in Resources */ = {isa = PBXBuildFile; fileRef = 087ECE3A2BFF26B00011F679 /* 特定情况视图协议(ap).md */; };
240240
087ECE3D2BFF491B0011F679 /* SwiftUI-Shadow(ap).md in Resources */ = {isa = PBXBuildFile; fileRef = 087ECE3C2BFF491B0011F679 /* SwiftUI-Shadow(ap).md */; };
241+
087ECE3F2BFF8A690011F679 /* Blend Modes(ap).md in Resources */ = {isa = PBXBuildFile; fileRef = 087ECE3E2BFF8A690011F679 /* Blend Modes(ap).md */; };
242+
087ECE412C00532F0011F679 /* SwiftUI-渐变(ap).md in Resources */ = {isa = PBXBuildFile; fileRef = 087ECE402C00532F0011F679 /* SwiftUI-渐变(ap).md */; };
243+
087ECE432C0066740011F679 /* SwiftUI-模糊(ap).md in Resources */ = {isa = PBXBuildFile; fileRef = 087ECE422C0066740011F679 /* SwiftUI-模糊(ap).md */; };
244+
087ECE452C006A170011F679 /* SwiftUI-背景材质(ap).md in Resources */ = {isa = PBXBuildFile; fileRef = 087ECE442C006A170011F679 /* SwiftUI-背景材质(ap).md */; };
245+
087ECE472C00756C0011F679 /* AppIcon(ap).md in Resources */ = {isa = PBXBuildFile; fileRef = 087ECE462C00756C0011F679 /* AppIcon(ap).md */; };
241246
0887A59A2BA28F6D00131359 /* CSGuideView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 0887A5992BA28F6D00131359 /* CSGuideView.swift */; };
242247
0896FB9227BA486900676B7F /* Button(ap).md in Resources */ = {isa = PBXBuildFile; fileRef = 0896FB9127BA486900676B7F /* Button(ap).md */; };
243248
08A4FDC227B25A140068E5BC /* @dynamicMemberLookup动态成员查询(ap).md in Resources */ = {isa = PBXBuildFile; fileRef = 08A4FDC127B25A140068E5BC /* @dynamicMemberLookup动态成员查询(ap).md */; };
@@ -555,6 +560,11 @@
555560
087ECE382BFF26910011F679 /* Documents协议(ap).md */ = {isa = PBXFileReference; lastKnownFileType = net.daringfireball.markdown; path = "Documents协议(ap).md"; sourceTree = "<group>"; };
556561
087ECE3A2BFF26B00011F679 /* 特定情况视图协议(ap).md */ = {isa = PBXFileReference; lastKnownFileType = net.daringfireball.markdown; path = "特定情况视图协议(ap).md"; sourceTree = "<group>"; };
557562
087ECE3C2BFF491B0011F679 /* SwiftUI-Shadow(ap).md */ = {isa = PBXFileReference; lastKnownFileType = net.daringfireball.markdown; path = "SwiftUI-Shadow(ap).md"; sourceTree = "<group>"; };
563+
087ECE3E2BFF8A690011F679 /* Blend Modes(ap).md */ = {isa = PBXFileReference; lastKnownFileType = net.daringfireball.markdown; path = "Blend Modes(ap).md"; sourceTree = "<group>"; };
564+
087ECE402C00532F0011F679 /* SwiftUI-渐变(ap).md */ = {isa = PBXFileReference; lastKnownFileType = net.daringfireball.markdown; path = "SwiftUI-渐变(ap).md"; sourceTree = "<group>"; };
565+
087ECE422C0066740011F679 /* SwiftUI-模糊(ap).md */ = {isa = PBXFileReference; lastKnownFileType = net.daringfireball.markdown; path = "SwiftUI-模糊(ap).md"; sourceTree = "<group>"; };
566+
087ECE442C006A170011F679 /* SwiftUI-背景材质(ap).md */ = {isa = PBXFileReference; lastKnownFileType = net.daringfireball.markdown; path = "SwiftUI-背景材质(ap).md"; sourceTree = "<group>"; };
567+
087ECE462C00756C0011F679 /* AppIcon(ap).md */ = {isa = PBXFileReference; lastKnownFileType = net.daringfireball.markdown; path = "AppIcon(ap).md"; sourceTree = "<group>"; };
558568
0887A5992BA28F6D00131359 /* CSGuideView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CSGuideView.swift; sourceTree = "<group>"; };
559569
0896FB9127BA486900676B7F /* Button(ap).md */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = net.daringfireball.markdown; path = "Button(ap).md"; sourceTree = "<group>"; };
560570
08A4FDC127B25A140068E5BC /* @dynamicMemberLookup动态成员查询(ap).md */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = net.daringfireball.markdown; path = "@dynamicMemberLookup动态成员查询(ap).md"; sourceTree = "<group>"; };
@@ -658,6 +668,7 @@
658668
isa = PBXGroup;
659669
children = (
660670
08026C322869991200792EF1 /* Swift-DocC(ap).md */,
671+
087ECE462C00756C0011F679 /* AppIcon(ap).md */,
661672
);
662673
path = "系统能力";
663674
sourceTree = "<group>";
@@ -1064,6 +1075,10 @@
10641075
children = (
10651076
08522BE327CF5C55005FF059 /* SwiftUI颜色(ap).md */,
10661077
087ECE3C2BFF491B0011F679 /* SwiftUI-Shadow(ap).md */,
1078+
087ECE3E2BFF8A690011F679 /* Blend Modes(ap).md */,
1079+
087ECE402C00532F0011F679 /* SwiftUI-渐变(ap).md */,
1080+
087ECE422C0066740011F679 /* SwiftUI-模糊(ap).md */,
1081+
087ECE442C006A170011F679 /* SwiftUI-背景材质(ap).md */,
10671082
08522BE827CF6E3A005FF059 /* SwiftUI Effect(ap).md */,
10681083
085BB77327D22FCA00E8F69A /* SwiftUI动画(ap).md */,
10691084
085BB77527D22FE300E8F69A /* SwiftUI Canvas(ap).md */,
@@ -1700,6 +1715,7 @@
17001715
0858C5C92BECCD17004F4C04 /* SwiftData-资料(ap).md in Resources */,
17011716
08D8EFED2BEF3F2100AA0020 /* 小组件-配置选项(ap).md in Resources */,
17021717
0844900F279ECC0C00B61353 /* Combine网络请求(ap).md in Resources */,
1718+
087ECE452C006A170011F679 /* SwiftUI-背景材质(ap).md in Resources */,
17031719
086BEF052BF6C38300025307 /* 文字Picker(ap).md in Resources */,
17041720
0850AC192BF35A26009FDBBF /* Grid(ap).md in Resources */,
17051721
08448F9A279EBA2900B61353 /* 可选(ap).md in Resources */,
@@ -1712,6 +1728,7 @@
17121728
0869233C2BF1BF35006779A3 /* ScrollView-参考资料(ap).md in Resources */,
17131729
08448FAF279EC31200B61353 /* 不透明类型(ap).md in Resources */,
17141730
08449029279ECEB100B61353 /* SwiftUI是什么(ap).md in Resources */,
1731+
087ECE432C0066740011F679 /* SwiftUI-模糊(ap).md in Resources */,
17151732
086BEEFE2BF644D400025307 /* GeometryReader(ap).md in Resources */,
17161733
087ECE0E2BFDE0630011F679 /* 自定义修饰符(ap).md in Resources */,
17171734
08448F79279EB68D00B61353 /* 随机(ap).md in Resources */,
@@ -1802,6 +1819,7 @@
18021819
087ECE252BFF25940011F679 /* 视图协议-核心协议(ap).md in Resources */,
18031820
08448F71279EB58C00B61353 /* Data(ap).md in Resources */,
18041821
08448FFE279ECAA100B61353 /* removeDuplicates(ap).md in Resources */,
1822+
087ECE472C00756C0011F679 /* AppIcon(ap).md in Resources */,
18051823
08D4EBE62BF4B8050031EDC5 /* 布局-对齐(ap).md in Resources */,
18061824
08D8EFEB2BEF106B00AA0020 /* 小组件-AppIntentConfiguration(ap).md in Resources */,
18071825
0850445827B1228E0096D556 /* Result(ap).md in Resources */,
@@ -1889,6 +1907,7 @@
18891907
08448F9E279EBAA800B61353 /* 函数(ap).md in Resources */,
18901908
08448FEC279EC8BE00B61353 /* 注释(ap).md in Resources */,
18911909
08D8F0002BEFA72300AA0020 /* 获取小组件形状(ap).md in Resources */,
1910+
087ECE3F2BFF8A690011F679 /* Blend Modes(ap).md in Resources */,
18921911
08026C4E2869B3B500792EF1 /* ShareLink(ap).md in Resources */,
18931912
08026C432869B22E00792EF1 /* Regex(ap).md in Resources */,
18941913
08D4EBDD2BF461F60031EDC5 /* 自定义导航栏(ap).md in Resources */,
@@ -1900,6 +1919,7 @@
19001919
08D8EFFA2BEF9C9800AA0020 /* 小组件-远程定时获取数据(ap).md in Resources */,
19011920
0850AC102BF30058009FDBBF /* List-完全可点击的行(ap).md in Resources */,
19021921
087ECE1A2BFEA8210011F679 /* 修饰符-蒙版(ap).md in Resources */,
1922+
087ECE412C00532F0011F679 /* SwiftUI-渐变(ap).md in Resources */,
19031923
0858C5C72BEBD230004F4C04 /* ContentUnavailableView(ap).md in Resources */,
19041924
086BEF0F2BF6C43800025307 /* WheelPicker(ap).md in Resources */,
19051925
087ECE082BFCC3D90011F679 /* HUD(ap).md in Resources */,

‎SwiftPamphletApp/App/IntroView.swift

+6-4
Original file line numberDiff line numberDiff line change
@@ -32,10 +32,12 @@ struct LightingView<Content: View>: View {
3232
struct IntroView: View {
3333
var body: some View {
3434
VStack(spacing: 15) {
35-
Image("logo")
36-
.resizable()
37-
.aspectRatio(contentMode: .fit)
38-
.frame(width: 120, height: 120)
35+
if let appIcon = NSImage(named: "AppIcon") {
36+
Image(nsImage: appIcon)
37+
.resizable()
38+
.scaledToFit()
39+
.frame(width: 120, height: 120)
40+
}
3941
Text("戴铭的开发小册子").bold()
4042
LightingView {
4143
Text("Swift Pamphlet App").gradientTitle(color: .mint)

‎SwiftPamphletApp/Assets.xcassets/logo.imageset/512-1.png

-143 KB
Binary file not shown.

‎SwiftPamphletApp/Assets.xcassets/logo.imageset/512.png

-143 KB
Binary file not shown.

‎SwiftPamphletApp/Assets.xcassets/logo.imageset/Contents.json

-22
This file was deleted.

‎SwiftPamphletApp/Guide/View/GuideListView.swift

+6-1
Original file line numberDiff line numberDiff line change
@@ -364,6 +364,10 @@ final class GuideListModel {
364364
L(t: "视觉",sub: [
365365
L(t: "SwiftUI颜色"),
366366
L(t: "SwiftUI-Shadow"),
367+
L(t: "Blend Modes"),
368+
L(t: "SwiftUI-渐变"),
369+
L(t: "SwiftUI-模糊"),
370+
L(t: "SwiftUI-背景材质"),
367371
L(t: "SwiftUI Effect"),
368372
L(t: "SwiftUI动画"),
369373
L(t: "SwiftUI Canvas"),
@@ -428,7 +432,8 @@ final class GuideListModel {
428432
L(t: "小组件-参考资料", icon: "books.vertical"),
429433
]),
430434
L(t: "系统能力",icon: "apple.terminal",sub: [
431-
L(t: "Swift-DocC", icon: "doc.append")
435+
L(t: "Swift-DocC", icon: "doc.append"),
436+
L(t: "AppIcon", icon: "app")
432437
]),
433438
L(t: "工程模式",icon: "building.columns", sub: [
434439
L(t: "单例"),

‎SwiftPamphletApp/Resource/Guide/SwiftUI/视觉/Blend Modes(ap).md

+83
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
2+
Blend Modes
3+
4+
### 介绍
5+
6+
`blendMode(_:)` 是 SwiftUI 中的一个视图修饰符，用于混合视图。以下是两种使用 `blendMode(_:)` 的方式，以及相应的示例：
7+
8+
1. 通过 `ZStack` 使用 `blendMode(_:)`：
9+
10+
```swift
11+
struct ContentView: View {
12+
var body: some View {
13+
ZStack {
14+
Image("evermore")
15+
Image("fearless")
16+
.blendMode(.multiply)
17+
}
18+
}
19+
}
20+
```
21+
22+
在这个例子中，我们创建了一个 `ZStack`，它包含两个图像。我们将 `blendMode(.multiply)` 应用于第二个图像，这样它就会与第一个图像混合。
23+
24+
2. 通过 `.overlay` 使用 `blendMode(_:)`：
25+
26+
```swift
27+
struct ContentView: View {
28+
var body: some View {
29+
Image("evermore")
30+
.overlay {
31+
Image("fearless")
32+
.blendMode(.color)
33+
.blendMode(.multiply)
34+
}
35+
}
36+
}
37+
```
38+
39+
在这个例子中，我们创建了一个图像，并添加了一个覆盖层。这个覆盖层是另一个图像，我们将 `blendMode(.multiply)` 应用于这个图像，这样它就会与底层的图像混合。
40+
41+
`.multiply` 是一种混合模式，你可以根据需要选择其他的混合模式。
42+
43+
blendMode 混合模式可以分为以下几种类型：
44+
45+
## 变亮
46+
47+
提升亮部亮度
48+
49+
- `colorDodge`
50+
- `lighten`
51+
- `screen`
52+
- `plusLighter`
53+
54+
## 变暗
55+
56+
使暗部更暗
57+
58+
- `colorBurn`
59+
- `darken`
60+
- `multiply`
61+
- `plusDarker`
62+
63+
## 对比
64+
65+
让亮部更亮，暗部更暗，对比度增加，更艳丽。
66+
67+
- `overlay`
68+
- `softLight`
69+
- `hardLight`
70+
71+
## 融合
72+
73+
这些模式会根据源图像和目标图像的色调、饱和度、颜色或亮度进行混合。
74+
75+
- `hue`
76+
- `saturation`
77+
- `color`
78+
- `luminosity`
79+
- `sourceAtop`
80+
- `destinationOver`
81+
- `destinationOut`
82+
- `difference`
83+
- `exclusion`

‎SwiftPamphletApp/Resource/Guide/SwiftUI/视觉/SF Symbol(ap).md

+124
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,126 @@
1+
2+
3+
## 演进
4+
5+
在 iOS 13 中，苹果引入了 SF Symbols，这是一套专门为 Apple 设备设计的符号图标，可以在应用程序中使用。这些符号图标是矢量图形，可以在不同的大小和颜色下保持清晰度。
6+
7+
WWDC 21 符号数量达到 3000 个，包括 500 个全新的符号，以及 1000 个符号的变体。推出了 SF Symbols 3，支持更多的变体和颜色。可以自定义符号。
8+
9+
WWDC 22 推出了 SF Symbols 4，数量达到 4000 个，支持更多的变体和颜色。有自动渲染模式，还有可变颜色。
10+
11+
WWDC 23 推出了 SF Symbols 5，数量达到 5000 个。符号有7种动画，可以定制动画。可以用 Symbol Components 来创建自定义符号。
12+
13+
## 变量值
14+
115
SF Symbol 支持变量值，可以通过设置 variableValue 来填充不同部分，比如 wifi 图标，不同值会亮不同部分，`Image(systemName: "wifi", variableValue: 0.5)` 。
216

17+
下面是一个使用变量值的示例代码：
18+
19+
```swift
20+
struct ContentView: View {
21+
@State private var variableValue: Double = 0.5
22+
23+
var body: some View {
24+
VStack {
25+
Slider(value: $variableValue, in: 0...1, step: 0.01)
26+
Image(systemName: "speaker.wave.3.fill", variableValue: variableValue)
27+
.symbolRenderingMode(.palette)
28+
.symbolVariant(.fill)
29+
.foregroundColor(.blue)
30+
.imageScale(.large)
31+
}
32+
.padding()
33+
}
34+
}
35+
```
36+
37+
## 大小
38+
39+
`.imageScale` 可以改变 SF Symbol 的大小，可以设置为 `.small`、`.medium`、`.large`。
40+
41+
```swift
42+
struct ContentView: View {
43+
var body: some View {
44+
Image(systemName: "wifi")
45+
.imageScale(.large)
46+
}
47+
}
48+
```
49+
50+
还可以通过 `.font(.system(size:` 和 `.fontWeight(.semibold)` 来设置大小和粗细。
51+
52+
## 文本插值
53+
54+
文本插值支持 SF Symbol，可以在文本中插入 SF Symbol。
55+
56+
```swift
57+
Text("这是一辆双层 \(Image(systemName: "bus.doubledecker"))")
58+
```
59+
60+
## symbolRenderingMode 渲染模式
61+
62+
symbolRenderingMode 可以设置 SF Symbol 的渲染模式，可以设置为 `.multicolor`、`.palette`、`.monochrome`、`.hierarchical`。
63+
64+
- `.multicolor`：多色模式。这种模式下，SF Symbols 将使用预定义的多种颜色来显示。这是默认的渲染模式。
65+
- `.palette`：调色板模式。这种模式下，SF Symbols 将使用你指定的颜色来显示。你可以为每个部分指定不同的颜色。
66+
- `.monochrome`：单色模式。这种模式下，SF Symbols 将使用单一颜色来显示。这个颜色是你在代码中指定的颜色。
67+
- `.hierarchical`：层次模式。这种模式下，SF Symbols 将使用一种颜色，但是不同的部分会有不同的透明度。这可以创建出一种层次感。
68+
69+
以下是一个使用 `.multicolor` 渲染模式的示例代码：
70+
71+
```swift
72+
struct ContentView: View {
73+
var body: some View {
74+
Image(systemName: "figure.walk.motion.trianglebadge.exclamationmark")
75+
.symbolRenderingMode(.multicolor)
76+
}
77+
}
78+
```
79+
80+
## symbolVariant 变体
81+
82+
symbolVariant 可以设置 SF Symbol 的变体，可以设置为 `.none`、`.circle`、`.square`、`.rectangle`、`.fill`、`.slash`。
83+
84+
当然，以下是 SF Symbols 的各种变体的详细介绍：
85+
86+
1. `none`：没有任何特殊变体的 SF Symbol。
87+
88+
2. `circle`：这个变体的 SF Symbol 是在一个圆形背景中的。例如，`circle` 变体的 "person" symbol 就是一个人像在一个圆形背景中。
89+
90+
3. `square`：这个变体的 SF Symbol 是在一个正方形背景中的。例如，`square` 变体的 "person" symbol 就是一个人像在一个正方形背景中。
91+
92+
4. `rectangle`：这个变体的 SF Symbol 是在一个矩形背景中的。例如，`rectangle` 变体的 "person" symbol 就是一个人像在一个矩形背景中。
93+
94+
5. `fill`：这个变体的 SF Symbol 是填充的，也就是说，它的内部是有颜色的，而不是空心的。例如，`fill` 变体的 "heart" symbol 就是一个填充的心形。
95+
96+
6. `slash`：这个变体的 SF Symbol 是有一条斜线穿过的。例如，`slash` 变体的 "bell" symbol 就是一个有斜线穿过的铃铛，表示静音。
97+
98+
99+
```swift
100+
struct ContentView: View {
101+
var body: some View {
102+
VStack(alignment: .leading) {
103+
Label("Default", systemImage: "person")
104+
Label("Circle", systemImage: "circle")
105+
.symbolVariant(.circle)
106+
Label("Circle Fill", systemImage: "circle.fill")
107+
.symbolVariant(.circle.fill)
108+
Label("Square", systemImage: "square")
109+
.symbolVariant(.square)
110+
Label("Square Fill", systemImage: "square.fill")
111+
.symbolVariant(.square.fill)
112+
Label("Rectangle", systemImage: "rectangle")
113+
.symbolVariant(.rectangle)
114+
Label("Rectangle Fill", systemImage: "rectangle.fill")
115+
.symbolVariant(.rectangle.fill)
116+
Label("Fill", systemImage: "heart")
117+
.symbolVariant(.fill)
118+
Label("Slash", systemImage: "bell")
119+
.symbolVariant(.slash)
120+
Label("Slash Fill", systemImage: "bell.fill")
121+
.symbolVariant(.slash.fill)
122+
}
123+
}
124+
}
125+
126+
```

‎SwiftPamphletApp/Resource/Guide/SwiftUI/视觉/SwiftUI-Shadow(ap).md

+10
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,13 @@
11

2+
3+
## shadow
4+
5+
卡片阴影效果
6+
7+
```swift
8+
.shadow(color: Color(.sRGB, red: 0, green: 0, blue: 0, opacity: 0.25), radius: 10, x: 0, y: 0)
9+
```
10+
211
## `.shadow(.drop(radius:` 前景阴影
312

413
```swift
@@ -24,6 +33,7 @@ struct ContentView: View {
2433

2534
以上代码中，我们使用了 `shadow(.drop(radius: y:))` 修饰符为图像和文本添加了阴影效果。这个修饰符接受两个参数：`radius` 和 `y`。`radius` 参数控制阴影的模糊半径，`y` 参数控制阴影的偏移量。
2635

36+
2737
## 多重阴影，发光效果
2838

2939
```swift

‎SwiftPamphletApp/Resource/Guide/SwiftUI/视觉/SwiftUI-模糊(ap).md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
2+
三方库
3+
4+
- [daprice/Variablur: Variable blur effects for SwiftUI, powered by Metal](https://github.com/daprice/Variablur)
5+
- [joogps/Glur: Progressive blurs in SwiftUI.](https://github.com/joogps/Glur)

0 commit comments

Comments
 (0)