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

97 Views Asked by At

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)
            }
        }
1

There are 1 best solutions below

2
dibs On BEST ANSWER

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