SwiftUI中弹窗应有的样子

2024-01-22 05:39:11

作为应用程序开发人员，我们不可避免地会遇到需要在应用程序中添加弹窗的情况。弹窗在项目中是随处可见的一种设计，消息提醒、操作交互、功能选择等很多需求中都会使用到。在 UIKit 中，实现方式有很多，如覆盖UIView、模态UIViewController、keyWindow / rootController添加等。

而SwiftUI 作为苹果最新推出的界面开发框架，能否同样以简单、高效的方式实现弹窗呢？答案是肯定的。下面，我们就来一起了解一下 SwiftUI 中弹窗的设计和实现方式。

模态视图控制器

模态视图控制器是 SwiftUI 中最常用的弹窗实现方式。它可以用来创建一个覆盖在当前视图之上的新视图，用户必须在与新视图交互后才能继续与当前视图交互。

要创建模态视图控制器，可以使用 .sheet() 修饰符。该修饰符接受一个闭包作为参数，闭包的返回值就是模态视图控制器的内容。例如：

struct ContentView: View {
    @State private var isPresented = false

    var body: some View {
        Button("Show Sheet") {
            isPresented = true
        }
        .sheet(isPresented: $isPresented) {
            Text("Hello, World!")
        }
    }
}

当用户点击按钮时，模态视图控制器就会被显示出来。用户可以与模态视图控制器中的内容交互，也可以点击模态视图控制器之外的区域来关闭模态视图控制器。

使用根控制器添加视图

除了使用模态视图控制器之外，我们还可以使用根控制器来添加视图。根控制器是应用程序的根视图控制器，它负责管理应用程序中的所有视图。

要使用根控制器添加视图，可以使用 .rootView() 修饰符。该修饰符接受一个闭包作为参数，闭包的返回值就是根视图控制器的内容。例如：

struct ContentView: View {
    var body: some View {
        Text("Hello, World!")
    }
}

@main
struct MyApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

当应用程序启动时，根视图控制器就会被添加到应用程序的窗口中。

覆盖UIView

除了上述两种方式之外，我们还可以使用覆盖UIView的方式来实现弹窗。这种方式相对来说比较复杂，但它可以实现更复杂的弹窗效果。

要覆盖UIView，我们需要使用 .overlay() 修饰符。该修饰符接受一个闭包作为参数，闭包的返回值就是覆盖UIView的内容。例如：

struct ContentView: View {
    @State private var isPresented = false

    var body: some View {
        ZStack {
            Text("Hello, World!")

            if isPresented {
                Color.black.opacity(0.5)
                    .edgesIgnoringSafeArea(.all)

                Text("Hello, World!")
                    .padding()
                    .background(Color.white)
            }
        }
        .onTapGesture {
            isPresented.toggle()
        }
    }
}

当用户点击屏幕时，覆盖UIView就会被显示出来。用户可以与覆盖UIView中的内容交互，也可以点击覆盖UIView之外的区域来关闭覆盖UIView。

最佳实践和常见问题

在使用 SwiftUI 实现弹窗时，需要注意以下几点：

使用正确的弹窗类型 ：根据不同的需求，选择合适的弹窗类型。模态视图控制器适用于需要用户立即做出决定的情况，而使用根控制器添加视图适用于需要用户长时间与弹窗中的内容交互的情况。
保持弹窗简单 ：弹窗应该简单明了，不要包含太多内容。如果弹窗包含太多内容，用户可能会感到困惑。
注意弹窗的动画 ：弹窗的动画应该流畅自然。如果弹窗的动画不流畅，用户可能会感到不适。
处理弹窗的关闭 ：弹窗应该提供关闭的方式，用户可以点击弹窗之外的区域或点击弹窗中的关闭按钮来关闭弹窗。

常见问题

如何关闭弹窗 ？

要关闭弹窗，用户可以点击弹窗之外的区域或点击弹窗中的关闭按钮。
如何防止弹窗被意外关闭 ？

可以通过在弹窗中添加一个背景视图来防止弹窗被意外关闭。背景视图应该覆盖整个屏幕，并且应该对用户输入做出响应。
如何使弹窗在屏幕上居中 ？

可以通过使用 .position() 修饰符来使弹窗在屏幕上居中。.position() 修饰符接受两个参数，第一个参数是弹窗的水平位置，第二个参数是弹窗的垂直位置。