How to align views inside of Hstack to opposing sides? - ios

Question

I've been trying to make a SwiftUI view and have trouble doing something that could be easily done with constraints.
My view should look like this
and it looks like this
How do I align them to the sides without the constraints?
Here is my code for this view
private var toolsBottomView: some View {
ScrollView(.vertical, showsIndicators: false) {
VStack(spacing: 20) {
ForEach(0..<AppTools.allCases.count) { index in
ZStack(alignment: .leading) {
RoundedRectangle(cornerRadius: 16)
.frame(height: 116)
.foregroundColor(Color(#colorLiteral(red: 0.1294117647, green: 0.137254902, blue: 0.1882352941, alpha: 1)))
HStack(alignment: .center, spacing: 0) {
Spacer().frame(width: 20)
VStack(alignment: .leading) {
Image("\(AppTools.allCases[index])").resizable().frame(width: 27, height: 27)
Text(AppTools.allCases[index].rawValue)
.font(.custom("AvenirNextCyr-Demi", size: 24))
Text(AppTools.allCases[index].subtitles)
.font(.custom("AvenirNextCyr-Demi", size: 12))
.foregroundColor(Color(#colorLiteral(red: 0.4823529412, green: 0.4980392157, blue: 0.6196078431, alpha: 1)))
}.foregroundColor(.white)
Button("+", action: {
self.currentSelectedTool = AppTools.allCases[index]
self.showToolView.toggle()
})
.font(.custom("AvenirNextCyr-Demi", size: 20))
.frame(width: 48, height: 48)
.background(Color(#colorLiteral(red: 1, green: 0.6745098039, blue: 0.1882352941, alpha: 1)).cornerRadius(24))
.foregroundColor(Color(#colorLiteral(red: 0.1294117647, green: 0.137254902, blue: 0.1882352941, alpha: 1)))
}
.frame(minWidth: 0, maxWidth: .infinity)
}
}
Spacer()
}
}.offset(y: 15).padding()
}

Answer 1

Put Spacer in between elements you want keep aside, like
HStack(alignment: .center, spacing: 0) {
VStack(alignment: .leading) {
Image("\(AppTools.allCases[index])").resizable().frame(width: 27, height: 27)
Text(AppTools.allCases[index].rawValue)
.font(.custom("AvenirNextCyr-Demi", size: 24))
Text(AppTools.allCases[index].subtitles)
.font(.custom("AvenirNextCyr-Demi", size: 12))
.foregroundColor(Color(#colorLiteral(red: 0.4823529412, green: 0.4980392157, blue: 0.6196078431, alpha: 1)))
}.foregroundColor(.white)
.padding(.leading)
Spacer() // << here !!
Button("+", action: {
self.currentSelectedTool = AppTools.allCases[index]
self.showToolView.toggle()
})
.font(.custom("AvenirNextCyr-Demi", size: 20))
.frame(width: 48, height: 48)
.background(Color(#colorLiteral(red: 1, green: 0.6745098039, blue: 0.1882352941, alpha: 1)).cornerRadius(24))
.foregroundColor(Color(#colorLiteral(red: 0.1294117647, green: 0.137254902, blue: 0.1882352941, alpha: 1)))
.padding(.trailing)
}