Adding Space Between HStack and VStack in SwiftUI

Question

I am new to swift UI . I am trying to create simple login form in swift ui . I am trying to put round shape at top let corner and with in that I also put and text filed. Then I trying to put image within VStack with respective text and button but the design is expending through the bottom and I am trying to increase the width of the Login button but actually it not increasing ..

Here is the my code ..

import SwiftUI

struct ContentView: View {
    var body: some View {
        ZStack(alignment: .topLeading) {
            Color.clear
            HStack() {
                Circle()
                    .fill(.blue)
                    .frame(width: 50, height: 60)

                Text("SLOP")
                    .font(.system(size: 20))
                    .fontWeight(.medium)

            }
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)

        VStack(alignment: .center) {
            Image("login")
                .resizable()
                .aspectRatio(contentMode: .fit)
                .cornerRadius(10)
                .padding()

            Text("Hello !")
                .font(.title)
                .bold()
            Text("Please select the Option")
                .bold()
            Button {
                print("Login button was tapped")
            } label: {
                Text("Login")
                    .padding()
                    .foregroundStyle(.white)
                    .background(.blue)
                    .frame(width: 1000, height: 60)
            }

            Button {
                print("Registration button was tapped")
            } label: {
                Text("Registration")
                    .padding()
                    .foregroundStyle(.white)
                    .background(.blue)
                    .frame(width: 200, height: 60)
            }
        }
    }
}

Screenshot of actual design .

Here is the screenshot of the app. The image is not correct position and login text button width not increased .

Answer 1

I would suggest using an .overlay for the circle and text in the top-left corner. To make sure the overlay is really positioned in the top-left corner of the screen, set maxHeight: .infinity on the VStack. You might want some extra padding in places too.

For the login button, just set maxWidth: .infinity and apply the background color after this (the order of the modifiers is important).

Like this:

struct ContentView: View {
    var body: some View {
        VStack(alignment: .center) {
            Image("login")
                .resizable()
                .aspectRatio(contentMode: .fit)
                .cornerRadius(10)
                .padding()

            Text("Hello !")
                .font(.title)
                .bold()
            Text("Please select the Option")
                .bold()
            Button {
                print("Login button was tapped")
            } label: {
                Text("Login")
                    .padding()
                    .foregroundStyle(.white)
                    .frame(height: 60)
                    .frame(maxWidth: .infinity)
                    .background(.blue) // after setting the max width
            }

            Button {
                print("Registration button was tapped")
            } label: {
                Text("Registration")
                    .padding()
                    .foregroundStyle(.white)
                    .background(.blue)
                    .frame(width: 200, height: 60)
            }
        }
        .padding()
        .frame(maxHeight: .infinity)
        .overlay(alignment: .topLeading) {
            HStack {
                Circle()
                    .fill(.blue)
                    .frame(width: 50, height: 60)

                Text("SLOP")
                    .font(.system(size: 20))
                    .fontWeight(.medium)

            }
            .padding(.leading, 20)
        }
    }
}