BLACK FRIDAY SALE: Save big on all my Swift books and bundles! >>

[Solved] Can I use ZStack here in my UI, kindly guide

Forums > SwiftUI

I have a structure in my View like this


   NavigationView {

              VStack {

                  HStack {
                        NavigationLinks
                  }

                   List {                           
                              NavigationLink {

Now my issue is how i can give a background image that shows uniformly over all these overlapping views, is there any way its possible, i have been trying ZSatck and .overlay with no success, any suggestion will be very helpful , thanks...

   

ZStack {
  Image(...)
  HStack {
    NavigationLinks
  }
  List {                           
    NavigationLink {

does not work?

   

@Hatsushira - i tried , but it does not work, may be some thing wrong on my end , here is the code snippet of what i am dealing with, thanks

 NavigationView {

            VStack {

                    HStack {

                        NavigationLink {
                            Text("Demo")
                        } label: {
                            Image("Demo")
                                .resizable()
                                .frame(width: 150)
                        }

                        Spacer()
                        NavigationLink {
                            Text("Demo")
                        } label: {
                            Image("Demo")
                                .resizable()
                                .frame(width: 150)
                        }
                    }
                    .padding()
                    .frame(height: 150)

                    List {
                        NavigationLink {
                            Text("Demo")
                        } label: {

                            customText(image: "Demo", str: "Demo")
                                .frame(maxWidth: .infinity)

                        }

                        NavigationLink {
                            Text("Demo")
                        } label: {
                            customText(image: "Demo", str: "Demo")
                                .frame(maxWidth: .infinity)
                        }

   

Hacking with Swift is sponsored by RevenueCat

SPONSORED In-app subscriptions are a pain to implement, hard to test, and full of edge cases. RevenueCat makes it straightforward and reliable so you can get back to building your app. Oh, and it's free if your app makes less than $10k/mo.

Learn more

Sponsor Hacking with Swift and reach the world's largest Swift community!

Try this: The code in the init makes the background of TableView transparent. Test the effect of ignoresSafeAre() leave it and put it there.

init() {
      UITableView.appearance().backgroundColor = .clear
      UITableViewCell.appearance().backgroundColor = .clear
  }
  var body: some View {
      NavigationView {
          ZStack {
              Color.red // use Image here

              //Your Code here
          }.ignoresSafeArea()
      }
  }

   

@Hatsushira - using your above code makes the image appear in the HStack area at the top, but not in any other area of either the VStack or the List , thanks, below is full code with changes you suggested, the init is there ....

 struct HomeView: View {
    init() {
          UITableView.appearance().backgroundColor = .clear
          UITableViewCell.appearance().backgroundColor = .clear
      }
    var body: some View {

        NavigationView {
            ZStack {
                Image("cover")
                    .resizable()
                VStack {

                        HStack {

                            NavigationLink {
                                Text("Demo")
                            } label: {
                                Image("Demo")
                                    .resizable()
                                    .frame(width: 150)
                            }

                            Spacer()
                            NavigationLink {
                                Text("Demo")
                            } label: {
                                Image("Demo")
                                    .resizable()
                                    .frame(width: 150)
                            }
                        }
                        .padding()
                        .frame(height: 150)

                        List {
                            NavigationLink {
                                Text("Demo")
                            } label: {

                                customText(image: "Demo", str: "Demo")
                                    .frame(maxWidth: .infinity)

                            }

                            NavigationLink {
                                Text("Demo")
                            } label: {
                                customText(image: "Demo", str: "Educational Series")
                                    .frame(maxWidth: .infinity)
                            }

                            NavigationLink {
                                Text("Demo")
                            } label: {
                                customText(image: "Demo", str: "Demo")
                                    .frame(maxWidth: .infinity)

                            }

                            NavigationLink {
                                Text("Collection")
                            } label: {
                                customText(image: "collection", str: "Collection")
                                    .frame(maxWidth: .infinity)

                            }

                            NavigationLink {
                                Text("Artist")
                            } label: {
                                customText(image: "artists", str: "Artists")
                                    .frame(maxWidth: .infinity)

                            }

                            NavigationLink {
                                Text("Demo")
                            } label: {
                                customText(image: "joinus", str: "Join Us")
                                    .frame(maxWidth: .infinity)

                            }

                            NavigationLink {
                                Text("About Us")
                            } label: {
                                customText(image: "aboutus", str: "About Us")
                                    .frame(maxWidth: .infinity)

                            }
                        }

                    }

            }.ignoresSafeArea()

        }

    }

    func customText(image: String, str: String) ->  some View {
        Group {
            VStack {
                RoundedRectangle(cornerRadius: 20)
                    .fill(.blue)
                    .padding()
                    .frame(width: 300, height: 150)
                    .overlay(Image(image)
                        .resizable()
                        .frame(width: 300, height: 150))
                Text(str)
                    .scaledFont(name: "Gothic", size: 20)

                    .padding()
                    .background(RoundedRectangle(cornerRadius: 20, style: .continuous).fill(Color.gray))
            }

        }

    }

}

   

@Hatsushira - thanks, i will try those options out(though i did try the background one), i think i am having quiet a few layers of Views , which are preventing this ... thanks again

   

No sure exactly what you are after from your description, however for something to appear on top of another view (as suggested by your use of the phrase overlay) it needs to be after the view elements that it overlays. The order in the ZStack matters, earlier elements are overlaid by later ones.


NavigationView {
    ZStack {
        VStack {
            HStack {

                NavigationLink {
                    Text("Gandharva Institute for social cause")
                } label: {
                    Image("gandharvaicon")
                        .resizable()
                        .frame(width: 150)
                }

 // more code here …

                NavigationLink {
                    Text("About Us")
                } label: {
                    customText(image: "aboutus", str: "About Us")
                        .frame(maxWidth: .infinity)
                }
            }
        }

        Image("cover")
            .resizable()
            .opacity(0.5)

        // added the code below for an example 
        Image(systemName: "face.smiling")
            .resizable()
            .frame(width: 250, height: 250)
            .foregroundColor(.orange)
            .opacity(0.3)
    }
    .ignoresSafeArea()
}

   

@Greenamberred @Hatsushira - I have been able to pin point the source of problem, its the List, in the below code, as long as i do not add any navigationlink or button in the List View , i can see the background and Hstack Images, all works well, the moment i add items to list view, background below the HStack turns white and no matter what modifier or Stacking i try it just does not show up, what can i do to over come this ... thanks

struct HomeView: View {

    var body: some View {
        NavigationView {
            ZStack {
                Image("cover")
                    .resizable()
                VStack {
                    HStack {

                        NavigationLink {
                            Text("Demo")
                        } label: {
                            Image("demo")
                                .resizable()
                                .frame(width: 150)
                        }

                        Spacer()
                        NavigationLink {
                            Text("demo")
                        } label: {
                            Image("demo")
                                .resizable()
                                .frame(width: 150)
                        }

                    }
                    .padding()
                    .frame(height: 150)

                    List {
                       // Any items added and the background disappears
                    }

                }

            }
        }

    }
    func customText(image: String, str: String) ->  some View {
        Group {
            VStack {
                RoundedRectangle(cornerRadius: 20)
                    .fill(.blue)
                    .padding()
                    .frame(width: 300, height: 150)
                    .overlay(Image(image)
                        .resizable()
                        .frame(width: 300, height: 150))
                Text(str)
                    .scaledFont(name: "Gothic", size: 20)

                    .padding()
                    .background(RoundedRectangle(cornerRadius: 20, style: .continuous).fill(Color.gray))
            }
        }
    }

}

   

Solved - i replaced the List with this code structure -

 ScrollView {
                    VStack {
                        NavigationLink {

   

Hacking with Swift is sponsored by RevenueCat

SPONSORED In-app subscriptions are a pain to implement, hard to test, and full of edge cases. RevenueCat makes it straightforward and reliable so you can get back to building your app. Oh, and it's free if your app makes less than $10k/mo.

Learn more

Sponsor Hacking with Swift and reach the world's largest Swift community!

Reply to this topic…

You need to create an account or log in to reply.

All interactions here are governed by our code of conduct.

 
Unknown user

You are not logged in

Log in or create account
 

Link copied to your pasteboard.