如何在 Swiftui 中为我的 TabBar 提供相同的背景？

Question

我的视图都有一个背景（LinearGradien），但我的 CustomTabBar 是白色的，然后它看起来都被切断了，为了解决这个问题，我想将背景设置为 .clear 但它保持白色。所以我的问题是如何使我的 tabBar 仍然存在但呈现视图的背景。

提前非常感谢

内容视图

struct ContentView: View {
    @State private var selectedTab: Tab = .house
    @State private var isProjectScreen: Bool = SharedDataIsProjectScreen.sharedVariable
    
    init() {
        UITabBar.appearance().isHidden = true
    }
    
    @State var isFullView:Bool = false
    @State private var showSignInView: Bool = false
    
    var body: some View {
        VStack{
            if !showSignInView {
                
                    VStack {
                        VStack {
                            TabView(selection: $selectedTab) {
                                dashboard_iphone_view(profilViewModel: ProfilViewModel(), design_selection: Design_selection())
                                    .tag(Tab.house)
                                
                                todo_iphone_view(profilViewModel: ProfilViewModel(), design_selection: Design_selection())
                                    .tag(Tab.list)
                                
                                pomodoro_timer_iphone(isFullView: $isFullView, profilViewModel: ProfilViewModel(), design_selection: Design_selection())
                                    .tag(Tab.clock)
                                
                                Listen_View(profilViewModel: ProfilViewModel(), design_selection: Design_selection())
                                    .tag(Tab.listen)
                            }
                        }
                        
                        if isFullView == false{
                            CustomTabBar(selectedTab: $selectedTab)
                        }
                    }
            }
        }
        .statusBarHidden(isFullView)
    }
}

自定义标签栏

import SwiftUI

enum Tab: String, CaseIterable {
    case house = "house"
    case list = "list.bullet.clipboard"
    case clock = "clock"
    //case folder = "folder"
    case listen = "list.clipboard"
}


struct CustomTabBar: View {
    @State var progress: Double = 0.50
    @Binding var selectedTab: Tab
    private var fillImage: String {
        selectedTab.rawValue + ".fill"
    }
    
    private var tabColor: Color{
        switch selectedTab {
        case .house:
            return .white
        case .list:
            return .white
        case .clock:
            return .white
        //case .folder:
          //  return .marineblau
        case .listen:
            return .white
        }
    }
    var body: some View {
        VStack{
            HStack{
                ForEach(Tab.allCases, id: \.rawValue){ tab in
                    Spacer()
                    Image(systemName: selectedTab == tab ? fillImage : tab.rawValue)
                        .scaleEffect(selectedTab == tab ? 1.25 : 1.0)
                        .foregroundStyle(selectedTab == tab ? tabColor : Color(hex: "E8E8E8"))
                        .font(.system(size: 22))
                        .onTapGesture{
                            withAnimation(.easeIn(duration: 0.1)){
                                selectedTab = tab
                            }
                        }
                    Spacer()
                    
                }
            }
            
            
        }
        .frame(width: nil, height: 60)
        .background(.clear)
    }  
   
}```

Answer 1

您当前有一个

VStack

，其中包含顶部的

TabView

和底部的

CustomTabBar

。因此，子视图的背景不会延伸到选项卡栏后面也就不足为奇了。

不幸的是，修复不仅仅是将背景移动到

VStack

的简单问题，因为

TabView

内的每个视图都由具有白色背景的“容器视图”托管。如果全屏背景是纯色或图像，那么您可以将其显示在每个子视图后面以及

VStack

后面，您可能不会注意到连接在哪里，但这不适用于渐变。

因此要解决此问题，请尝试以下更改：

• 不要使用

  VStack

  ，而是使用

  CustomTabBar

  将

  TabView

  显示为覆盖在

  alignment: .bottom

  上。
• 每个子视图应使用屏幕的整个高度，并在其后面带有渐变。然后使用 padding 为每个子视图下方的选项卡栏预留空间。实现此目的的一个简单方法是使用

  ZStack

  作为每个子视图的容器。
• 您已将

  CustomTabBar

  的高度固定为 60pt，因此这是每个孩子需要的底部填充的大小。
• 重要的是，

  .ignoresSafeArea()

  应用于每个子视图，否则在选项卡之间切换时，视图可能无法“粘”到屏幕底部。
• 你的

  VStack

  中有些

  ContentView

  是多余的，你可以删除它们。
• 此外，不要在 init 中配置

  UITabBar.appearance

  ，而是向每个子视图添加

  .toolbar(.hidden, for: .tabBar)

  。为了更好地衡量，添加

  .toolbarBackground(.hidden, for: .tabBar)

  可能是个好主意。

这是示例的改编版本，以显示其工作原理：

struct ContentView: View {
    @State private var selectedTab: Tab = .house
    @State private var isProjectScreen: Bool = false //SharedDataIsProjectScreen.sharedVariable

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

    @State var isFullView:Bool = false
    @State private var showSignInView: Bool = false

    private var linearGradient: LinearGradient {
        LinearGradient(
            colors: [.yellow, .red],
            startPoint: .top,
            endPoint: .bottom
        )
    }

    private var dashboard_iphone_view: some View {
        ZStack {
            linearGradient
            Text("dashboard_iphone_view")
                .padding(.bottom, 60)
        }
        .ignoresSafeArea()
    }

    private var todo_iphone_view: some View {
        ZStack {
            linearGradient
            Text("todo_iphone_view")
                .padding(.bottom, 60)
        }
        .ignoresSafeArea()
    }

    private var pomodoro_timer_iphone: some View {
        ZStack {
            linearGradient
            Text("pomodoro_timer_iphone")
                .padding(.bottom, 60)
        }
        .ignoresSafeArea()
    }

    private var Listen_View: some View {
        ZStack {
            linearGradient
            Text("Listen_View")
                .padding(.bottom, 60)
        }
        .ignoresSafeArea()
    }

    var body: some View {
        VStack{
            if !showSignInView {
                TabView(selection: $selectedTab) {
                    dashboard_iphone_view
//                    dashboard_iphone_view(profilViewModel: ProfilViewModel(), design_selection: Design_selection())
                        .toolbar(.hidden, for: .tabBar)
                        .toolbarBackground(.hidden, for: .tabBar)
                        .tag(Tab.house)

                    todo_iphone_view
//                    todo_iphone_view(profilViewModel: ProfilViewModel(), design_selection: Design_selection())
                        .toolbar(.hidden, for: .tabBar)
                        .toolbarBackground(.hidden, for: .tabBar)
                        .tag(Tab.list)

                    pomodoro_timer_iphone
//                    pomodoro_timer_iphone(isFullView: $isFullView, profilViewModel: ProfilViewModel(), design_selection: Design_selection())
                        .toolbar(.hidden, for: .tabBar)
                        .toolbarBackground(.hidden, for: .tabBar)
                        .tag(Tab.clock)

                    Listen_View
//                    Listen_View(profilViewModel: ProfilViewModel(), design_selection: Design_selection())
                        .toolbar(.hidden, for: .tabBar)
                        .toolbarBackground(.hidden, for: .tabBar)
                        .tag(Tab.listen)
                }
                .overlay(alignment: .bottom) {
                    if isFullView == false{
                        CustomTabBar(selectedTab: $selectedTab)
                    }
                }
            }
        }
        .statusBarHidden(isFullView)
    }
}