//
//  ZIndexIntroduction.swift
//  SwiftUIViewsMasteryDemo
//
//  Created by RecherJ on 2021/7/20.
//

import SwiftUI

struct ZIndexIntroduction: View {
    var body: some View {
        VStack(spacing: 20) {
            Text("Z Index")
                .font(.largeTitle)
            Text("Introduction")
                .foregroundColor(.gray)
            Text("The zIndex modifier can move views up on top of other views.")
                .frame(maxWidth: .infinity)
                .padding()
                .background(Color.blue)
                .foregroundColor(.white)
            RoundedRectangle(cornerRadius: 20)
                .fill(Color.green)
                .padding(.horizontal, 50)
                .overlay(Text("1"))

            RoundedRectangle(cornerRadius: 20)
                .fill(Color.orange)
                .padding(.horizontal, 50)
                .scaleEffect(1.5)
                .overlay(Text("2"))
            RoundedRectangle(cornerRadius: 20)
                .fill(Color.yellow)
                .padding(.horizontal, 50)
                .overlay(Text("3"))

            Text("Here is the default order of layout index.")
                .frame(maxWidth: .infinity)
                .padding()
                .background(Color.blue)
                .foregroundColor(.white)
        }
        .font(.title)
    }
}

// Views added first are in the back. Views added last are on the top.

// Keep in mind, this is when they are all within the same parent (on
// the same level).

struct ZIndexIntroduction_Previews: PreviewProvider {
    static var previews: some View {
        ZIndexIntroduction()
    }
}
