在 SwiftUI 中设置导航栏项目样式

Question

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

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

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

Answer 1

我认为我们必须改变对 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:”的概念，您只需要了解 Button 是什么以及 Text 是什么的概念 -随着时间的推移，应该熟悉哪些 API，因为它们是标准构建块。

Answer 2

在 SwiftUI 中，您无需传递样式，而是将其附加到 View 组件。这将适应未来的操作系统风格变化：

import SwiftUI
import PlaygroundSupport

struct ContentView: View {
  var body: some View{
    NavigationView {
      Text("blah")
        .navigationBarItems(leading: Text("done button")
          .fontWeight(.medium)
          .bold()
          .foregroundColor(Color.red))
    }
  }
}

PlaygroundPage.current.setLiveView(ContentView())