在 SwiftUI 中显示 Toast 或弹出窗口的简单方法

ToastSwiftUI

在 SwiftUI 中显示 Toast 或弹出窗口的简单方法

大约

SwiftUI是苹果在2019年为iOS开发者带来的一件好事。但它仍然没有为我们提供一种展示祝酒词的方式,一个短时间的信息。Toast 消息在 iOS 应用程序中非常流行,即使它不是本机视图。这个 ToastSwiftUI 开源将帮助您轻松做到这一点。

显示弹出窗口是一样的,不是太难,但没有本机 API。这个开源也可以帮助你。

演示 ToastSwiftUI

若要运行示例项目,请克隆存储库,然后首先从示例目录运行。pod install

要求

  • Swift 5.0 或更高版本
  • iOS 13 或更高版本

安装

可可豆荚

ToastSwiftUI 可通过 CocoaPods 获得。要安装
它,只需将以下行添加到您的 Podfile 中:

pod 'ToastSwiftUI'

然后在命令行中运行。pod install

Swift Package Manager

在 Xcode 中,选择菜单文件 -> Swift Packages -> Add Package Dependency。选择一个目标,然后将此链接添加到输入字段:
https://github.com/huynguyencong/ToastSwiftUI.git

手动

有时您不想使用 Cocoapod 进行安装。在这种情况下,您需要手动添加它。这很简单,只需将 Swift 文件添加到您的项目中即可。ToastSwiftUI/Classes

Usage

Showing a popup

  • Step 1: Add a @State variable to control when showing the popup.
@State private var isPresentingPopup = false
  • Step 2: Add modifier to your view with the binding variable in step 1. is a view that you want to show as a popup. Setting frame is not necessary if you are happy with the intrinsic size of the pop up viewpopupMyPopup

.popup(isPresenting: $isPresentingPopup, overlayColor: Color.black.opacity(0.4)) {
    MyPopup(isPresenting: $isPresentingPopup)
        .frame(width: 300, height: 500)         // it is not required
}
  • Step 3: Show the toast by set variable in the step 1 to true. You can also dismiss it by set it to false:
self.isPresentingPopup = true

Showing a toast

  • Step 1: Add a @State variable to control when showing the toast.
@State private var isPresentingToast = false
  • Step 2: Add modifier to your view with the binding variable in step 1.toast
.toast(isPresenting: $isPresentingToast, message: "Success", icon: .success)
  • Step 3: Show the toast by set variable in the step 1 to true. You can also dismiss it by set it to false:
self.isPresentingPopup = true

Showing a toast with a message state variable

  • Step 1: Add a optional variable. When this optional variable has value, it will trigger a toast.String@State
@State private var toastMessage: String?
  • Step 2: Add modifier, pass the ($) of the above message variable as the first param.toastBinding
.toast($toastMessage)
  • Step 3: Show the toast by setting variable in the step 1 to a . You can also dismiss it by set it to :Stringnil
toastMessage = "Hello world!"

See the completed code below, it has 3 examples to show both toast and popup in different way:

import SwiftUI
import ToastSwiftUI

struct ContentView: View {
    // 1.1. Example 1: Add @State variables to control when showing the popup
    @State private var isPresentingPopup = false
    
    // 1.2. Example 2: First way to show a toast. Add @State variables to control when showing the toast
    @State private var isPresentingToast = false
    
    // 1.3. Example 3: Second way to show a toast. Add an optional String @State variables to control when showing the toast
    @State private var toastMessage: String?
    
    @State private var count = 0
    
    var body: some View {
        VStack(spacing: 20) {
            Button("Show a success toast with a boolean variable") {
                // 3.2.1. Set state variable to true if you want to show the toast
                self.isPresentingToast = true
            }
            
            Button("Dismiss the success toast") {
                // 3.2.2. Set state variable to false if you want to hide the toast
                self.isPresentingToast = false
            }
            
            Divider()
            
            Button("Show toast with a text binding") {
                // 3.3.1. Set text variable you want to show
                toastMessage = "Toast number \(count)"
                
                count += 1
            }
            
            Button("Dismiss toast") {
                // 3.3.2. Set text variable to nil
                self.toastMessage = nil
            }
            
            Divider()
            
            Button("Show popup") {
                // 3.1.1. Set state variable to true if you want to show the popup
                self.isPresentingPopup = true
            }
            
            Button("Dismiss popup") {
                // 3.1.2. Set state variable to true if you want to hide the popup
                self.isPresentingPopup = false
            }
            
            Spacer()
        }
        .padding()
        
        // 2.1. Add a `popup` modifier to your view with the binding variable in step 1
        .popup(isPresenting: $isPresentingPopup, popup:
            MyPopup(isPresenting: $isPresentingPopup)
                .background(Color(.systemBackground))
        )
        
        // 2.2. Add a `toast` modifier to your view with the binding variable in step 1
        .toast(isPresenting: $isPresentingToast, message: "Success", icon: .success)
        
        // 2.3. Add a `toast` modifier to your view with the binding variable in step 1
        .toast($toastMessage)
    }
}

Customization

popup modifier parameters:

  • autoDismiss

    • none: No auto dismiss, you have to dismiss manually.
    • after(TimeInterval): Auto dismiss after a duration that you pass to.
    • auto(String): Auto dissmiss after a duration that calculated base on the text you show.
  • hasShadow

  • cornerRadius

  • overlayColor

  • isTapOutsideToDismiss

toast modifier parameters:

  • autoDismiss

    • none: No auto dismiss, you have to dismiss manually.
    • after(TimeInterval): Auto dismiss after a duration that you pass to.
    • auto: Auto dissmiss after a duration that calculated base on the text you show.
  • icon

    • info
    • error
    • success
    • custom(Image): Show icon as the image you provided.
    • loading: Show icon as a rotating loading indicator.
  • backgroundColor

  • textColor

UIKit version

EzPopup for UIKit

Author

Huy Nguyen, conghuy2012@gmail.com

License

ToastSwiftUI is available under the MIT license. See the LICENSE file for more info.

GitHub

点击跳转