SwiftUI - Align contents of Button to the left
You can add a spacer to the HStack and padding to align the house image to the rectangle.
var body: some View {
Button(action: {
}) {
Group {
Spacer().frame(width: 0, height: 36.0, alignment: .topLeading)
HStack {
Image("home")
.resizable()
.frame(width: 24, height: 24)
.foregroundColor(.navigationTextGrey)
.padding(.leading, 30.0)
Text("HOME")
.bold()
.font(.system(size: 17.0))
.foregroundColor(Color.navigationTextGrey)
.padding(.leading, 4.0)
Spacer()
}
Rectangle()
.fill(Color.navigationTextGrey)
.frame(width: UIScreen.main.bounds.width - 60, height: 1)
.padding(.top, 6.0)
}
}
}
This is the end result:
Also, instead of a rectangle, there is a divider view that does the same thing as your rectangle if you want to clean up your code a little
Divider()
.padding([.leading, .trailing], 30)
You should try adding a Spacer and alignment for the HStack
HStack() {
Image("home")
.resizable()
.frame(width: 24, height: 24)
.foregroundColor(.navigationTextGrey)
Text("HOME")
.bold()
.font(.system(size: 17.0))
.foregroundColor(Color.navigationTextGrey)
.padding(.leading, 4.0)
Spacer()
}
Yeah this can be cleaned up a lot.
var body: some View {
Button(action: {
}) {
VStack(spacing: 6) {
HStack(spacing: 4) {
Image("home")
.resizable()
.frame(width: 24, height: 24)
Text("HOME")
.bold()
.font(.system(size: 17.0))
Spacer()
}
Divider()
}
}
.foregroundColor(.navigationTextGrey)
.padding([.leading, .trailing], 30)
}