From 9ae6c7dfebbd27feaeba3c8075f6521242ec8fea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=88=B4=E9=93=AD?= Date: Thu, 23 May 2024 22:22:20 +0800 Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=20shadow=20=E6=95=88?= =?UTF-8?q?=E6=9E=9C=E5=86=85=E5=AE=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 4 +- SwiftPamphletApp.xcodeproj/project.pbxproj | 4 ++ .../Guide/View/GuideListView.swift | 1 + ...51\241\265\346\273\232\345\212\250(ap).md" | 30 ++++++++++ .../SwiftUI-Shadow(ap).md" | 57 +++++++++++++++++++ 5 files changed, 94 insertions(+), 2 deletions(-) create mode 100644 "SwiftPamphletApp/Resource/Guide/SwiftUI/\350\247\206\350\247\211/SwiftUI-Shadow(ap).md" diff --git a/README.md b/README.md index 333eead4d..abe56feb0 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,9 @@ # 戴铭的开发小册子 6.0 [![Available on the App Store](https://ming1016.github.io/qdimg/badge-download-on-the-mac-app-store.svg)](https://apps.apple.com/cn/app/id1609702529) -Swift开发的手册，是个 macOS 程序，已上线macOS应用商店，[点击安装](https://apps.apple.com/cn/app/%E6%88%B4%E9%93%AD%E7%9A%84%E5%BC%80%E5%8F%91%E5%B0%8F%E5%86%8C%E5%AD%90/id1609702529?mt=12)，或直接在商店搜索“戴铭”关键字，方便更新程序。小册子文字版 《[戴铭的 Swift 小册子](https://ming1016.github.io/2021/11/23/daiming-swift-pamphlet/)》 +Swift开发的手册，是个 macOS 程序，已上线macOS应用商店，[点击购买安装(98元)](https://apps.apple.com/cn/app/%E6%88%B4%E9%93%AD%E7%9A%84%E5%BC%80%E5%8F%91%E5%B0%8F%E5%86%8C%E5%AD%90/id1609702529?mt=12)，或直接在商店搜索“戴铭”关键字。安装应用方便更新程序。小册子5.0 的文字版 《[戴铭的 Swift 小册子](https://ming1016.github.io/2021/11/23/daiming-swift-pamphlet/)》，6.0 新增的文字内容也可以在我博客上看。 -使用 SwiftData、Observable、NavigationSplitView 进行了重构，现在可自己添加管理资料，和知识点做关联。 +本手册使用 SwiftData、Observable、NavigationSplitView 进行了重构，现在可自己添加管理资料，和知识点做关联。 内容主要包含 diff --git a/SwiftPamphletApp.xcodeproj/project.pbxproj b/SwiftPamphletApp.xcodeproj/project.pbxproj index 073b0fd47..56249a4cd 100644 --- a/SwiftPamphletApp.xcodeproj/project.pbxproj +++ b/SwiftPamphletApp.xcodeproj/project.pbxproj @@ -237,6 +237,7 @@ 087ECE372BFF26790011F679 /* Toolbar协议(ap).md in Resources */ = {isa = PBXBuildFile; fileRef = 087ECE362BFF26790011F679 /* Toolbar协议(ap).md */; }; 087ECE392BFF26910011F679 /* Documents协议(ap).md in Resources */ = {isa = PBXBuildFile; fileRef = 087ECE382BFF26910011F679 /* Documents协议(ap).md */; }; 087ECE3B2BFF26B00011F679 /* 特定情况视图协议(ap).md in Resources */ = {isa = PBXBuildFile; fileRef = 087ECE3A2BFF26B00011F679 /* 特定情况视图协议(ap).md */; }; + 087ECE3D2BFF491B0011F679 /* SwiftUI-Shadow(ap).md in Resources */ = {isa = PBXBuildFile; fileRef = 087ECE3C2BFF491B0011F679 /* SwiftUI-Shadow(ap).md */; }; 0887A59A2BA28F6D00131359 /* CSGuideView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 0887A5992BA28F6D00131359 /* CSGuideView.swift */; }; 0896FB9227BA486900676B7F /* Button(ap).md in Resources */ = {isa = PBXBuildFile; fileRef = 0896FB9127BA486900676B7F /* Button(ap).md */; }; 08A4FDC227B25A140068E5BC /* @dynamicMemberLookup动态成员查询(ap).md in Resources */ = {isa = PBXBuildFile; fileRef = 08A4FDC127B25A140068E5BC /* @dynamicMemberLookup动态成员查询(ap).md */; }; @@ -553,6 +554,7 @@ 087ECE362BFF26790011F679 /* Toolbar协议(ap).md */ = {isa = PBXFileReference; lastKnownFileType = net.daringfireball.markdown; path = "Toolbar协议(ap).md"; sourceTree = ""; }; 087ECE382BFF26910011F679 /* Documents协议(ap).md */ = {isa = PBXFileReference; lastKnownFileType = net.daringfireball.markdown; path = "Documents协议(ap).md"; sourceTree = ""; }; 087ECE3A2BFF26B00011F679 /* 特定情况视图协议(ap).md */ = {isa = PBXFileReference; lastKnownFileType = net.daringfireball.markdown; path = "特定情况视图协议(ap).md"; sourceTree = ""; }; + 087ECE3C2BFF491B0011F679 /* SwiftUI-Shadow(ap).md */ = {isa = PBXFileReference; lastKnownFileType = net.daringfireball.markdown; path = "SwiftUI-Shadow(ap).md"; sourceTree = ""; }; 0887A5992BA28F6D00131359 /* CSGuideView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CSGuideView.swift; sourceTree = ""; }; 0896FB9127BA486900676B7F /* Button(ap).md */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = net.daringfireball.markdown; path = "Button(ap).md"; sourceTree = ""; }; 08A4FDC127B25A140068E5BC /* @dynamicMemberLookup动态成员查询(ap).md */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = net.daringfireball.markdown; path = "@dynamicMemberLookup动态成员查询(ap).md"; sourceTree = ""; }; @@ -1061,6 +1063,7 @@ isa = PBXGroup; children = ( 08522BE327CF5C55005FF059 /* SwiftUI颜色(ap).md */, + 087ECE3C2BFF491B0011F679 /* SwiftUI-Shadow(ap).md */, 08522BE827CF6E3A005FF059 /* SwiftUI Effect(ap).md */, 085BB77327D22FCA00E8F69A /* SwiftUI动画(ap).md */, 085BB77527D22FE300E8F69A /* SwiftUI Canvas(ap).md */, @@ -1892,6 +1895,7 @@ 08BE636427C886D2002BC6A8 /* LazyVStack和LazyHStack(ap).md in Resources */, 08449030279ECF7D00B61353 /* 1.md in Resources */, 087ECE352BFF26620011F679 /* Responder chain协议(ap).md in Resources */, + 087ECE3D2BFF491B0011F679 /* SwiftUI-Shadow(ap).md in Resources */, 08522BDA27CF5029005FF059 /* Slider(ap).md in Resources */, 08D8EFFA2BEF9C9800AA0020 /* 小组件-远程定时获取数据(ap).md in Resources */, 0850AC102BF30058009FDBBF /* List-完全可点击的行(ap).md in Resources */, diff --git a/SwiftPamphletApp/Guide/View/GuideListView.swift b/SwiftPamphletApp/Guide/View/GuideListView.swift index cff63a90d..6c27dd4b0 100644 --- a/SwiftPamphletApp/Guide/View/GuideListView.swift +++ b/SwiftPamphletApp/Guide/View/GuideListView.swift @@ -363,6 +363,7 @@ final class GuideListModel { ]), L(t: "视觉",sub: [ L(t: "SwiftUI颜色"), + L(t: "SwiftUI-Shadow"), L(t: "SwiftUI Effect"), L(t: "SwiftUI动画"), L(t: "SwiftUI Canvas"), diff --git "a/SwiftPamphletApp/Resource/Guide/SwiftUI/\346\225\260\346\215\256\351\233\206\345\220\210\347\273\204\344\273\266/Scroll\346\273\232\345\212\250\350\247\206\345\233\276/scrollTargetBehavior\345\210\206\351\241\265\346\273\232\345\212\250(ap).md" "b/SwiftPamphletApp/Resource/Guide/SwiftUI/\346\225\260\346\215\256\351\233\206\345\220\210\347\273\204\344\273\266/Scroll\346\273\232\345\212\250\350\247\206\345\233\276/scrollTargetBehavior\345\210\206\351\241\265\346\273\232\345\212\250(ap).md" index 27a3d8440..3995f152e 100644 --- "a/SwiftPamphletApp/Resource/Guide/SwiftUI/\346\225\260\346\215\256\351\233\206\345\220\210\347\273\204\344\273\266/Scroll\346\273\232\345\212\250\350\247\206\345\233\276/scrollTargetBehavior\345\210\206\351\241\265\346\273\232\345\212\250(ap).md" +++ "b/SwiftPamphletApp/Resource/Guide/SwiftUI/\346\225\260\346\215\256\351\233\206\345\220\210\347\273\204\344\273\266/Scroll\346\273\232\345\212\250\350\247\206\345\233\276/scrollTargetBehavior\345\210\206\351\241\265\346\273\232\345\212\250(ap).md" @@ -50,6 +50,36 @@ struct ContentView: View { } ``` +## containerRelativeFrame 控制划动单元显示范围 + +containerRelativeFrame 可以控制划动单元显示范围，可以控制单个内容一页，也可以控制多个内容一页。 + +以下是 containerRelativeFrame 的使用示例： + +```swift +struct ContentView: View { + + var body: some View { + ScrollView(.horizontal) { + HStack(spacing: 10.0) { + ForEach(0...20, id: \.self) { _ in + Image("evermore") + .resizable() + .scaledToFit() + .containerRelativeFrame(.horizontal, count: 4, span: 3, spacing: 8) + } + } + } + .scrollTargetBehavior(.paging) + .safeAreaPadding(.horizontal, 20.0) + } +} +``` + +以上代码中，我们使用 containerRelativeFrame 修饰符，将每个 Image 视图的宽度设置为容器宽度的 3/4。我们还设置了每个 Image 视图之间的间距为 8 点。 + + + diff --git "a/SwiftPamphletApp/Resource/Guide/SwiftUI/\350\247\206\350\247\211/SwiftUI-Shadow(ap).md" "b/SwiftPamphletApp/Resource/Guide/SwiftUI/\350\247\206\350\247\211/SwiftUI-Shadow(ap).md" new file mode 100644 index 000000000..1596239a3 --- /dev/null +++ "b/SwiftPamphletApp/Resource/Guide/SwiftUI/\350\247\206\350\247\211/SwiftUI-Shadow(ap).md" @@ -0,0 +1,57 @@ + +## `.shadow(.drop(radius:` 前景阴影 + +```swift +struct ContentView: View { + var body: some View { + Image(systemName: "film") + .frame(width: 200, height: 200) + .background(Color.mint) + .foregroundStyle(Color.white.shadow(.drop(radius: 1, y: 2.0))) + .font(.system(size: 80)) + .overlay { + VStack { + Spacer() + Text("电影") + .font(.largeTitle) + .foregroundStyle(Color.white.shadow(.drop(radius: 1, y: 2.0))) + .padding() + } + } + } +} +``` + +以上代码中，我们使用了 `shadow(.drop(radius: y:))` 修饰符为图像和文本添加了阴影效果。这个修饰符接受两个参数：`radius` 和 `y`。`radius` 参数控制阴影的模糊半径，`y` 参数控制阴影的偏移量。 + +## 多重阴影，发光效果 + +```swift +struct ContentView: View { + var body: some View { + ZStack { + Rectangle() + .foregroundStyle(.black) + Image(systemName: "film") + .frame(width: 200, height: 200) + .background(Color.mint) + .foregroundStyle(Color.white.shadow(.drop(radius: 2, y: 4.0))) + .shadow(color: .white.opacity(0.3), radius: 100) + .shadow(color: .white.opacity(0.5), radius: 80) + .shadow(color: .white.opacity(0.6), radius: 30) + .shadow(color: .white.opacity(0.7), radius: 10) + .font(.system(size: 80)) + .overlay { + VStack { + Spacer() + Text("电影") + .font(.largeTitle) + .foregroundStyle(Color.white.shadow(.drop(radius: 2, y: 4.0))) + .padding() + } + } + } + } +} +``` +