Question 280905 in IOS Swift Question posted in
The official documentation can be found here.

Ios swift – Can i make scrollview inside TabView ? because its make a white background in my TabItem

I want make a scrollview inside TabView. but its make a white background color:

enter image description here

im already add .background in TabView its not work.

this is my code for TabView.

*im using my own Image not systemImage.

//  DashboardNavigationView.swift
//  DevMuscles
//
//  Created by Putut Yusri Bahtiar on 05/11/23.
//

import SwiftUI

struct DashboardNavigationView: View {
    
    enum Tab: Int {
        case home
        case insight
        case notifications
        case profile
    }
    
    @State private var selectedTab = Tab.home
    
    @State private var showNotificationDot = false
    
    
    var body: some View {
        TabView(selection: $selectedTab) {
            HomeView()
                .tabItem {
                    selectedTab == Tab.home ? Image("home-active") : Image("home-inactive")
                }
                .tag(Tab.home)
            
            HomeView()
                .tabItem {
                    selectedTab == Tab.insight ? Image("insight-active") : Image("insight-inactive")
                }
                .tag(Tab.insight)
            
            HomeView()
                .tabItem {
                    selectedTab == Tab.notifications ? Image("notification-active") : Image("notification-inactive")
                }
                .tag(Tab.notifications)
            
            Text("Profile")
                .tabItem {
                    Image("profile")
                }
                .tag(Tab.profile)
        }
    }
}

#Preview {
    DashboardNavigationView()
}
Tags:

2

Answers


  1. 0

    Try setting
    .accentColor(.desiredColor)

    Login or Signup to reply.
  2. 0

    What you are seeing is the default background for the tab bar when the selected view has a ScrollView that goes behind it.

    You can override the visiblity of the tab bar background by using the modifier .toolbarBackground. This modifier needs to be applied to the individual view with the ScrollView inside it, not to the TabView that contains the view. You can also set a ShapeStyle to be used in place of the default background.

    Here are some examples:

    HomeView()
    .toolbarBackground(.hidden, for: .tabBar)

HomeView()
    .toolbarBackground(.black, for: .tabBar)

HomeView()
    .toolbarBackground(.ultraThinMaterial, for: .tabBar)
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search