visionOS中TabBar使用square.grid.2x2图标显示为填充版的问题排查

在visionOS上创建TabBar时，使用square.grid.2x2系统图标，预期显示为四个带边框的方块，但实际渲染成了填充版本square.grid.2x2.fill（显示效果为完全填充的2x2网格图标）。

问题原因 #

这是visionOS平台的默认设计规范：TabBar组件会自动对系统图标应用填充样式适配，以贴合visionOS的整体视觉风格，保证TabBar图标视觉统一。

解决方法 #

方法1：使用图标变体强制指定轮廓样式

通过.symbolVariant(.outline)修饰器强制让图标显示轮廓版本：

.tabItem {
    Label("Browse", systemImage: "square.grid.2x2")
        .symbolVariant(.outline)
}

方法2：自定义图标渲染模式

直接使用Image并设置renderingMode(.original)来覆盖默认的填充适配：

.tabItem {
    VStack {
        Image(systemName: "square.grid.2x2")
            .renderingMode(.original)
        Text("Browse")
    }
}

效果验证 #

应用上述任意一种方法后，图标将显示为预期的带边框2x2网格样式，而非填充版本。

内容的提问来源于stack exchange，提问作者ssantos