How to Customize a Text in SwiftUI

Question

I am trying to replicate a calculator app. I cant seem to modify my 'Text' view to look similarly.

Text("0")
   .background(Color.gray)
   .cornerRadius(10)
   .font(.largeTitle)

But its far from what I am trying to replicate. I tried offset, but it offsets the entire 'Text' view.

Basically I want my Text to look like what is pointed in the image

Answer 1

You can achieve this playing around with ZStack, VStack, HStack and Spacer(). Here is a quick example:

struct CalculatorText: View {

    var body: some View {

        ZStack {

            Rectangle()
                .cornerRadius(10)
                .foregroundColor(.gray)


            VStack {

                Spacer() // now the text will be on the bottom of ZStack

                HStack {

                    Spacer() // and now the text will be on the right side of ZStack

                    Text("0")
                        .bold()
                        .font(.system(size: 30))
                        .foregroundColor(.white)
                        .multilineTextAlignment(.trailing)
                        .padding()

                }
            }


        }
        .frame(height: 100)
        .padding()

    }

}

and the result will be: