SwiftUI：如何将 NavigationBarItem 与大标题导航标题对齐？

Question

无论我尝试了什么，我都无法使这个导航栏项目与这个视图上的大标题对齐。我尝试过使用填充或将其放在一个带有Spacer()的VStack中，但是都没有将其向下推。如何正确对齐它？

var body: some View {
            NavigationView {
                  //omitted 
                        .navigationTitle("Exertion")
                    }
                    .navigationBarItems(
            trailing:
                    Button(action: {
                        self.isShowingExertionCalendarSheet.toggle()
                    }) {
                        Image(systemName: "calendar")
                              .font(.system(size: 30, weight: .bold))                          
            }
        )   
    }           
}

- GarySabo

---

这看起来像是Athlytic应用程序。它看起来是的。喜欢使用它。 - thenakulchawla

Answer 1

你做不到。因为导航标题是动态的，当滚动时它可以从小变大，除非你说不是这样，否则UI不允许你将导航项垂直对齐在其他位置而不是预期的位置。就在安全区域下方。就像提供一个前导导航项隐藏了返回按钮一样。这就是Cocoa Touch通过SwiftUI或UIKIt工作的方式。

- Juanjo

---

那么唯一的解决方案就是使用.navigationBarTitleDisplayMode(.inline)而不是使用大标题吗？ - GarySabo

你可以“尝试”一下。解决方案是接受UI的工作方式，并与其合作，而不是反对它。如果你反对它，你可能会被应用商店拒绝。我诚实地认为，你的设计看起来非常棒。 - Juanjo

应该注意的是，苹果的健康应用程序有一个尾随对齐按钮，与导航标题水平对齐，即[ "汇总" <---> [个人资料图标/按钮] ]。苹果在SwiftUI中可能不会这样做，但他们确实这样做了。找到在SwiftUI中复制它的方法是这个问题的重点。 - sobri

Answer 2

我认为你可以这样做：

好的，我认为你可以像这样做：

.navigationBarItems(
            leading: Text("Exertion")
                .fontWeight(.bold)
                .font(.largeTitle),
            trailing: Button(action: {
                ... your code here ...
            }, label: {
                Image(systemName: "calendar")
                    .foregroundColor(Color("Some Blue"))
            })
        )

- Stephane Paquet

---

这个发布的代码不起作用。你可以在尾部区域放置文本项，但不能放置自定义按钮。将标准图像传递到尾部区域也无法工作。此外，如果有影响的话，只有工具栏在MacOS上起作用。 - whitneyland