TabView and Full Screen Background Image

Question

craigaps OP

Created Apr ’24

Replies 1

Boosts 1

Participants 2

Hi

I have a TabView and I would like a background image to cover the full screen. Here is the code I'm struggling with:

struct ContentView: View {
var body: some View {
   ZStack {
      Image("background-image")
         .resizable()
         .scaledToFill()
         .edgesIgnoringSafeArea(.all)
                
      TabView {
         AssetsView()
            .tabItem {
               Label("Assets", systemImage: "books.vertical.fill")
            }
                
            FavouriteView()
               .tabItem {
                  Label("Favourite", systemImage: "star.fill")
               }
        }
    }
}

No matter what I try, I can't seem to get my "background-image" to display. I thought I might just have the background image only on AssetsView but that wasn't successful either.

Any ideas would be appreciated.

Boost

Answer 1

cs2th OP

Aug ’24

This exact same issue has been driving me bonkers for some time.

I presume that (like me) you tried using .background(Color.clear) immediately prior to the .tabItem modifiers and on the first child view in the subviews(?).

None. of that worked for me.

It seems like a straightforward concept, but there MUST be something obvious that we're both missing.

0