11

I have a design that looks like this:

enter image description here

When I wrap it in a Button, the Image and "HOME" text move toward the center:

enter image description here

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)
        }
    }
}
}
natecraft1
  • 2,737
  • 9
  • 36
  • 56

4 Answers4

14

You can add a Spacer to the HStack and padding to align the house image with 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: enter image description here

Also, you can use a Divider() which does the same thing as your rectangle if you want to clean up your code a little:

Divider()
    .padding([.leading, .trailing], 30)
Timmy
  • 4,098
  • 2
  • 14
  • 34
sfung3
  • 2,227
  • 1
  • 9
  • 30
5

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)
}
trapper
  • 11,716
  • 7
  • 38
  • 82
2

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()
            }
yawnobleix
  • 1,204
  • 10
  • 21
1

Try using a spacer with maxWidth = .infinity

Spacer().frame(maxWidth:.infinity)
shokaveli
  • 478
  • 7
  • 14