CODEWITHSUNDEEP
iosswiftswiftui
Soulfire J. Backblaze
Soulfire J. Backblaze

Reputation: 85

SwiftUI keeps adding extra button despite not calling .tabitem to the tab bar when inserting a button in another view

I'm trying to make a simple, 5 tab interface for an iPhone interface in SwiftUI and for some reason, it keeps inserting the view I intended for my tab into the tab bar. So far I have tried embedding the button in a Horizontal stack and a navigation view but neither of these have worked:

This is how it's supposed to appear

But this is how it appears when I try to add the button to the view

Here is the extra tab item

This is my ContentView:

import SwiftUI

struct ContentView: View {
    var body: some View {
        TabView {
            Browse()
                .tabItem {
                    Image(systemName: "photo")
                    Text("Browse")
                }
            Text("Another Tab")
                .tabItem {
                    Image(systemName: "bell")
                    Text("Notifications")
                }
            Text("The Last Tab")
                .tabItem {
                    Image(systemName: "person")
                    Text(Username)
                }
            Text("Another Tab")
                .tabItem {
                    Image(systemName: "magnifyingglass")
                    Text("Search")
                }
            Text("Another Tab")
                .tabItem {
                    Image(systemName: "gearshape")
                    Text("Settings")
                }
        }
        .font(.headline)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

And here is Browse():

import SwiftUI


struct Browse: View {
    var body: some View {
        Button(action: /*@START_MENU_TOKEN@*//*@PLACEHOLDER=Action@*/{}/*@END_MENU_TOKEN@*/) {
            Label("Lightning", systemImage: "plus.circle.fill")
                .labelStyle(IconOnlyLabelStyle())
        }
        .navigationTitle(/*@START_MENU_TOKEN@*/"Title"/*@END_MENU_TOKEN@*/)

        
        
        
        
        VStack {
            ScrollView {
                /*@START_MENU_TOKEN@*//*@PLACEHOLDER=Content@*/Text("Placeholder")/*@END_MENU_TOKEN@*/
            }
            
        }
        
        }
    }


struct Browse_Previews: PreviewProvider {
    static var previews: some View {
        Browse()
    }
}

Upvotes: 1

Views: 839

Answers (1)

cedricbahirwe
cedricbahirwe

Reputation: 1396

The problem is happening due to the layout of your Browse View, It looks like SwiftUI Engine is synthesising/inferring two views instead of one. To solve this, give your Browse view a Parent Container View such as a VStack and it will be fixed.

struct Browse: View {
    var body: some View {
        
        VStack {
            Button(action: /*@START_MENU_TOKEN@*//*@PLACEHOLDER=Action@*/{}/*@END_MENU_TOKEN@*/) {
                Label("Lightning", systemImage: "plus.circle.fill")
                    .labelStyle(IconOnlyLabelStyle())
            }
            .navigationTitle(/*@START_MENU_TOKEN@*/"Title"/*@END_MENU_TOKEN@*/)
            VStack {
                ScrollView {
                    /*@START_MENU_TOKEN@*//*@PLACEHOLDER=Content@*/Text("Placeholder")/*@END_MENU_TOKEN@*/
                }
                
            }
        }
        
    }
}

Upvotes: 2

Related Questions