I have an image and text side by side in an HStack set to top alignment.
I have no clue what this extra space is. The square shape and the text are not top aligned.
I tried to set padding(0) to Text() to no avail.
Any idea what this is?
This is the code for the HStack.
HStack(alignment: .top) {
Rectangle()
.fill(.red)
.frame(width: 15, height: 15)
.padding(.leading, 3)
Text("Heyasfd asdfsafds af awf s".uppercased())
.foregroundColor(.black)
Spacer()
}
Thoughts?
The text top is not only the letters, it includes some margin, depending on the font size.
You can set a frame for the text, like here:
HStack(alignment: .top) {
Rectangle()
.fill(.red)
.frame(width: 15, height: 15)
.padding(.leading, 3)
Text("Heyasfd asdfsafds af awf s".uppercased())
.frame(width: 200, height: 15)
.foregroundColor(.black)
Spacer()
}
But that does not work if you need more height for text.
Or define proper alignment : https://www.hackingwithswift.com/books/ios-swiftui/alignment-and-alignment-guides
HStack(alignment: .top) {
Rectangle()
.fill(.red)
.frame(width: 15, height: 15)
.padding(.leading, 3)
Text("Heyasfd asdfsafds af awf s".uppercased())
.alignmentGuide(.top) { _ in 5 } // Moves up 5 points
.foregroundColor(.black)
Spacer()
}
