为什么SwiftUI tabItem systemImage被填充？

Question

我为 tabItem 选择 systemImage“map”和“person”，但图像是填充格式，必须是空心格式。什么原因？

struct TestView: View {
var body: some View {
    TabView {
        Text("Map!")
            .tabItem {
                Label("Map", systemImage: "map")
            }
        
        Text("Profile")
            .tabItem {
                Label("Person", systemImage: "person")
            }
    }
}

}

代码：13.1

SF 符号：3.1

Answer 1

这是 iOS 15 中的标准 SwiftUI 行为，因为它默认实现Apple\xe2\x80\x99s 人机界面指南的建议, which says tab bars should use filled variants of SF Symbols, while sidebars on iPad should use the outline variant.

\n

该效果是通过 iOS 自动应用环境值来实现的，如符号变体文档.symbolVariants中所述:

\n

\n

SwiftUI 在某些环境中为您设置了变体。例如，SwiftUI 自动fill为出现在内容闭包中的项目应用符号变体。swipeActions(edge:allowsFullSwipe:content:) method, or as the tab bar items of a TabView.

\n

\n

如果你绝对想摆脱填充模式，它\xe2\x80\x99s故意变得棘手，但并非不可能。您必须\\.symbolVariants直接在Label元素上覆盖提供的环境变量，在您的tabItem declaration:

\n

Text("Map!")\n  .tabItem {\n    Label("Map", systemImage: "map")\n      .environment(\\.symbolVariants, .none)\n  }\n

\n

使用.symbolVariants(.none) modifier, or trying to set the environment value higher up the view graph, won\xe2\x80\x99t work.

\n

现在您已经了解了如何覆盖效果，我仍然建议使用选项卡栏中填写的表格。鉴于在许多情况下，选项卡栏与页面其余部分不再具有背景颜色差异，通过使用填充变体为选项卡项目赋予额外的视觉权重，可以为这些元素提供适当的视觉权重。

\n