在 SwiftUI 的 TabView 中显示选定的选项卡答案

【问题标题】：Show selected tab in TabView in SwiftUI在 SwiftUI 的 TabView 中显示选定的选项卡
【发布时间】：2021-05-18 09:02:44
【问题描述】：

在 SwiftUI 中使用 TabView 时，如何才能将选中的 Tab 显示为如下图所示？

我尝试在每个选项卡中创建一个 VStack，如下所示：

struct ContentView: View {
@State public var tabViewSelection = 0
var body: some View {
    TabView(selection: $tabViewSelection) {
        HomeFirstLevel()
            .tabItem {
                VStack {
                    Image("HomeIcon")
                    Rectangle()
                        .frame(height: 7)
                        .foregroundColor((tabViewSelection == 0) ? .black : .clear)
                }
            }.tag(0)
        }
    }
}

但它不起作用。我什至无法添加矩形而不是图像：

HomeFirstLevel()
   .tabItem {
       Rectangle()
   }.tag(0)

TabView 不接受形状吗？提前感谢您的帮助！

【问题讨论】：

标签： swiftui tabview

【解决方案1】：

您不能在 tabItem 中设置形状。但是您可以使用ZStack 在标签栏上添加形状并设置 x 位置。

这里是演示。

struct ContentViewTabDemo: View {
    @State public var tabViewSelection = 0
    
    private var singleTabWidth = UIScreen.main.bounds.width / 5
    
    var body: some View {
        ZStack(alignment: .bottomLeading) {
            TabView(selection: $tabViewSelection) {
                Color.red
                    .tabItem {
                        VStack {
                            Image(systemName: "circle.fill")
                        }
                    }.tag(0)
                
                Color.blue
                    .tabItem {
                        VStack {
                            Image(systemName: "heart.fill")
                        }
                    }.tag(1)
                
                Color.red
                    .tabItem {
                        VStack {
                            Image(systemName: "circle.fill")
                        }
                    }.tag(2)
                
                Color.blue
                    .tabItem {
                        VStack {
                            Image(systemName: "heart.fill")
                        }
                    }.tag(3)
                
                Color.red
                    .tabItem {
                        VStack {
                            Image(systemName: "circle.fill")
                        }
                    }.tag(4)
            }
            
            Rectangle()
                .offset(x: singleTabWidth * CGFloat(tabViewSelection))
                .frame(width: singleTabWidth, height: 7)
                .padding(.bottom, 2)
                .animation(.default)
        }
    }
}

【讨论】：