当前位置：首页 > news >正文

AlertToast源码解析：探索SwiftUI弹窗库的内部实现原理

news 2026/4/18 18:10:07

AlertToast源码解析：探索SwiftUI弹窗库的内部实现原理

【免费下载链接】AlertToastCreate Apple-like alerts & toasts using SwiftUI项目地址: https://gitcode.com/gh_mirrors/al/AlertToast

AlertToast是一个功能强大的SwiftUI弹窗库，它允许开发者轻松创建苹果风格的警报和提示框。本文将深入剖析AlertToast的内部实现原理，帮助开发者更好地理解和使用这个库。

项目概述

AlertToast的核心目标是提供一种简单、美观的方式来在SwiftUI应用中显示各种类型的弹窗。它支持多种显示模式和样式，能够满足不同场景下的需求。

从项目结构来看，AlertToast的源代码主要集中在Sources/AlertToast/目录下，包含了三个主要文件：AlertToast.swift、ActivityIndicator.swift和BlurView.swift。其中，AlertToast.swift是整个库的核心实现文件。

核心组件解析

1. 弹窗类型设计

AlertToast定义了多种弹窗类型，以适应不同的使用场景。在AlertToast.swift文件中，我们可以看到AlertType枚举的定义：

public enum AlertType: Equatable{ ///Animated checkmark case complete(_ color: Color) ///Animated xmark case error(_ color: Color) ///System image from `SFSymbols` case systemImage(_ name: String, _ color: Color) ///Image from Assets case image(_ name: String, _ color: Color) ///Loading indicator (Circular) case loading ///Only text alert case regular }

这种设计允许开发者根据需要选择不同类型的弹窗，如成功提示、错误提示、加载状态等。每种类型都有相应的视觉表现和动画效果。

2. 显示模式

AlertToast支持三种主要的显示模式，定义在DisplayMode枚举中：

public enum DisplayMode: Equatable{ ///Present at the center of the screen case alert ///Drop from the top of the screen case hud ///Banner from the bottom of the view case banner(_ transition: BannerAnimation) }

alert模式：在屏幕中央显示弹窗
hud模式：从屏幕顶部滑入
banner模式：从屏幕底部滑入，支持滑动和弹出两种过渡动画

这种多样化的显示模式让弹窗能够适应不同的使用场景和用户体验需求。

3. 动画实现

AlertToast的一大特色是其流畅的动画效果。以成功提示的对勾动画为例，我们可以看到AnimatedCheckmark结构体的实现：

fileprivate struct AnimatedCheckmark: View { @State private var percentage: CGFloat = .zero var body: some View { Path { path in path.move(to: CGPoint(x: 0, y: height / 2)) path.addLine(to: CGPoint(x: width / 2.5, y: height)) path.addLine(to: CGPoint(x: width, y: 0)) } .trim(from: 0, to: percentage) .stroke(color, style: StrokeStyle(lineWidth: CGFloat(size / 8), lineCap: .round, lineJoin: .round)) .animation(Animation.spring().speed(0.75).delay(0.25), value: percentage) .onAppear { percentage = 1.0 } } }

这段代码通过路径绘制和动画控制，实现了对勾图标的绘制动画。类似地，错误提示的叉号图标也采用了类似的动画实现方式。

视图结构与组合

AlertToast的视图结构采用了组合设计模式，通过不同的视图组件组合来构建完整的弹窗。主要的视图组件包括：

alert：中央弹窗视图
hud：顶部提示视图
banner：底部横幅视图

每种视图都有其独特的布局和样式，但它们共享相同的核心功能，如文本显示、图标显示等。

以alert视图为例，其结构如下：

public var alert: some View{ VStack{ switch type{ case .complete(let color): Spacer() AnimatedCheckmark(color: color) Spacer() case .error(let color): Spacer() AnimatedXmark(color: color) Spacer() // 其他类型的处理... } VStack(spacing: type == .regular ? 8 : 2){ if title != nil{ Text(LocalizedStringKey(title ?? "")) .font(style?.titleFont ?? Font.body.bold()) .multilineTextAlignment(.center) .textColor(style?.titleColor ?? nil) } if subTitle != nil{ Text(LocalizedStringKey(subTitle ?? "")) .font(style?.subTitleFont ?? Font.footnote) .opacity(0.7) .multilineTextAlignment(.center) .textColor(style?.subtitleColor ?? nil) } } } .padding() .withFrame(type != .regular && type != .loading) .alertBackground(style?.backgroundColor ?? nil) .cornerRadius(10) }

这个结构清晰地展示了AlertToast如何通过SwiftUI的视图组合来构建复杂的UI组件。

弹出与消失机制

AlertToast的弹出和消失机制是通过AlertToastModifier实现的。这个修饰符负责处理弹窗的显示、动画和消失逻辑：

public struct AlertToastModifier: ViewModifier{ ///Presentation `Binding<Bool>` @Binding var isPresenting: Bool // ...其他属性... public func body(content: Content) -> some View { // 根据不同的显示模式构建视图... } private func onAppearAction(){ guard workItem == nil else { return } if alert().type == .loading{ duration = 0 tapToDismiss = false } if duration > 0{ workItem?.cancel() let task = DispatchWorkItem { withAnimation(Animation.spring()){ isPresenting = false workItem = nil } } workItem = task DispatchQueue.main.asyncAfter(deadline: .now() + duration, execute: task) } } }

通过这个修饰符，AlertToast实现了自动消失、点击消失等功能，并且能够根据弹窗类型自动调整行为（如加载弹窗不会自动消失）。

使用示例

AlertToast的使用非常简单，开发者只需在视图上应用toast修饰符即可：

struct ContentView: View { @State private var showToast = false var body: some View { Button("Show Toast") { showToast = true } .toast(isPresenting: $showToast) { AlertToast(type: .complete(.green), title: "操作成功") } } }