79556622

Date: 2025-04-05 06:20:34
Score: 0.5
Natty:
Report link

I found an alternative solution which is not so elegant like the one using Grid , but its working nevertheless and I want to document it here.

 ScrollView {
            VStack(alignment: .leading) {
                
                HStack {
                    VStack(alignment: .leading) {
                        Text("Title")
                        Text("Not AI")
                        Text("10.5.2020").foregroundStyle(.clear)
                    }
                    .padding(16)
                    .background(Color.blue)
                    .overlay(alignment: .bottomTrailing) {
                        Text("10.5.2020")
                            .padding(EdgeInsets(top: 0, leading: 0, bottom: 16, trailing: 16))
                    }
                    
                    Spacer(minLength: 50)
                }
                
                HStack {
                    VStack(alignment: .leading) {
                        Text("left")
                        Text("The quick brown fox jumps over the lazy dog>")
                        Text("10.5.2020").foregroundStyle(.clear)
                    }
                    .padding(16)
                    .background(Color.blue)
                    .overlay(alignment: .bottomTrailing) {
                        Text("10.5.2020")
                            .padding(EdgeInsets(top: 0, leading: 0, bottom: 16, trailing: 16))
                    }
                    
                    Spacer(minLength: 50)
                }
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .border(.red)
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color.gray.opacity(0.5))

In this approach I am using overlays with bottomTrailing alignment to add the date text.

Note that I keep the date text in the original VStack to occupy the Space in the there. With the foregroundStyle = .clear I am hiding that spacer text so its not shown in UI.

The downside of this approach is, that it really only works when you want to add your label in the bottom right corner.

enter image description here

Reasons:
  • RegEx Blacklisted phrase (1): I want
  • Long answer (-1):
  • Has code block (-0.5):
  • Self-answer (0.5):
  • Low reputation (0.5):
Posted by: Marcel Derks