如何全屏显示 SwiftUI 子视图？答案

【问题标题】：How do I show a SwiftUI Subview fullscreen?如何全屏显示 SwiftUI 子视图？
【发布时间】：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
    }
}

谁能帮忙？ :))

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

【问题讨论】：

标签： ios swift swiftui uikit

【解决方案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)
    }
}

乐于助人。

谢谢。

【讨论】：