SwiftUI - Align contents of Button to the left
13,213
Solution 1
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)
}
}
}
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)
Solution 2
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)
}
Solution 3
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()
}
Solution 4
Try using a spacer with maxWidth = .infinity
Spacer().frame(maxWidth:.infinity)
Related videos on Youtube
Comments
-
natecraft1 almost 2 years
I have a design that looks like this:
When I wrap it in a Button, the Image and "HOME" text move toward the center:
I am trying to keep the contents aligned to the left but I'm having trouble. Here's the code that makes up this component.
struct HomeSection: View { 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) Text("HOME") .bold() .font(.system(size: 17.0)) .foregroundColor(Color.navigationTextGrey) .padding(.leading, 4.0) } Rectangle() .fill(Color.navigationTextGrey) .frame(width: UIScreen.main.bounds.width - 60, height: 1) .padding(.top, 6.0) } } } }
-
sfung3 almost 5 yearsThere is no leading alignment for HStack