如何在选项卡面板顶部显示图标

Question

我的窗口有一个右侧面板。右侧面板内有 4 个选项卡面板。我的选项卡控件的图标（顶部选项卡而不是正文）不显示。

struct RightPanelView: View {
    var body: some View {
        VStack {
            TabView {
            VStack{
                someView1( )
                someView2( )
            }
            .tabItem{ MyImage( "pencil" )}      // TODO These icons do not show up
            .background(Color.purple.opacity(0.2))

            VStack { someView3( dm )}
                .tabItem{ MyImage( "clock" )}
                .padding( 0 )

            VStack { someView4( dm )}
                .tabItem{ MyImage( "circle" )}
                .padding( 0 )
        }
    }
}

我知道系统名称是正确的，因为上面有一排带有相同图标的按钮。我之前使用过 Image() ，它也有同样的问题。

它看起来像这样：

编辑-1

这是 FileMaker 的示例

Answer 1

您可以创建自己的等效系统，而不是使用

TabView

， 如在此示例代码中，根据需要调整外观。

struct ContentView: View {
    var body: some View {
        NavigationSplitView(sidebar: {
            Text("sidebar")
        },
        detail: {
            RightPanelView()
        })
    }
}

enum TabSelection: String {
    case pencil, clock, circle
}

struct RightPanelView: View {
    @State private var selectedTab = TabSelection.pencil
    
    var body: some View {
        VStack {
            HStack {
                Button { selectedTab = .pencil } label: { Image(systemName: "pencil") }
                    .border(selectedTab == .pencil ? .blue : .clear)
                Button { selectedTab = .clock } label: { Image(systemName: "clock") }
                    .border(selectedTab == .clock ? .blue : .clear)
                Button { selectedTab = .circle } label: { Image(systemName: "circle") }
                    .border(selectedTab == .circle ? .blue : .clear)
            }.padding(.top, 10)
            Spacer()
            switch selectedTab {
                case .pencil: Text("someView0")
                case .clock: Text("someView1")
                case .circle: Text("someView2")
            }
            Spacer()
        }
    }
}