There’s a related query right here on stackoverflow for how you can do it when they’re all the identical dimension however not when they’re totally different sizes,I’ve 4 views in a HStack that I wish to evenly area out however because the Picker is bigger than the opposite 3 its not possible to do it utilizing Spacer and since there at the moment are 4 as a substitute of three I can’t use alignment anymore both. 
What’s the resolution for making certain they’re all evenly spaced out?
import SwiftUI
@EnvironmentObject var captureDelegate: CaptureDelegate
let photos = ["person.slash.fill", "person.fill", "person.2.fill", "person.2.fill", "person.2.fill"]
@Binding var timerPress: Bool
personal var rotationAngle: Angle {
change captureDelegate.orientationLast {
case .landscapeRight:
return .levels(90)
case .landscapeLeft:
return .levels(-90) // Fixes the upside-down difficulty
default:
return .levels(0)
}
}
var physique: some View {
HStack() {
Picture(systemName: "gearshape")
.resizable()
.body(width: 25, top: 25)
.foregroundStyle(captureDelegate.cameraPressed ? Shade(white: 0.4) : .white )
.disabled(captureDelegate.cameraPressed)
.rotationEffect(rotationAngle)
.body(maxWidth: .infinity, alignment: .main)
.onTapGesture {
if !captureDelegate.cameraPressed {
}
}
Picture(systemName: "timer")
.resizable()
.body(width: 25, top: 25)
.foregroundStyle(captureDelegate.cameraPressed ? Shade(white: 0.4) : .white )
.disabled(captureDelegate.cameraPressed)
.rotationEffect(rotationAngle)
.body(maxWidth: .infinity)
.onTapGesture {
if !captureDelegate.cameraPressed {
timerPress.toggle()
}
}
Picture(systemName: "timer")
.resizable()
.body(width: 25, top: 25)
.foregroundStyle(captureDelegate.cameraPressed ? Shade(white: 0.4) : .white )
.disabled(captureDelegate.cameraPressed)
.rotationEffect(rotationAngle)
.body(maxWidth: .infinity)
.onTapGesture {
if !captureDelegate.cameraPressed {
timerPress.toggle()
}
}
Picker("Choose plenty of individuals", choice: $captureDelegate.userSelectedNumber) {
ForEach(0...4, id: .self) { i in
HStack(spacing: 70) {
Picture(systemName: self.photos[i])
.resizable()
.body(width: 20, top: 20)
.rotationEffect(rotationAngle)
Textual content("(i)")
.font(.system(dimension: 42))
.rotationEffect(rotationAngle)
}.tag(i)
.rotationEffect(rotationAngle)
}
}
.tint(.white)
.clipped()
.foregroundStyle(captureDelegate.cameraPressed ? Shade(white: 0.4) : .white )
.disabled(captureDelegate.cameraPressed)
.rotationEffect(rotationAngle)
.animation(.easeInOut(period: 0.5), worth: rotationAngle)
.body(maxWidth: .infinity, alignment: .trailing)
}
.font(.system(dimension: 24))
.padding([.leading,.trailing], 15)
}
}
I’ve tried utilizing Spacer however it doesnt work as a result of they aren’t all the identical dimension, once I had 3 views I had success utilizing alignment main heart and trailing however now that there are 4 views it not works.
Right here I’ve tried to make use of a ZStack to place them placing the 2 heart views in the identical HStack:
ZStack {
HStack {
Picture(systemName: "gearshape")
.resizable()
.body(width: 25, top: 25)
.foregroundStyle(captureDelegate.cameraPressed ? Shade(white: 0.4) : .white )
.disabled(captureDelegate.cameraPressed)
.rotationEffect(rotationAngle)
.body(maxWidth: .infinity, alignment: .main)
.onTapGesture {
if !captureDelegate.cameraPressed {
}
}
Picker("Choose plenty of individuals", choice: $captureDelegate.userSelectedNumber) {
ForEach(0...4, id: .self) { i in
HStack(spacing: 70) {
Picture(systemName: self.photos[i])
.resizable()
.body(width: 20, top: 20)
.rotationEffect(rotationAngle)
Textual content("(i)")
.font(.system(dimension: 42))
.rotationEffect(rotationAngle)
}.tag(i)
.rotationEffect(rotationAngle)
}
}
.tint(.white)
.clipped()
.foregroundStyle(captureDelegate.cameraPressed ? Shade(white: 0.4) : .white )
.disabled(captureDelegate.cameraPressed)
.rotationEffect(rotationAngle)
.animation(.easeInOut(period: 0.5), worth: rotationAngle)
.body(maxWidth: .infinity, alignment: .trailing)
}
HStack {
Textual content("(captureDelegate.totalPhotosToTake)")
.font(.system(dimension: 15))
.foregroundStyle(.white)
.fontWeight(.daring)
.padding(.horizontal, 9)
.padding(.vertical, 5)
.overlay(
RoundedRectangle(cornerRadius: 5).stroke(.white, lineWidth: 2)
)
.body(maxWidth: .infinity, alignment: .heart)
Picture(systemName: "timer")
.resizable()
.body(width: 25, top: 25)
.foregroundStyle(captureDelegate.cameraPressed ? Shade(white: 0.4) : .white )
.disabled(captureDelegate.cameraPressed)
.rotationEffect(rotationAngle)
.onTapGesture {
if !captureDelegate.cameraPressed {
timerPress.toggle()
}
}
.body(maxWidth: .infinity, alignment: .heart)
}
}
.font(.system(dimension: 24))
.padding([.leading,.trailing], 15)
And altering the 2 heart views alignments from heart to trialing and main produces this have an effect on:
