在 SwiftUI 中将 UIViewRepresentable 显示为 navigationBarItem答案

【问题标题】：Display UIViewRepresentable as a navigationBarItem in SwiftUI在 SwiftUI 中将 UIViewRepresentable 显示为 navigationBarItem
【发布时间】：2021-05-27 19:25:25
【问题描述】：

我可以在 SwiftUI 的导航栏项中显示一个按钮。

我想同时显示一个包装好的UIKit 视图。

这是一个实际问题的最小示例。我想要一个 100 * 4 UIView 显示为尾随导航条。

这是我的代码：

struct ContentView: View {
    var body: some View {
        NavigationView {
            VStack {
                Text("stack overflow test")
            }
            .navigationBarItems(trailing: TestView())
            .navigationTitle("Navigation")
        }

    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}


struct TestView: UIViewRepresentable {
    func makeUIView(context: Context) -> UIView {
        let view = UIView(frame: CGRect(x: 0, y: 0, width: 100, height: 4))
        view.backgroundColor = .red
        return view
    }

    func updateUIView(_ uiView: UIView, context: Context) {

    }
}

现在导航栏的右上角没有显示任何内容。为什么会这样？

【问题讨论】：

标签： swift swiftui

【解决方案1】：

不要在UIViewRepresentable中设置框架，而是在navigationBarItems中设置框架ContentView

在 Xcode 12.3 和 iOS 14.3 中测试

struct ContentView: View {
    var body: some View {
        NavigationView {
            VStack {
                Text("stack overflow test")
            }
            .navigationBarItems(trailing: TestView().frame(width: 100, height: 4)) //< === Here
            .navigationTitle("Navigation")
        }

    }
}


struct TestView: UIViewRepresentable {
    func makeUIView(context: Context) -> UIView {
        let view = UIView() //< === Remove From Here
        view.backgroundColor = .red
        return view
    }

    func updateUIView(_ uiView: UIView, context: Context) {

    }
}

注意：

从 iOS 14.5 开始，navigationBarItems 已弃用。使用ToolbarItem

struct ContentView: View {
    var body: some View {
        NavigationView {
            VStack {
                Text("stack overflow test")
            }
            .toolbar { //< === Here
                ToolbarItem(placement: .navigationBarTrailing) {
                    TestView().frame(width: 100, height: 4)
                }
            }
            .navigationTitle("Navigation")
        }
        
    }
}

【讨论】：