如何在 SwiftUI 中重新定位导航栏按钮

Posted 2023-02-24

【中文标题】如何在 SwiftUI 中重新定位导航栏按钮

【英文标题】：How to re-position Navigation Bar Buttons in SwiftUI

【发布时间】：2019-11-19 00:01:09

【问题描述】：

我已经实现了navigationBarTitle，我正在尝试实现navigationBarItem，但是默认位置看起来很奇怪。

我希望能够将“下一步”按钮与navigationBarTitle 对齐。我能够用这段代码完成一些事情：

.navigationBarTitle(Text("Names"))
.navigationBarItems(trailing:
            Button(action: 
                print("tapped")
            ) 
                Group 
                    Text("Next")
                .position(x: 0, y: 60).background(Color.purple)

            )

但是问题在于按钮没有移动，因此在显示“下一步”的位置无法点击。 （我突出显示了紫色的位置来演示。）

有没有办法以更清洁的方式完成此任务？或者我可以在 SwiftUI 中保持 navigationBarTitle Large Tile 外观的同时实现的其他方法或堆栈？谢谢！

【参考方案1】：

您可以将按钮包装在ZStack 中，并将Button 放置在ZStack 中，如下所示：

import UIKit
import PlaygroundSupport
import SwiftUI

 struct ContentView: View 
    var body: some View 
        NavigationView 
            Text("Names")
                .navigationBarTitle(Text("Names"))
                .navigationBarItems(trailing:
                    ZStack 
                            Button(action: 
                                print("tapped")
                            ) 
                                Group 
                                    Text("Next")
                                .background(Color.purple)
                            .position(x: 0, y: 60)
                        )
        
    


let viewController = UIHostingController(rootView: ContentView())

PlaygroundPage.current.liveView = viewController

我在上面的操场示例中尝试过，它成功了：

编辑：

这似乎会使按钮无响应，除非您触摸并拖动：

【讨论】：

有趣，我试过这个，当我点击它时它使我的按钮没有响应。我尝试将.position 修饰符移动到组的末尾和按钮的末尾，但没有成功。当(x: 0, y: 0) 时它是响应式的。

嗯，这似乎是 SwiftUI 的一个错误。我能够按下按钮，但前提是我从按钮的右上方单击并向下拖动。我将用这个奇怪行为的剪辑来编辑我的答案。

在您提供可能相关的工作表后，大型导航栏标题中的导航栏按钮无法正常工作：***.com/a/58512956/296708。您可以按下按钮，但只能使用拖动手势。

啊，这很有趣，我在运行它时也看到了相同的行为。感谢您的帮助！