在 SwiftUI 的导航栏中设置图像和标题

Posted 2023-04-13

【中文标题】在 SwiftUI 的导航栏中设置图像和标题

【英文标题】：Set Image and Title in Navigation Bar in SwiftUI

【发布时间】：2020-10-26 13:59:53

【问题描述】：

如果有人知道如何实现它或如何实现它的想法，我将不胜感激。

【问题讨论】：

***.com/questions/56505528/… 可能从答案中你可以得到一些想法

@Prashant Tukadiya 我已经调查过了。但那是不同的。感谢分享

到目前为止，SwiftUI 还不够成熟，无法提供此功能。您只能使用 UIKit 或隐藏视图上的导航栏，然后创建一个自定义的相似视图，该视图位于屏幕顶部。之后，这是一个很难玩的手势。

我已经在 UIkit 中创建了它。但无法使用 swiftUI 创建它。

@pushpank 你找到答案了吗？我正在寻找同样的东西。

【参考方案1】：

这主要是您所追求的。在声明 navigationBarTitle 时使用 displayMode: .automatic 意味着它将显示为 largeTitle，直到滚动时导航栏转到 displayMode: .inline。 例如，我只是使用SF Symbols 图像，但您可以以同样的方式交换 Cap 的盾牌。如果需要交互，请将其包裹在按钮中。

struct ContentView: View 
    var body: some View 
        NavigationView 
            List(0...1000, id: \.self)  _ in
                Text("Sample")
            
            .navigationBarTitle("Large Title", displayMode: .automatic)
            .navigationBarItems(trailing: Image(systemName: "shield"))
        
    

【讨论】：

尾随栏项目永远不会像共享动画那样工作。用户界面不同，您可以比较两者。

您对@pushpank 的要求不是默认行为。如果您特别不想使用本机行为，那么您正在注册很多复杂性。我提出的内容让你达到了 90%。但是，如果您想完全匹配行为，您可以使用PreferenceKeys 和GeometryReader 捕获导航栏视图的大小和位置，以手动更新图像的位置和大小。

那么我建议你阅读这两件事，swiftui-lab.com/communicating-with-the-view-tree-part-1 是一个很好的起点。

【参考方案2】：

这是在 UIKIT 中完成的。

这是代码的样子

let viewA = UIView()
let viewB = UIView()

private func setupNavigationBarAppearance() 

        viewA.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(didViewA)))
        viewB.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(didViewB)))
        
        let leftBarButtonItem = UIBarButtonItem(customView: viewA)
        let rightBarButtonItem = UIBarButtonItem(customView: viewB)
        
        navigationItem.leftBarButtonItem = leftBarButtonItem
        navigationItem.rightBarButtonItem = rightBarButtonItem
        navigationItem.title = "Hello World"
        
    

@objc private func didViewA() 
        print("Hello")
    
    
    @objc private func didViewB() 
        print("World")
    

我在这里使用了 UIView，因为 ImageView 是 UIView 的子类，所以你可以将它与你的 ImageView 关联起来。如果不需要，也可以删除左或右 barButtonItem。

【讨论】：

主题是关于 SwiftUI 的……你看到了吗？

哦，我还以为是UIKit呢。

此解决方案也不会调整图像大小。