How to avoid Image size shrink when aligning

July 27, 2022

New to this framework i know i’m not good at aligning part of UI yet.

My aligning problem is my image get shrink the more padding it has so if possible can you go easy and point out my mistake here? i am practicing align my item to top left corner.

    struct MasterLabMerge: View {
    var body: some View {
    
    ZStack {
        
        Color.gray.ignoresSafeArea()
        Image(systemName: "note")
            .frame(width: 300, height: 300)
            .padding(.leading, -300)
            .padding(.top, -500)
      }
    }


}

enter image description here

>Solution :

You need to add .resizable() to enable an image to grow in size.

Also, you can align your item to the top left in better ways.

Option 1 (I personally think this is the best):

 ZStack {
   Color.gray.ignoresSafeArea()
   VStack {
     HStack {
         Image(systemName: "note")
             .resizable()
             .frame(width: 100, height: 100)
             .padding(.leading)
         Spacer()
     }
     Spacer()
   }
 }

Option 2:

 ZStack {
    Color.gray.ignoresSafeArea()
    }
    .toolbar {
        ToolbarItem(placement: .navigationBarLeading) {
            Image(systemName: "note")
                .resizable()
                .frame(width: 100, height: 100)
                .padding(.top)
        }
    }