VisionOS 中的自定义选项卡栏

Question

如何在vision OS中实现这样的标签栏？自定义标签栏

我尝试添加额外的按钮作为装饰品，但没有得到想要的结果。

如果添加为选项卡项，则向按钮添加偏移量也不会产生良好的结果。

Answer 1

您可以像这样制作基本的选项卡视图：

TabView {
Text("List")
    .tabItem {
        Label("List", systemImage: "checklist")
            .glassBackgroundEffect(displayMode: .never)
    }

Text("Favorites")
    .tabItem {
        Label("Favorites", systemImage: "star")
        .background(Color.black)
    }
}
.padding()

我不确定“自定义”是什么意思，但如果您指的是 Disney+ 选项卡栏使用自定义图标，则可以使用“图像”而不是“系统图像”。

如果您指的是自定义背景颜色和分段，我建议使用装饰而不是 TabView。这是具有自定义颜色的分段装饰的示例。 （单个按钮也可以有自定义颜色，但我在这里没有使用）

    .ornament(attachmentAnchor: .scene(.leading)) {
    VStack {
        Button {
            
        } label: {
            Image(systemName: "book")
        }
        Spacer()
        Button {
            
        } label: {
            Image(systemName: "gear")
        }
    }
    .padding()
    .background(Color.blue)
    .cornerRadius(30)
    .padding(EdgeInsets(top: 0, leading: 0, bottom: 20, trailing: 150))
    VStack {
        Button {
            
        } label: {
            Image(systemName: "book")
        }
    }
    .padding()
    .background(Color.blue)
    .cornerRadius(30)
    .padding(EdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 150))
}