0

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

浅灰色区域是我在图标下需要的区域。 谢谢。

主页.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
    }

4

1 回答 1

0

你可以试试这个来“覆盖”原来的 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
    }
}
于 2021-09-06T03:55:06.080 回答