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())

backup

SwiftUI 2.0 ToolbarItem 标签显示在侧面

SwiftUI 2.0 ToolbarItem Labels showing sideways

toolbaritems

swiftui