Menu

ZIndex

Skip support for SwiftUI.View.zindex.

The following example screens and source code is from SkipUI’s Showcase sample app ZIndexPlayground.swift

Android screenshot for ZIndex component (light mode) iPhone screenshot for ZIndex component (light mode) iPhone screenshot for ZIndex component (dark mode) Android screenshot for ZIndex component (dark mode)
import SwiftUI

struct ZIndexPlayground: View {
    var body: some View {
        ScrollView {
            VStack(spacing: 16.0) {
                HStack {
                    Text("Without zIndex")
                    Spacer()
                    ZStack {
                        Color.blue.opacity(0.5)
                            .frame(width: 20.0, height: 20.0)
                        Color.green.opacity(0.5)
                            .frame(width: 60.0, height: 60.0)
                        Color.red.opacity(0.5)
                            .frame(width: 100.0, height: 100.0)
                    }
                }
                HStack {
                    Text("With zIndex")
                    Spacer()
                    ZStack {
                        Color.blue.opacity(0.5)
                            .frame(width: 20.0, height: 20.0)
                            .zIndex(2.0)
                        Color.green.opacity(0.5)
                            .frame(width: 60.0, height: 60.0)
                            .zIndex(1.0)
                        Color.red.opacity(0.5)
                            .frame(width: 100.0, height: 100.0)
                    }
                }
                HStack {
                    Text("With zIndex before frame")
                    Spacer()
                    ZStack {
                        Color.blue.opacity(0.5)
                            .zIndex(2.0)
                            .frame(width: 20.0, height: 20.0)
                        Color.green.opacity(0.5)
                            .zIndex(1.0)
                            .frame(width: 60.0, height: 60.0)
                        Color.red.opacity(0.5)
                            .frame(width: 100.0, height: 100.0)
                    }
                }
            }
            .padding()
        }
    }
}