如何全屏显示 SwiftUI 子视图？

Posted 2023-02-24

【中文标题】如何全屏显示 SwiftUI 子视图？

【英文标题】：How do I show a SwiftUI Subview fullscreen?

【发布时间】：2021-05-20 08:18:17

【问题描述】：

看一下截图：

我将要删除的“顶部导航栏”标记为红色，因为有一个未使用的顶部栏...

您必须知道我使用 Storyboards 进行编码，但是这个特定页面包含 SwiftUI 视图的子视图！

这是 SwiftUI 内容视图：

    import SwiftUI
import UIKit

struct ContentView: View 
    var body: some View 
        NavigationView
            MasterView()
        .navigationViewStyle(DoubleColumnNavigationViewStyle())
    


struct MasterView: View 
     var body: some View 
            Form 
                Section(header: Text("Geplant")) 
                    Section 
                        NavigationLink(destination: UIKitView())  Text("Berlin") 

                    
                
                
            
            .navigationBarTitle("Wohin gehts?")
    


struct UIKitView: UIViewControllerRepresentable 
    typealias UIViewControllerType = SwipeViewController

    func makeUIViewController(context: Context) -> SwipeViewController 
        let sb = UIStoryboard(name: "Storyboard", bundle: nil)
        let viewController = sb.instantiateViewController(identifier: "swipe") as! SwipeViewController
        return viewController
    
    
    func updateUIViewController(_ uiViewController: SwipeViewController, context: Context) 
        
    

这是 UIViewController，它持有 SwiftUI 子视图：

import UIKit
import SwiftUI

class StartViewController: UIViewController 

    @IBOutlet weak var btn: UIButton!
    @IBOutlet weak var container: UIView!
    
    let contentView = UIHostingController(rootView: ContentView())
    override func viewDidLoad() 
        super.viewDidLoad()
        configureBackgroundGradient()
        addChild(contentView)
        view.addSubview(contentView.view)
        setupContraints()
    

    fileprivate func setupContraints()
        contentView.view.translatesAutoresizingMaskIntoConstraints = false
        contentView.view.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
        contentView.view.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
        contentView.view.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true
        contentView.view.rightAnchor.constraint(equalTo: view.rightAnchor).isActive = true
    
    private func configureBackgroundGradient() 
      let backgroundGray = UIColor(red: 244 / 255, green: 247 / 255, blue: 250 / 255, alpha: 1)
      let gradientLayer = CAGradientLayer()
      gradientLayer.colors = [UIColor.white.cgColor, backgroundGray.cgColor]
      gradientLayer.frame = view.bounds
      view.layer.insertSublayer(gradientLayer, at: 0) //Background Color
    

谁能帮忙？ :))

谢谢！请随时向我索取更多截图或代码！

【参考方案1】：

您可以使用 SwiftUI 视图修饰符 fullScreenCover 全屏显示视图。 https://www.hackingwithswift.com/quick-start/swiftui/how-to-present-a-full-screen-modal-view-using-fullscreencover

【讨论】：

不允许仅链接答案。如果链接中有相关代码，请在答案中发布。随着时间的推移，链接变得不活跃，导致答案过时。

【参考方案2】：

让我们采用简单的 FullScreenModalView 结构，它可以自行关闭，然后在按下另一个按钮时从 ContentView 呈现它：

struct FullScreenModalView: View 

    @Environment(\.presentationMode) var presentationMode

    var body: some View 
        Button("Dismiss Modal") 
            presentationMode.wrappedValue.dismiss()
        
    

这是 ContentView 的代码 -

struct ContentView: View 
    @State private var isPresented = false

    var body: some View 
        Button("Present!") 
            isPresented.toggle()
        
        .fullScreenCover(isPresented: $isPresented, content: FullScreenModalView.init)
    

乐于助人。

谢谢。