Search code examples
swiftuirectangles

How can I create a folder using a rectangle in SwiftUI?


I'm currently working on an app and I want to create some kind of folders for it, I don't want to work with an image, so I want to do it with rectangles, but I'm afraid I'm not that clever, so I'm asking here if you can help me with this.

Many thanks in advance.

What I want

This is my current code:

ZStack{
            
            VStack{
                RoundedRectangle(cornerRadius: 25)
                    .fill(Color("marineblau"))
                    .frame(width: 100, height: 80)
            }
            
            VStack{
                RoundedRectangle(cornerRadius: 25)
                    .fill(Color("blau"))
                    .frame(width: 150, height: 110)
            }
        }

Solution

  • like this ?

        ZStack{
    
                RoundedRectangle(cornerRadius: 5)
                    .fill(.black) // Change the color
                    .frame(width: 60, height: 80)
                    .offset(x: -45, y: -30)
    
                RoundedRectangle(cornerRadius: 10)
                    .fill(.black) // Change the color
                    .frame(width: 150, height: 80)
                    .offset(y: -25)
    
    
                RoundedRectangle(cornerRadius: 10)
                    .fill(.blue)  // Change the color
                    .frame(width: 150, height: 110)
    
            VStack {
                Image(systemName: "chart.bar.xaxis.ascending")
                Text("Name")
    
            }
            .font(.title3.bold())
            .foregroundStyle(.white)
    
        }
    

    enter image description here

    or like this :

        ZStack{
    
                RoundedRectangle(cornerRadius: 5)
                    .fill(.black) // Change the color
                    .frame(width: 60, height: 80)
                    .offset(x: -45, y: -32)
                    .overlay(
                        Path { path in
                            path.move(to: CGPoint(x: 0, y: 50))
                            path.addLine(to: CGPoint(x: 0, y: 0))
                            path.addLine(to: CGPoint(x: 50, y: 50))
                            path.closeSubpath()
                        }
                            .fill(Color.black)
                            .offset(x: 12, y: -32)
                    )
    
                RoundedRectangle(cornerRadius: 10)
                    .fill(.black) // Change the color
                    .frame(width: 150, height: 80)
                    .offset(y: -25)
    
                RoundedRectangle(cornerRadius: 10)
                    .fill(.blue)  // Change the color
                    .frame(width: 150, height: 110)
    
            VStack {
                Image(systemName: "chart.bar.xaxis.ascending")
                Text("Name")
    
            }
            .font(.title3.bold())
            .foregroundStyle(.white)
    
        }
    

    enter image description here