Swift UI Tap Bar 边框

Question

我想在 iOS 应用程序的底部点击栏顶部添加灰色边框。我如何使用 TabView 和 SwiftUI 做到这一点？

这就是我的代码到目前为止的样子

struct MainView: View {
    init () {
        UITabBar.appearance().unselectedItemTintColor = UIColor(Color.theme.onSurfaceVariant)
    }
    var body: some View {
        NavigationView()
    }
}


struct NavigationView: View {
    var body: some View {
        ZStack(alignment: .bottom) {
            TabView {
                SearchScreen()
                    .tabItem {
                        Label(
                            NSLocalizedString(
                                "Search Nav",
                                value: "Search",
                                comment: "Label for Search Tab Item"
                            ),
                            systemImage: "magnifyingglass"
                        )
                    }
                TripsScreen()
                    .tabItem {
                        Label(
                            NSLocalizedString(
                                "Trips Nav",
                                value: "Trips",
                                comment: "Label for Trips Tab Item"
                            ),
                            systemImage: "suitcase"
                        )
                    }
                GuideScreen()
                    .tabItem {
                        Text("Guide")
                    }
                MapScreen()
                    .tabItem {
                        Label(
                            NSLocalizedString(
                                "Map Nav",
                                value: "Map",
                                comment: "Label for Map Tab Item"
                            ),
                            systemImage: "map"
                        )
                    }
                ProfileScreen()
                    .tabItem {
                        Label(
                            NSLocalizedString(
                                "Profile",
                                value: "Profile",
                                comment: "Label for Profile Tab Item"
                            ),
                            systemImage: "gear"
                        )
                    }
            }
            .accentColor(Color.theme.onSurface)
            .overlay {
                GuideImageView()
            }
        }
    }
}


struct GuideImageView: View {
    var body: some View {
        VStack {
            Spacer()
            HStack {
                Spacer()
                Button(action: {
                    print("Guide Button Tapped")
                }
                ) {
                    Image("GuideNavIcon") // Replace with your avatar image
                        .resizable()
                        .frame(width: 60, height: 60)
                        .padding(1)
                        .clipShape(Circle())
                        .overlay(Circle().stroke(Color.theme.stroke, lineWidth: 1))
                }
                .offset(y: -50)
                Spacer()
            }
            .frame(height: 0)
        }
    }
}

Answer 1

首先也是最重要的，下次请分享包含 TabView 的自定义颜色主题详细信息的所有代码。

另一方面，如果您在

.accentColor(Color.theme.onSurface)

之后添加下面的代码。它一定可以工作。

// Add the gray border
Rectangle()
    .frame(height: 1)
    .foregroundColor(.black)
    .edgesIgnoringSafeArea(.horizontal)