How can I make the three buttons at the bottom be "tighter" and more close to the center? I tried to play around with padding, but it only went "inward" a tiny bit

    var body: some View {
        VStack {
            Text("Memorize!")
                .font(.title)
            ScrollView {
                LazyVGrid(columns: [GridItem(.adaptive(minimum: 75))]) {
                    ForEach(emojis, id: \.self, content: { emoji in
                        CardView(content: emoji).aspectRatio(2/3, contentMode: .fit)
                    })
                }
                .padding()
            }
            .foregroundColor(.red)
            Spacer()
            HStack() {
                VStack {
                    vehicleButton
                    Text("Vehicles")
                        .font(.footnote)
                        .foregroundColor(Color.blue)
                }
                Spacer()
                VStack {
                    animalButton
                    Text("Animals")
                        .font(.footnote)
                        .foregroundColor(Color.blue)
                }
                Spacer()
                VStack {
                    faceButton
                    Text("Faces")
                        .font(.footnote)
                        .foregroundColor(Color.blue)
                }
            }
            .font(.largeTitle)
            .padding(.horizontal)
        }
    }

Screen

CodePudding user response：

You don't want those spacer between the buttons, that is making them to not get together. Put spacers at the beginning and end and use padding for the spacing between buttons.

HStack() {
            Spacer()
            VStack {
                vehicleButton
                Text("Vehicles")
                    .font(.footnote)
                    .foregroundColor(Color.blue)
            }
            VStack {
                animalButton
                Text("Animals")
                    .font(.footnote)
                    .foregroundColor(Color.blue)
            }.padding(.horizontal, 20)
            VStack {
                faceButton
                Text("Faces")
                    .font(.footnote)
                    .foregroundColor(Color.blue)
            }
            Spacer()
        }
        .font(.largeTitle)
        .padding(.horizontal)
    }

CodePudding user response：

Your Spacer() views inside your HStack will push the buttons as far out from each other as possible.

If you want the items closer to the centre, you should remove them and instead use the HStack constructor's spacing: argument to govern the space between elements:

HStack(spacing: 20) { // adjust accordingly
  VStack {
    vehicleButton
    Text("Vehicles")
      .font(.footnote)
      .foregroundColor(Color.blue)
  }
  VStack {
    animalButton
    Text("Animals")
      .font(.footnote)
      .foregroundColor(Color.blue)
  }
  VStack {
    faceButton
    Text("Faces")
      .font(.footnote)
      .foregroundColor(Color.blue)
  }
}

The HStack overall will be centered, because that's the default alignment of its parent VStack. However, because the individual child items theoretically have different widths, individually they might not look quite centered (say, if one ends up with a caption that's wider than the icon). You could apply a .frame(width:) modifier to each VStack if you needed to.