如何在 SwiftUI 中制作具有透明背景的模态视图？

Posted 2023-02-23

【中文标题】如何在 SwiftUI 中制作具有透明背景的模态视图？

【英文标题】：how to make the modal view with a transparent background in SwiftUI?

【发布时间】：2019-08-23 12:05:44

【问题描述】：

任何人都知道如何使模态视图具有透明背景。

就像下面的 swift 中的链接

Swift Modal View Controller with transparent background

【问题讨论】：

我对我之前的评论进行了更正，所以我删除了它（并且会支持你的问题）。现在看来，您可以通过在ZStack 中使用Rectangle 为模态视图提供背景。但是......模式视图的默认值似乎基于明/暗模式设置。如果你让矩形填充为`Color.clear，你仍然会有一个覆盖底层视图的背景......

希望未来版本的 SwiftUI 将具有您的功能，但我认为您最好的选择是不使用模式，而是创建具有透明背景的全屏视图并将其反显示在屏幕上并提供一种方法来消除它。由于透明模态不会显示其边缘，因此您基本上会伪造模态。

mmh 可能是类似的解决方案（只是出现在 ZStack 中的视图）github.com/peppesapienza/random-code/blob/master/… ?

【参考方案1】：

我正在使用协调器模式，在程序集中创建视图

let view = UIHostingController(rootView: swiftuiview)
view.view.backgroundColor = .clear

在路由器内部只显示这个 UIHostingController

module.modalPresentationStyle = .overCurrentContext
navigationController.present(module, animated: animated, completion: nil)

【讨论】：

不幸的是，UIHostingController 的 backgroundColor 似乎不包含 .clear

找到了一种通过将 view.view.background 设置为 nil 而不是 .clear 来使视图至少清晰的方法，然后您所做的就是在主机控制器级别或在SwftUI 视图本身

【参考方案2】：

如果您想从 UIKit 项目中模糊 SwiftUI 的背景，并且可能将 SwiftUI 视图用于模态视图，那么我最近遇到了同样的问题并创建了一个 UIViewController，它采用 UIHostController（基本上是 UIViewController），然后更改 HostingController View 的 alpha，在后面加上一个模糊，并将其呈现给父视图。

我已经创建了一个包含文件的要点供公众使用 https://gist.github.com/Ash-Bash/93fd55d89c1e36f592d3868f6b29b259

这是工作示例：

// Initialises BlurredHostingController
var blurredHostingController = BlurredHostingController()

// Sets the Hosting View for the SwiftUI View Logic
blurredHostingController.hostingController = UIHostingController(rootView: ContentView())

// Blur Tweaks for blurredHostingController
blurredHostingController.blurEffect = .systemMaterial
blurredHostingController.translucentEffect = .ultrathin

// Presents View Controller as a Modal View Controller
self.present(blurredHostingController animated: true, completion: nil)

这是 macCatalyst 的结果

【参考方案3】：

现在：

let rootView = Text("Hello world")
let controller = UIHostingController(rootView: rootView)
controller.view.backgroundColor = .clear
UIApplication.shared.windows.first?.rootViewController?.present(controller, animated: true)

解雇：

UIApplication.shared.windows.first?.rootViewController?.dismiss(animated: true)

【参考方案4】：

我没有找到理想的方法，但我找到了解决方法。

因此，为了以模态方式呈现视图，您可以使用 ZStack 并将多个视图分组在其中，并使用 @State 变量来处理它。

为了更好的解释，这里我给了视图的背景颜色。

struct ContentView : View 
   @State private var showModally = false
   var body : some View 
    ZStack 
        Color.red
        VStack 
            Button(action: 
                withAnimation
                    self.showModally = true
                
            ) 
                Text("Push Modally")
            
        
        
        ModalView(show: $showModally)
            .offset(y: self.showModally ? 0 : UIScreen.main.bounds.height)
            .animation(.spring())
        
    
  


struct ModalView: View 
  @Binding var show : Bool
  var body: some View 
    VStack 
        Spacer()
        
        VStack 
            Color.white
        
        .frame(height : 400)
        .cornerRadius(10)
        .padding(.horizontal)
    
    .background(Color.clear)
    .onTapGesture 
        self.show = false
    
  

在这种情况下，模态视图将模态显示在内容视图之上，并通过点击关闭。

【讨论】：

如何修改它以覆盖 UITabBar？

将 TabView 包含在 ZStack 中，其余内容保持原样。像这样：- ZStack TabView Content ModalView