ios 如何在SwiftUI中制作带有透明背景的模态视图?

kse8i1jr  于 2023-05-19  发布在  iOS
关注(0)|答案(5)|浏览(146)

任何人都知道如何使用透明背景制作模态视图。
就像下面的swift链接一样
Swift Modal View Controller with transparent background

iklwldmw

iklwldmw1#

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

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

内部路由器仅呈现此UIHostingController

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

wztqucjr2#

如果你想模糊UIKit项目中SwiftUI的背景,并且可能使用SwiftUI View作为Modal View,那么我最近遇到了同样的问题,并创建了一个UIViewController,它接受UIHostController(基本上是UIViewController),然后更改HostingController View的alpha,在后面放置一个模糊,并将其呈现给父视图。
我已经创建了一个gist与它的文件供公众使用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

的结果

iyfjxgzm

iyfjxgzm3#

出席:

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)
8xiog9wr

8xiog9wr4#

我没有得到理想的方法来做到这一点,但我得到了一个变通办法。
所以,为了以模态方式呈现视图,您可以使用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
    }
  }
}

在这种情况下,模态视图将以模态方式呈现在内容视图上,并且将通过轻敲来解除。

j0pj023g

j0pj023g5#

iOS 16.4+

您可以使用new修饰符来显示具有透明背景的全屏模式:
presentationBackground(_:)

  • 使用形状样式设置封闭工作表的演示文稿背景。*

下面是一个例子:

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

    var body: some View {
        Button("View Settings") {
            showSettings = true
        }
        .fullScreenCover(isPresented: $showSettings) {
            SettingsView()
                .presentationBackground(.thickMaterial) // <-- this 
        }
    }
}

相关问题