在 SwiftUI 中设置导航栏项样式

Question

使用 UIKit 添加导航栏项时，您可以使用UIBarButtonItem.style设置其样式。这对于以粗体文本显示的“完成”按钮很重要。

SwitftUI 的navigationBarItems(leading:trailing:)有一个View但没有样式。您可以通过在视图中使用粗体按钮来修改样式外观，但它不会适应未来的操作系统样式更改（例如，字体粗细不是bold）。

如何使用 SwiftUI 设置导航栏项的样式？

Answer 1

iOS 14+

\n

值得注意的是，在修饰符ToolbarItem(placement:)中使用toolbar会自动将粗体文本应用于修饰符中的按钮.confirmationAction放置位置的按钮。

\n

例如：

\n

struct MyView: View {\n  var body: some View {\n    NavigationView {\n      Form {\n        // other elements\n      }\n      .navigationTitle("Edit Publication")\n      .toolbar {\n        ToolbarItem(placement: .cancellationAction) {\n          Button("Cancel") { }\n        }\n        ToolbarItem(placement: .confirmationAction) {\n          Button("Save") { }\n      }\n    }\n  }\n}\n

\n

从下图可以看出，保存按钮以粗体显示。

\n

\n

如果您想要一个按钮与下面的“保存”按钮位于同一位置但不强调，则可以使用修饰符.primaryAction。

\n

使用描述工具栏项上下文 \xe2\x80\x93 的放置类型，而不是使用已弃用的navigationBarItems修饰符，或.navigationBarTrailing放置.navigationBarLeading值 \xe2\x80\x93 是使 SwiftUI 视图适应未来任何更改的最佳方法iOS 版本。

\n

它们还适用于不一定有导航栏的多个平台，并且其他平台可能会选择以不同方式呈现它们。例如，.confirmationAction在 macOS 上使用会创建一个以应用程序accentColor为背景的按钮。

\n

Answer 2

我认为我们必须改变我们对 SwiftUI 的看法，因为“UIBarButtonItem.style”的概念不会直接适用。SwiftUI 试图隐藏实现细节，并希望根据上下文将字体粗细更改为“自动神奇地工作”等概念。

在 Xcode 12.3 和 iOS 14.3 上，按钮样式似乎默认为粗体（在 NavigationView 的上下文中）：

.navigationBarItems(
  leading:
    Button(action: {}) {
      Text("Cancel")
  },
  trailing:
    Button(action: {}) {
      Text("Save")
    }
  )

更改样式的一种方法是添加按钮样式：

.navigationBarItems(
  leading:
    Button(action: {}) {
      Text("Cancel")
    }.buttonStyle(PlainButtonStyle()),
  trailing:
    Button(action: {}) {
      Text("Save")
    }
  )

但这并没有达到预期的效果。我不得不更改字体粗细以使“取消”成为常规样式，“保存”成为粗体......就像标准iOS一样：

.navigationBarItems(
  leading:
    Button(action: {}) {
      Text("Cancel")
        .fontWeight(Font.Weight.regular)
    },
  trailing:
    Button(action: {}) {
      Text("Save")
    }
  )

这样做的好处是您不需要了解“UIBarButtonItem.style:”的概念，您只需要了解 aButton是什么的概念，什么Text是 - 随着时间的推移，应该熟悉哪些 API它们是标准的构建块。