CODEWITHSUNDEEP
swiftswiftui
jinx
jinx

Reputation: 303

Removing left margin for HStack

I would like to remove the left margin on an HStack which is used as a header column for a list view below it.

Currently my UI looks as below:

enter image description here

I would like the calories text to be aligned with the number below it, and I am not sure how to achieve this, as setting the padding(.leading, 0) did not achieve it. I have attached the code for the view below.

    var body: some View {
        HStack(spacing: 50) {
            Text("Calories").font(.title2).padding(.leading, 0)
            Text("Weight").font(.title2)
            Text("Date").font(.title2)
        }
        
        List (weightEntriesViewModel.weightEntries) { item in
            
            let weight: String = String(format: "%.2f", item.weight)
            let date: String = self.convertDate(item: item)
            HStack(spacing: 50) {
                Text("\(item.calories)")
                Text(weight)
                Text(date)
                Button(action: {
                    self.weightEntriesViewModel.removeEntry(weightEntry: item)
                    self.weightEntriesViewModel.getData()
                }, label: {
                    HStack {
                        Image(systemName: "delete.left")
                            .font(/*@START_MENU_TOKEN@*/.title/*@END_MENU_TOKEN@*/)
                        Text("Remove")
                            .frame(width: 10, height: 10, alignment: .trailing)
                        
                    }.padding()
                    .foregroundColor(.white)
                    .background(Color.red)
                    .cornerRadius(40)
                })
            }

Upvotes: 0

Views: 297

Answers (1)

Trupesh Vaghasiya
Trupesh Vaghasiya

Reputation: 514

Add Spacer() into Hstack after Text("Date").font(.title2)

And just add .padding() after Hstack

HStack(spacing: 50) {
    Text("Calories").font(.title2)
    Text("Weight").font(.title2)
    Text("Date").font(.title2)            
     
    Spacer()
}.padding()

Let me know... is it working for you?

Click here to see result

Upvotes: 3

Related Questions