swiftui - SwiftUI 2.0 ToolbarItem 标签横向显示

Question

试图弄清楚如何将新 SwiftUI 工具栏的图标放在文本顶部，就像它们应该在底部工具栏上一样。目前，它们横着出现，这很奇怪。

这是我展示它们的一段代码

content.toolbar {
    ToolbarItem(placement: .bottomBar) {
        Button {
            menu.value = .file
        } label: {
            Label(LocalizedStringKey("menu.file"),
                  systemImage: Symbol.SymbolEnum.sf_folder.systemName! )
        }
    }
    ToolbarItem(placement: .bottomBar) {
        Button {
            menu.value = .export
        } label: {
            Label(LocalizedStringKey("menu.export"),
                  systemImage: Symbol.SymbolEnum.sf_square_and_arrow_up.systemName! )
        }
    }
}

我知道做 VStack 很简单，但我认真地认为这是 Label 的全部目标，能够提供足够的上下文内容，在这种情况下，它将是图标和文本的垂直方向。

Answer 1

有LabelStyle这个目的，所以我们可以根据需要配置标签。

所以这是可能的方法

struct VerticalLabelStyle: LabelStyle {
    func makeBody(configuration: Configuration) -> some View {
        VStack(spacing: 0) {
            configuration.title
            configuration.icon
        }
    }
}

现在将其应用于整个工具栏或仅应用于所需的标签

Label(LocalizedStringKey("menu.file"),
      systemImage: Symbol.SymbolEnum.sf_folder.systemName! )
  .labelStyle(VerticalLabelStyle())