【发布时间】：2021-11-03 04:07:42
【问题描述】：
我的自定义标签栏目前有问题，它上方有一个灰色区域（标签视图），用于控制每个标签，但我需要将其放在我的自定义标签栏下方，但 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
}
【问题讨论】：
-
您应该创建一个minimal reproducible example，以便我们测试您的代码。不过，我仍然对灰色位的含义感到困惑-标签栏的默认背景？那么你想要它在标签下是什么意思，你的意思是你想要它清晰/透明吗？
-
我的图标有主页、心脏、搜索、铃铛、购物车。然后在图片上方有一个灰色框区域。该框区域实际上对选项卡视图起作用。我需要将其放在图标下方，以便在单击图标时切换选项卡视图。
-
我编辑了我的原始问题并显示了 2 张图片 1 与标签框之间的区别。
-
我真的无法重现这个问题。请制作minimal reproducible example，任何人都可以复制和粘贴。如果您愿意，可以使用 SF 符号，例如
house、heart、bell和cart来创建您的示例。 -
我已将其复制到最低限度。如果单击背景颜色，它不会更改视图颜色。但是如果你点击它上方的灰色区域，你会看到它改变了视图的颜色。
标签： swiftui uitabbar swiftui-tabview