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

Posted 2023-02-24

【中文标题】在 SwiftUI 中设置导航栏项目样式

【英文标题】：Set navigation bar item style in SwiftUI

【发布时间】：2020-05-30 14:07:37

【问题描述】：

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

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

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

【问题讨论】：

我假设所有 SwiftUI 导航栏项目都作为 customView 项目处理（可能是标准的后退按钮除外），所以如果你指定一些样式为粗体，它将始终为粗体。

【参考方案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，因为它们是标准构建块。

【讨论】：

对操作系统版本差异的良好观察。要在所有操作系统版本中获得类似于 Apple 应用程序的体验，您必须同时设置常规和粗体字体粗细。真是一团糟！您不仅必须在抽象的字体粗细级别上工作，甚至没有稳定的默认值。 UIKit 让您指示按钮是否为“完成”按钮的方法要好得多。

【参考方案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())

【讨论】：

您的代码示例将fontWeight、bold 和foregroundColor 应用到Text，而不是导航栏项目。 iOS 似乎不太可能自动调整这些特别应用的属性。我认为当您切换到深色模式时，iOS 甚至不会改变红色的阴影。你能指出你期望的行为记录在哪里吗？