主页 / coding / 问题 / 78499766
Accepted
Johannes Klopp
Asked: 2024-05-18 20:46:28 +0800 CST

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

  • 772

我的视图都有一个背景（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)
    }  
   
}```
swiftui

1 个回答

  1. Best Answer

    您当前有一个VStack包含TabView顶部和CustomTabBar底部的 。因此，子视图的背景不会延伸到选项卡栏后面也就不足为奇了。

    不幸的是，修复不仅仅是将背景移动到 的简单问题VStack，因为 a 内的每个视图TabView都由具有白色背景的“容器视图”托管。如果全屏背景是纯色或图像，那么您可以将其显示在每个子视图后面以及后面VStack，您可能不会注意到连接在哪里，但这不适用于渐变（由于到不同的高度）。

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

    • 不要使用 a ，而是VStack将 the 显示CustomTabBar为覆盖在TabViewwith上alignment: .bottom。
    • 每个子视图都应使用屏幕的整个高度，并在其后面带有渐变。然后使用 padding 为每个子视图下方的选项卡栏预留空间。实现此目的的一个简单方法是使用 aZStack作为每个子视图的容器。
    • 您已将 的高度固定CustomTabBar为 60pt，因此这是每个子项需要的底部填充的大小。
    • 重要的是.ignoresSafeArea()应用于线性渐变或每个子视图的容器，否则在选项卡之间切换时视图可能无法“粘”到屏幕底部。
    • VStack你的有些ContentView是多余的，你可以删除它们。
    • UITabBar.appearance另外，不要在 init 中配置，而是添加.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
                .ignoresSafeArea()
            Text("dashboard_iphone_view")
                .padding(.bottom, 60)
        }
    }

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

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

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

    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)
    }
}

    动画片

    编辑由于您隐藏了默认选项卡栏，因此实际上有一个更简单的解决方案：

    • 只需使用 aZStack代替TabView.
    • 使用 aVStack作为主要内容（上方）和工具栏（下方）的容器，就像您之前所做的那样。
    • 从子视图中删除背景并将其应用到父视图VStack。
    var body: some View {
    VStack{
        if !showSignInView {
            VStack {
                ZStack {
                    if selectedTab == .house {
                        dashboard_iphone_view(profilViewModel: ProfilViewModel(), design_selection: Design_selection())
                    } else if selectedTab == .list {
                        todo_iphone_view(profilViewModel: ProfilViewModel(), design_selection: Design_selection())
                    } else if selectedTab == .clock {
                        pomodoro_timer_iphone(isFullView: $isFullView, profilViewModel: ProfilViewModel(), design_selection: Design_selection())
                    } else if selectedTab == .listen {
                        Listen_View(profilViewModel: ProfilViewModel(), design_selection: Design_selection())
                    }
                }
                .frame(maxWidth: .infinity, maxHeight: .infinity)
                if isFullView == false{
                    CustomTabBar(selectedTab: $selectedTab)
                }
            }
            .background(linearGradient)
        }
    }
    .statusBarHidden(isFullView)
}
    • 0

相关问题