SwiftUI ZStack first element is not displayed

Question

I'm new to SwiftUI, and I have a simple app with a ZStack:

struct ContentView: View {
    @State var num : Int = 1
    
    var body: some View {
        NavigationView{
            ZStack{
                Text("asd")
                    .foregroundColor(.blue)
                    .frame(width: 400, height: 400, alignment: .center)
                    .background(.blue)
                VStack{
                    List{
                        ListItem()
                        ListItem()
                    }
                }
                .toolbar{
                    Button{
                        num+=1
                    } label: {
                        Label("Add", systemImage: "plus")
                    }
                }
            }
        }
    }
}

The problem is that the blue frame with the text is not displayed:

Why is this happening?

It is in ZStack, so under List, where did you expect to see it? — Asperi, Jul 16 '22 at 12:52
Not really sure what do you mean... why do you need List then? List consumes all screen until you give it explicit frame. And List is not transparent, so what's the sense to have text under opaque List in full screen? — Asperi, Jul 16 '22 at 12:58
So how can I give the list the height to wrap it's items only instead of the whole screen? — Nadav Holtzman, Jul 16 '22 at 13:00
Probably you need something like this https://stackoverflow.com/a/61438156/12299030. Your explanation and goal are not clear. — Asperi, Jul 16 '22 at 13:02
agreed with Asperi. please provide us a sample picture of what you want to achieve. I did not understand what you meant by "text and the frame to be behind the list". If it is behind the list, how do you expect to see it? Because List will overlay on it. — Steven-Carrot, Jul 16 '22 at 13:17

score 0 · Answer 1 · answered Jul 16 '22 at 12:52

0

You are using ZStack to wrap up everything.

Solution: Change from ZStack to VStack.

NavigationView{
        VStack{ //this part

answered Jul 16 '22 at 12:52

Steven-Carrot

2,368
2
12
37

But I don't want a VStack, I want the text and the frame to be behind the list. – Nadav Holtzman Jul 16 '22 at 12:58

score 0 · Answer 2 · edited Jul 17 '22 at 02:39

0

It is because the Text View is underneath the List in the ZStack.

If you move the Text to after the list, it will be shown on top.

ZStack {
    VStack{
        List {
            ListItem()
            ListItem()
        }
        .listStyle(.insetGrouped)
    }
    .toolbar{
        Button{
            num+=1
        } label: {
            Label("Add", systemImage: "plus")
        }
    }
    
    Text("asd")
        .foregroundColor(.blue)
        .frame(width: 400, height: 400, alignment: .center)
        .background(.blue)
}

edited Jul 17 '22 at 02:39

Hamed

5,867
4
32
56

answered Jul 16 '22 at 12:55

Gavin Morrow

711
1
6
19

But I want the text and the frame to be under the list – Nadav Holtzman Jul 16 '22 at 12:57
You would have to make the background of the list transparent. I'm not sure how to do that. – Gavin Morrow Jul 16 '22 at 17:02
You can use [SwiftUI-Introspect](https://github.com/siteline/SwiftUI-Introspect) to make the background of the list transparent: `.introspectTableView { tableView in tableView.backgroundColor = .clear }`. – AgentBilly Jul 17 '22 at 20:56

SwiftUI ZStack first element is not displayed

2 Answers2