SwiftUI 自定义选项卡栏图标不更改选项卡。面积在上面

Question

我的自定义标签栏目前有问题，它上方有一个灰色区域（标签视图）控制每个标签，但我需要将它放在我的自定义标签栏下方，但 TabView 的功能仍然有效并与图标一起使用。您可以使用 UITabBar.apperance() 隐藏选项卡栏，它摆脱了灰色区域但不再具有任何功能..但我需要将灰色区域放在选项卡下方。如果这有意义？

Home.swift

import SwiftUI

struct Home: View {
    
    //Hiding Tab Bar..
    init() {
        UITabBar.appearance().isHidden = false
    }
    
    var body: some View {
        
        VStack(spacing: 0){
            //Tab View...
            TabView{
                
                Color.blue
                    .tag("house.circle")
                
                Color.green
                    .tag("pencil")
                
                Color.pink
                    .tag("magnifyingglass")
                
                Color.red
                    .tag("bell")
                
                Color.yellow
                    .tag("cart")
            }

            //Custom Tab Bar...
            CustomTabBar()
        }
        .ignoresSafeArea()
    }
}

struct Home_Previews: PreviewProvider {
    static var previews: some View {
        Home()
    }
}

//Extending View To Get Screen Frame...

extension View {
    func getRect()->CGRect {
        return UIScreen.main.bounds
    }
}

CustomTabBar.swift

import SwiftUI

struct CustomTabBar: View {
    
    var body: some View {
            HStack(spacing: 0){
                
                // Tab Bar Button...
                TabBarButton(systemName: "house.circle")
                    .background(Color.blue)
                
                TabBarButton(systemName: "pencil")
                    .background(Color.green)
                
                Button(action: {}, label: {
                        
                    Image(systemName: "magnifyingglass")
                            .resizable()
                            .renderingMode(.template)
                            .aspectRatio(contentMode: .fit)
                            .frame(width:24, height:24)
                            .foregroundColor(.white)
                            .padding(20)
                            .background(Color.green)
                            .clipShape(Circle())
                        //Shadows
                            .shadow(color: Color.black.opacity(0.05), radius: 5, x: 5, y: 5)
                            .shadow(color: Color.black.opacity(0.05), radius: 5, x: -5, y: -5)
                })
                .tag("magnifyingglass")
                
                TabBarButton(systemName: "bell")
                    .background(Color.red)
                TabBarButton(systemName: "cart")
                    .background(Color.yellow)
            }
            .padding(.top)
            //Decreasing the extra padding added...
            .padding(.vertical, -0)
            .padding(.bottom,getSafeArea().bottom == 0 ? 15 : getSafeArea().bottom)
            .background(Color.white)
    }
}

struct CustomTabBar_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            ContentView()
        }
    }
}

//extending view to get safe area...
extension View {
    func getSafeArea()-> UIEdgeInsets {
        return UIApplication.shared.windows.first?.safeAreaInsets ?? UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
    }
}

struct TabBarButton: View {
    
    var systemName: String
    
    var body: some View{
        Button(action: {
        }, label: {
            
            VStack(spacing: 8){
                
                Image(systemName)
                    .resizable()
                    //Since its asset image...
                    .renderingMode(.template)
                    .aspectRatio(contentMode: .fit)
                    .frame(width:28, height: 28)
            }
            .frame(maxWidth: .infinity)
        })
    }
}

编辑：第二张图片我隐藏了标签栏，将其设置为 true 而不是 false。

//Hiding Tab Bar..
    init() {
        UITabBar.appearance().isHidden = true
    }

Answer 1

您可以试试这个来“覆盖”原来的 TabView 栏：

在 Home 中将 VStack 替换为 ZStack。

和

struct CustomTabBar: View {
    
    var body: some View {
        VStack (alignment: .leading) {
            Spacer()
            HStack(spacing: 0) {
                TabBarButton(systemName: "house.circle").background(Color.blue)
                TabBarButton(systemName: "pencil").background(Color.green)
                Button(action: {}, label: {
                    Image(systemName: "magnifyingglass")
                            .resizable()
                            .renderingMode(.template)
                            .aspectRatio(contentMode: .fit)
                            .frame(width:24, height:24)
                            .foregroundColor(.white)
                            .padding(20)
                            .background(Color.green)
                            .clipShape(Circle())
                        //Shadows
                            .shadow(color: Color.black.opacity(0.05), radius: 5, x: 5, y: 5)
                            .shadow(color: Color.black.opacity(0.05), radius: 5, x: -5, y: -5)
                })
                .tag("magnifyingglass")
                
                TabBarButton(systemName: "bell").background(Color.red)
                TabBarButton(systemName: "cart").background(Color.yellow)
            }
        }
            .padding(.bottom, getSafeArea().bottom == 0 ? 15 : getSafeArea().bottom)
            .background(Color.white)
    }
}

然后您需要实现每个 CustomTabBar 按钮的操作。

编辑 1：

好的，正如我提到的，您需要为您的按钮实现操作。有很多方法可以做到这一点，这只是一种方法：

struct CustomTabBar: View {
    @Binding var tagSelect: String
    
    var body: some View {
        VStack (alignment: .leading) {
            Spacer()
            HStack(spacing: 0) {
                TabBarButton(tagSelect: $tagSelect, systemName: "house.circle").background(Color.blue)
                TabBarButton(tagSelect: $tagSelect, systemName: "pencil").background(Color.green)
                Button(action: {}, label: {
                    Image(systemName: "magnifyingglass")
                            .resizable()
                            .renderingMode(.template)
                            .aspectRatio(contentMode: .fit)
                            .frame(width:24, height:24)
                            .foregroundColor(.white)
                            .padding(20)
                            .background(Color.green)
                            .clipShape(Circle())
                        //Shadows
                            .shadow(color: Color.black.opacity(0.05), radius: 5, x: 5, y: 5)
                            .shadow(color: Color.black.opacity(0.05), radius: 5, x: -5, y: -5)
                })
                .tag("magnifyingglass")
                
                TabBarButton(tagSelect: $tagSelect, systemName: "bell").background(Color.red)
                TabBarButton(tagSelect: $tagSelect, systemName: "cart").background(Color.yellow)
            }
        }
        .padding(.bottom,getSafeArea().bottom == 0 ? 15 : getSafeArea().bottom)
        // no background or use opacity, like this
        .background(Color.white.opacity(0.01)) // <-- important
    }
}

extension View {
    func getSafeArea()-> UIEdgeInsets {
        return UIApplication.shared.windows.first?.safeAreaInsets ?? UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
    }
}

struct TabBarButton: View {
    @Binding var tagSelect: String
    var systemName: String
    
    var body: some View{
        Button(action: {tagSelect = systemName }, label: {
            VStack(spacing: 8){
                Image(systemName)
                    .resizable()
                    .renderingMode(.template)
                    .aspectRatio(contentMode: .fit)
                    .frame(width:28, height: 28)
            }
            .frame(maxWidth: .infinity)
        })
    }
}
struct Home: View {
    @State var tagSelect = "house.circle"

    init() {
        UITabBar.appearance().isHidden = false
    }
    
    var body: some View {
        ZStack {
            TabView (selection: $tagSelect) {
                Color.blue.tag("house.circle")
                Color.green.tag("pencil")
                Color.pink.tag("magnifyingglass")
                Color.red.tag("bell")
                Color.yellow.tag("cart")
            }
            CustomTabBar(tagSelect: $tagSelect)
        }
        .ignoresSafeArea()
    }
}

extension View {
    func getRect()->CGRect {
        return UIScreen.main.bounds
    }
}

SwiftUI 自定义选项卡栏图标不更改选项卡。面积在上面

SwiftUI Custom Tab Bar icons not changing the tab. Area is above it

uitabbar

swiftui

swiftui-tabview