SwiftUI中弹窗实现-六虎

自界说弹窗

在UIKit中自界说弹窗办法很多，比方: 模态ViewController、view掩盖、keyWindow/RootWindow等。接下来咱们看下SwiftUI中的弹窗办法。

1.自界说(运用ZStack)

SwiftUI中完成弹窗很简单，运用ZStack 进行组装，操控好对应的变量来显现躲藏控件。

struct TestStack: View {
  
  @State var isShow = false
  
  var body: some View {
    ZStack{
      Text("咱们来了 ")
      if isShow {
                Text("你好，哈哈哈").transition(.scale).zIndex(1)
      }
    }
  }
}

如上面的代码，是一个很简单的示例，经过变量来操控Text是否显现。关于动画履行时间和动画需求自界说。这样来说关于一个界面是好处理的，但是在SwiftUI中涉及到杂乱界面和交互的时分问题很多。

接下来咱们运用这一特性来做一个杂乱点的业务。咱们知道在一个界面中或许涉及到很多弹窗，身份的承认，权限承认等等，鄙人面的页面中咱们来做一个界面中对多个弹窗的处理。

完成过程

1.经过ZStack来进行包装
2.构建一个统一的黑底通明的布景
3.自界说ObservableObject来操控弹窗展现和躲藏，ObservableObject作为一个EnvironmentObject
4.自界说ViewModifier 来加载弹窗
5.ObservableObject监听键盘弹出和收起，在键盘弹出时先收起键盘再次点击收起弹窗

1.统一弹窗布景色彩能够自界说

struct CustomBackgroundView: View {
  /// 环境变量 统一操控
  @EnvironmentObject var popObserve: CustomPopObserver
  
  var bgColor: Color = .black.opacity(0.3)
  /// 记录键盘状况
  @State var isShowKeyBoard = false
  
  var body: some View {
    bgColor
      .edgesIgnoringSafeArea(.all)
      .transition(.opacity)
          //对View extension 下面有具体完成
      .keyBoardObserver({ noti, status in
        self.isShowKeyBoard = status
      })
      .onTapGesture {
        if self.isShowKeyBoard {
          self.hideKeyBoard()
        }else {
          //自己消失
          popObserve.backgroundTapPublisher.send()
        }
      }
  }
}

2.自界说`ObservableObject` 记录当时弹窗的状况

import Combine

/// 界说多个弹窗类型，
enum CustomPopType: Int {
  case popView1 = 1
  case popView2
  case popView3
  case popView4
  case popView5
  case popView6
  case popView7
}

class CustomPopObserver: ObservableObject {
  
  /// 点击布景是否需求躲藏
  private var isHiddenWhenTapBackground = true
  /// 设置布景色彩
  var backgroundColor = Color.black.opacity(0.3)
  
  /// 展现第一个视图
  var popType: CustomPopType = .popView1 {
    didSet {
      self.isShowShowPopView = true
    }
  }
  
  ///躲藏展现弹窗操控标识，手动来机型send操作，增加变化的animation
  var isShowShowPopView = false {
    didSet{
      withAnimation(.spring()) {
        self.objectWillChange.send()
      }
    }
  }
  
  /// 点击后面布景触发事件
  let backgroundTapPublisher = ObservableObjectPublisher()
  
  private var cancellabelSet = Set<AnyCancellable>()
  
  init() {
    //订阅backgroundTapPublisher，当有事件触发的时分会进行调用
    backgroundTapPublisher.sink { _ in
      if self.isHiddenWhenTapBackground {
        /// 设置所有状况值为false，躲藏弹窗
        self.isShowShowPopView = false          
      }
    }
    .store(in: &cancellabelSet)
  }

  func clear() {
    cancellabelSet.forEach { cancellable in
      cancellable.cancel()
    }
    cancellabelSet.removeAll()
  }
  
  deinit {
    clear()
  }
}

3.设置`ViewModifier`

swiftUI中 View的 modifie 入参是view，并且回来值也是view，咱们运用这一特性来做弹窗。自界说ViewModifier,需求完成ViewModifier协议,而在ViewModifier协议办法中咱们能够拿到当时的content，对当时的content在做一层ZStack包装。在自界说的ViewModifier中，仍是用了@ViewBuilder来润饰传参，这样能够在ViewBuilder中传入多个View，最终在经过ZStack包裹。下面的处理中其实还对customView进行了一层包装，在完成动画的时分能够做到顶部和底部弹入、弹出的过度。

import SwiftUI

struct CustomPopViewModifier<T : View>: ViewModifier {
  /// 环境变量，只需有变化就会重绘依赖的view
  @EnvironmentObject var showData: CustomPopObserver
  /// 界说属性的时分不能设置为 some View 只能用一个泛型先替换
  private var customView: T
  /// 展现的时分履行的动画
  var transition: AnyTransition
  /// 弹窗的布景色
  var bgColor: Color

  ///运用ViewBuilder 能够传入多个View 进行动态设置
  init(bgColor: Color = .black.opacity(0.3),
     transition:AnyTransition = .bottomStyle,
     @ViewBuilder content:() -> T){
    self.bgColor = bgColor
    self.transition = transition
    self.customView = content()
  }
  
  func body(content: Content) -> some View {
    ZStack{
        //上层的View，在包装的时放到最基层
      content.zIndex(0)
      //增加布景
      if showData.isShowShowPopView {
        //增加布景图片
        CustomBackgroundView(bgColor: bgColor).transition(.opacity).zIndex(1)
        /// 包裹一层的原因: 在履行动画的时分 从下到现在 在消失是从.bottom 到 .bottom ，不设置为全屏幕的巨细不会从边缘进行动画，包裹的这一层是全屏幕巨细
        Rectangle()
          .fill(.clear)
          .overlay(content: {
            self.customView
          })
          .frame(width: kScreenWidth,height: kScreenHeight)
          .ignoresSafeArea()
          .transition(transition)
          .zIndex(2)
      }
    }.ignoresSafeArea(.keyboard)
  }
}

接下来咱们做一下其他的准备工作，设置动画办法。经过对AnyTransition增加一些默许完成。

extension AnyTransition {
  
  static let popupBackgroundStyle = AnyTransition.opacity
  
  static let bottomStyle = AnyTransition.slideToEdge(insertion: .bottom, removal: .bottom)
  
  static let topStyle = AnyTransition.slideToEdge(insertion: .top, removal: .top)
  
  static let leadingStyle = AnyTransition.slideToEdge(insertion: .leading,removal: .leading)
  
  static let trailingStyle = AnyTransition.slideToEdge(insertion: .trailing,removal: .trailing)
  
  static let leadingAndTrailingStyle = AnyTransition.slideToEdge(insertion: .leading,removal:.trailing)
  
  static let trailingAndLeadingStyle = AnyTransition.slideToEdge(insertion: .trailing,removal:.leading)
  
  static let topAndBottomStyle = AnyTransition.slideToEdge(insertion: .top,removal: .bottom)
  
  static let bottomAndTopStyle = AnyTransition.slideToEdge(insertion: .bottom,removal: .top)
  
  private enum MoveDirection {
    case leading
    case trailing
    case top
    case bottom
  }
  
  private static func slideToEdge(
    insertion: MoveDirection? = .leading,
    removal: MoveDirection? = .trailing
  ) -> AnyTransition {
    return AnyTransition.asymmetric(
      insertion: createMoveTransition(insertion!),
      removal: createMoveTransition(removal!)
    )
  }

  private static func createMoveTransition(
    _ direction: MoveDirection
  ) -> AnyTransition {
    switch direction {
      case .leading: return AnyTransition.move(edge: .leading)
      case .trailing: return AnyTransition.move(edge: .trailing)
      case .top:   return AnyTransition.move(edge: .top)
      case .bottom:  return AnyTransition.move(edge: .bottom)
    }
  }
}

extension AnyTransition {
  static var fly: AnyTransition {
    AnyTransition.modifier(active: FlyModifier(pct: 0), identity: FlyModifier(pct: 1))
  }
}

struct FlyModifier: GeometryEffect {
  var pct: Double
  
  var animatableData: Double {
    get {
      pct
    }
    set {
      pct = newValue
    }
  }
  
  func effectValue(size: CGSize) -> ProjectionTransform {
    let a = CGFloat(Angle(degrees: 90 * (1 - pct)).radians)
    
    var transform3d = CATransform3DIdentity
    transform3d.m34 = -1 / max(size.width, size.height)
    
    transform3d = CATransform3DRotate(transform3d, a, 1, 0, 0)
    transform3d = CATransform3DTranslate(transform3d, -size.width / 2.0, -size.width / 2.0, 0)
    
    let afffineTransform1 = ProjectionTransform(CGAffineTransform(translationX: size.width / 2.0, y: size.width / 2.0))
    let afffineTransform2 = ProjectionTransform(CGAffineTransform(scaleX: CGFloat(pct * 2), y: CGFloat(pct * 2)))
    
    if pct <= 0.5 {
      return ProjectionTransform(transform3d).concatenating(afffineTransform2).concatenating(afffineTransform1)
    } else {
      return ProjectionTransform(transform3d).concatenating(afffineTransform1)
    }
  }
}

咱们看下弹窗作用：

关于内部弹窗的完成，能够自界说各种样式，接下来是一个自界说的Page，结合ObservableObject和ViewModifier，

import SwiftUI

struct CustomPopPage: View {
  
  @ObservedObject private var popObserve = CustomPopObserver()
 
  let gradientList: [Gradient] = [.red,.orange,.yellow,.orange,.blue,.indigo,.purple]

  var body: some View {
    VStack{
      Spacer()
      ForEach(0..<7){ index in
        Button("展现弹窗(index + 1)"){
          popViewAction(index+1)
        }
        .frame(width: 200,height: 40)
        .foregroundColor(.white)
        .background(LinearGradient(gradient: gradientList[index], startPoint: .top, endPoint: .bottom))
        .cornerRadius(10)
        .padding(.top,5)
      }
      Spacer()
    }
    .modifier(CustomPopViewModifier(transition: getTransitionWithIndex(popObserve.popType),content: {
      switch popObserve.popType {
      case .popView1:
        CustomPopView1()
      case .popView2:
        CustomPopView2()
      case .popView3:
        CustomPopView3()
      case .popView4:
        CustomPopView4()
      case .popView5:
        CustomPopView1()
      case .popView6:
        CustomPopView2()
      case .popView7:
        CustomPopView1()
      }
    }))
    .environmentObject(popObserve)
  }
  
  func popViewAction(_ idx: Int) {
    guard let type = CustomPopType(rawValue: idx) else {
      return
    }
    popObserve.popType = type
  }
  
  func getTransitionWithIndex(_ index: CustomPopType) -> AnyTransition {
    switch index.rawValue {
    case 1:
      return .topStyle
    case 2:
      return .bottomStyle
    case 3:
      return .topAndBottomStyle
    case 4:
      return .bottomAndTopStyle
    case 5:
      return .leadingStyle
    case 6:
      return .leadingAndTrailingStyle
    case 7:
      return .trailingStyle
    default:
      return .bottomStyle
    }
  }
}

这样操作下来咱们就能完成上图中的弹窗操作，但是还有一些问题存在。

问题

咱们App在设计的时分 UI往往是比较杂乱最外层是 NavigationView或TabView，这时分弹窗并不会把导航栏进行掩盖，弹窗的层级比导航栏还要低(最外层的View层级是最低的)。点击回来按钮会直接回来到上一层，弹窗会在dissmiss的时分消失掉。而不是按照咱们的主意先把弹窗消失掉，再次点击回来到上一个界面。

这时分弹窗有其他布景色会明显和导航栏别离，并且由于A界面在push到B界面的时分，导航栏是从A界面传过来的，B界面的弹窗并不能把导航栏包裹在内，就会形成视图UI层级上的别离。

ZStack的弹窗办法适用范围：没有导航栏或导航栏躲藏，没有布景色的弹窗，或许是大局的体系弹窗能够在App的最外层最一次包装

2.运用体系的模态弹窗跳转完成

sheet， fullscreenCover : 模态常用，根本不会用到弹窗中，功用有局限性。
alert，alertSheet:体系自带，不支持自界说。在项目中用到的不多，满足不了自界说UI的需求。

该办法可自界说功用不多，都是从底部弹出，后面view缩小的一个动画，并且动画不可修正，局限性太高。简略测试代码如下，

struct TestView: View {
  @State var state = false
  @State var isSheet = false
  
  var body: some View {
    NavigationView {
      Color.white.edgesIgnoringSafeArea(.all)
        .overlay(content: {
          VStack{
            Button("全屏弹窗") {
              state = true
            }
            .foregroundColor(.white)
            .frame(width: 100,height: 35)
            .background(.purple)
            .cornerRadius(10)
            .padding(.bottom,10)
            
            Button("半屏弹窗") {
              isSheet = true
            }
            .foregroundColor(.white)
            .frame(width: 100,height: 35)
            .background(.purple)
            .cornerRadius(10)
            
          }
        })
        .fullScreenCover(isPresented: $state) {
          ZStack{
            Color.blue.opacity(0.3).contentShape(Rectangle())
              .onTapGesture {
                state = false
              }
            
            Text("这是全屏弹窗").foregroundColor(.red).font(.system(size: 18))
          }.ignoresSafeArea()
      }
      .sheet(isPresented: $isSheet) {
        ZStack{
          Color.blue.opacity(0.3).contentShape(Rectangle())
            .onTapGesture {
              isSheet = false
            }
          
          Text("这是半屏弹窗").foregroundColor(.red).font(.system(size: 18))
        }.ignoresSafeArea()
      }
    }.navigationTitle(Text("swiftUI"))
  }
}

作用如下

上面的办法适合一些自界说弹窗，只适用底部弹出

3.获取主操控器自界说模态跳转

咱们能够运用在UIKit中的办法，获取当时的操控器，运用present的办法弹出自界说视图。咱们能够运用swiftUI中的环境变量，每次取值的时分都获取当时ViewController ，运用ViewController去present出咱们自界说的弹窗。

1.自界说`environmentKey`和`value`

struct ViewControllerHolder {
  weak var value: UIViewController?
}

struct ViewControllerKey: EnvironmentKey {
  
  static var defaultValue: ViewControllerHolder {
    ViewControllerHolder(value: UIApplication.shared.windows.filter {$0.isKeyWindow}.first?.rootViewController)
  }
}

extension EnvironmentValues {
  var viewController: UIViewController? {
    get{ self[ViewControllerKey.self].value }
    set{ self[ViewControllerKey.self].value = newValue }
  }
}

2.设置`UIViewController`拓宽办法

extension UIViewController {
  func present<Content: View>(@ViewBuilder content:() -> Content) {
    let toPresent = UIHostingController(rootView: AnyView(EmptyView()))
    toPresent.modalPresentationStyle = .overCurrentContext
    toPresent.modalTransitionStyle = .crossDissolve
    toPresent.view.backgroundColor = .clear
    toPresent.rootView = AnyView(content().environment(.viewController, toPresent))
    
    present(toPresent, animated: false)
  }
}

3.在需求弹窗的地方引进环境变量

///自界说弹窗
struct PresentViewTest: View {
  /// 引进环境变量
  @Environment(.viewController) private var vcHolder
  
  var body: some View {
    NavigationView {
      Color.blue.opacity(0.3)
        .edgesIgnoringSafeArea(.all)
        .overlay {
          Button("弹窗展现") {
            vcHolder?.present(content: {
              PresentView1()
            })
          }
          .frame(width: 200,height: 35)
          .background(.purple)
          .foregroundColor(.white)
          .cornerRadius(10)
        }
      
    }.navigationTitle("presentTest")
  }
}

struct PresentView1: View {
  /// 引进环境变量
  @Environment(.viewController) private var vcHolder
  
  @State var isShow = false
  
  var body: some View {
    ZStack{
      Color.black.opacity(0.3).edgesIgnoringSafeArea(.all).onTapGesture {
        withAnimation {
          isShow = false
        }
        DispatchQueue.main.asyncAfter(deadline: .now() + 0.2){
          vcHolder?.dismiss(animated: true)
        }
      }
      
      Text("我是present界面的弹窗")
        .font(.system(size: 14))
        .padding(15)
        .frame(width: 300,height: 200 )
        .foregroundColor(.black)
        .background(.yellow)
        .cornerRadius(10)
        .scaleEffect(isShow ? 1 : 0)
        .rotationEffect(.degrees(isShow ? 360 : 0))
        .opacity(isShow ? 1: 0)
    }
    .onAppear {
      withAnimation(.easeIn(duration: 0.2)) {
        isShow = true
      }
    }
  }
}

上面例子履行作用如下

以上就是三种弹窗的完成和作用。

总结

运用ZStack 会有层级关系，当App结构杂乱时掩盖不了NavigationView和TabbarView，适用于toast和一些无布景的弹窗
体系弹窗：alert或许sheet 做一些体系级的弹窗比较适宜，自界说不推荐
自界说模态跳转：适合在各个界面做弹窗处理，需求在各个界面引进环境变量，present和dismiss弹窗，并且present履行有动画，各个弹窗的机遇联接有点长。

以上就是弹窗相关的内容，如有不对之处欢迎指正。如果有其他办法欢迎沟通。

SwiftUI中弹窗实现

自界说弹窗

1.自界说(运用ZStack)

1.统一弹窗布景色彩能够自界说

2.自界说`ObservableObject` 记录当时弹窗的状况

3.设置`ViewModifier`

问题

2.运用体系的模态弹窗跳转完成

3.获取主操控器自界说模态跳转

1.自界说`environmentKey`和`value`

2.设置`UIViewController`拓宽办法

3.在需求弹窗的地方引进环境变量

总结

作者信息

推广

SwiftUI中弹窗实现

自界说弹窗

1.自界说(运用ZStack)

1.统一弹窗布景 色彩能够自界说

2.自界说ObservableObject 记录当时弹窗的状况

3.设置ViewModifier

问题

2.运用体系的模态弹窗跳转完成

3.获取主操控器 自界说模态跳转

1.自界说environmentKey和value

2.设置UIViewController拓宽办法

3.在需求弹窗的地方引进环境变量

总结

相关文章

使用 LangChain 开发 LLM 应用（3）：记忆（Memory）

Nginx 体系化之深入探究负载均衡

SwiftUI基础篇Container

Android自定义View扫码ui控件效果

作者信息

推广

1.统一弹窗布景色彩能够自界说

2.自界说`ObservableObject` 记录当时弹窗的状况

3.设置`ViewModifier`

3.获取主操控器自界说模态跳转

1.自界说`environmentKey`和`value`

2.设置`UIViewController`拓宽办法