如何在SwiftUI中使用透明背景制作模式视图?

时间:2019-08-23 12:05:44

标签: ios swiftui xcode11

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

就像下面的链接很快

Swift Modal View Controller with transparent background

4 个答案:

答案 0 :(得分:2)

我正在使用协调器模式,在装配体中创建视图

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

内部路由器仅显示此UIHostingController

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

答案 1 :(得分:1)

如果您想从UIKit Project中模糊SwiftUI的背景,并且可能将SwiftUI View用于模态视图,那么我最近也遇到了同样的问题,并创建了一个使用UIHostController(基本上是UIViewController)的UIViewController,然后更改了HostingController视图的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的结果 enter image description here

答案 2 :(得分:0)

我没有理想的方法,但是我有一个解决方法。

因此,为了模态显示视图,您可以使用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
    }
  }
}

在这种情况下,“模态视图”将以模态形式显示在内容视图上,并通过轻击将其关闭。

答案 3 :(得分:0)

当前:

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)