CODEWITHSUNDEEP
swiftswiftui
Steven-Carrot
Steven-Carrot

Reputation: 3101

How to avoid Image size shrink when aligning

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

Upvotes: 0

Views: 127

Answers (1)

Steven-Carrot
Steven-Carrot

Reputation: 3101

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

Upvotes: 1

Related Questions