SwiftUI Design Part

Hi Developers,
I’m learning SwiftUI basics. I have to design a page like this. I have designed everything but I stocked up at the bottom area. How can I achieve this? Please help me out with this. Thanks in advance.

This my Code and the preview.

struct ContentView: View {

var body: some View {
    ZStack {
        Image("chickenshawarma").resizable().edgesIgnoringSafeArea(.all)
        VStack {
                VStack {
                    Text("Chicken Shawarma").bold().font(.title)
                    Text("Spicy Fit").font(.subheadline).bold()
                }
                
            Spacer()
            RoundedRectangle(cornerRadius: 25.0)
                Label("Shawarma Category", systemImage: "1.circle").font(.title)
        }
    }
}}

Screenshot 2020-08-18 at 1.54.36 AM

You can add screenshots directly into your post rather than adding them via a link. It’s much easier of the image is viewable in-line.

Note the 7th icon from the left is an image upload button. You can use that method or simply drag the image into the window where your cursor is currently located.

What does your code look like at the moment?

Paste your code from ContentView in a reply.

1 Like

@Chris_Parker Thanks for the guide. I have edited my question with a preview image and code preview. Thanks for your support.

Are you trying to create a button at the bottom where you have the RoundedRetangle and the text “Code With Chris” inside it?

No @Chris_Parker . I’m just trying to display a text in there, just a Label not a button.

OK then this might be the solution you are looking for.

Below the Spacer() you need to add another VStack and inside that create a ZStack which has the RoundedRectangle() and the Text() as the only items.

ie:

import SwiftUI

struct ContentView: View {
    var body: some View {
        ZStack {
            Image("chickenshawarma")
                .resizable()
                .edgesIgnoringSafeArea(.all)
            VStack {
                VStack {
                    Text("Chicken Shawarma")
                        .font(.title)
                        .bold()
                    Text("Spicy Fit")
                        .font(.subheadline)
                        .bold()
                }
                Spacer()
                
                VStack {
                    ZStack {
                        RoundedRectangle(cornerRadius: 25)
                            .fill(Color.white)
                            .frame(height: 150)
                        Text("Code With Chris")
                            .font(.largeTitle)
                            .foregroundColor(.black)
                    }                    
                }
            }
        }
    }
}

Perfect Solution Boss :heart_eyes:
Working correctly with slight modification in your code.
Thanks for your support. I have attached the code and Screenshot.

struct ContentView: View {
var body: some View {
    ZStack {
        Image("chickenshawarma")
            .resizable()
            .edgesIgnoringSafeArea(.all)
        VStack {
            VStack {
                Text("Chicken Shawarma")
                    .font(.title)
                    .bold()
                Text("Spicy Fit")
                    .font(.subheadline)
                    .bold()
            }.padding(EdgeInsets(top: 50, leading: 0, bottom: 0, trailing: 0))
            Spacer()
             ZStack {
                    RoundedRectangle(cornerRadius: 25)
                        .fill(Color.white)
                        .frame(height: 150)
                    Text("Code With Chris")
                        .font(.largeTitle)
                        .foregroundColor(.black)
                }
        }.edgesIgnoringSafeArea(.all)
    }
}

}