轻松获得如 watchOS 10 上所示的精美渐变模糊效果
内容模糊视图
轻松获得如 watchOS 10 上所示的精美渐变模糊效果
安装
可在 iOS 17+ 或 watchOS 10+ 上使用。
- 在 Xcode 中,从“文件”菜单中选择“添加包...” 。
https://github.com/hiddevdploeg/ContentBlurView
在搜索字段中输入。- 单击“添加包”(将依赖关系规则设置为“Up to Next Major Version”)
- 添加包后,您将能够使用以下命令在项目中导入 ContentBlurView。
import ContentBlurView
如何使用
您可以ContentBlurView
与任何View
ContentBlurView {
// Any view goes here
}
.ignoresSafeArea(edges: .all) // for fullscreen enjoyment
路线
您可以决定模糊应从哪一侧开始:.topBlur
、.leadingBlur
或trailingBlur
。.bottomBlur
默认是.bottomBlur
文本
建议用作文本的HierarchicalShapeStyle
一部分.foregroundStyle
,因为这将使文本与背景更加生动。
例子
import MapKit
struct ContentView: View {
var body: some View {
TabView {
// Example with image and blur on top
ContentBlurView(direction: .topBlur) {
AsyncImage(url: URL(string: "https://picsum.photos/800"))
}
.ignoresSafeArea(edges: .all)
// Example with Map and text on top of it
ZStack(alignment: .bottom) {
ContentBlurView {
Map(interactionModes: .rotate) {
Marker("Apple Park", coordinate: CLLocationCoordinate2D(latitude: 37.334268, longitude: -122.008715))
}
.mapStyle(.imagery)
}
.ignoresSafeArea(edges: .all)
Text("Apple Park")
.font(.headline)
.foregroundStyle(.primary)
.padding()
}
}
.tabViewStyle(.verticalPage)
}
}
作者
该库由Hidde van der Ploeg创建。请随时通过Twitter或Mastodon联系。
执照
ContentBlurView 可在 MIT 许可证下使用。
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.