I want to change the direction of the bar in a swiftui - swiftui

Question

I want to make a bar containing mutual data of two users. I want it to be like this image:
I also used the Rectangle() shape here. But the bar starts to fill up after 0.5, it seems empty before that. What should I do here?
The code I wrote is as follows:
HStack{
ZStack(alignment: .leading){
Rectangle()
.trim(from:0.1, to:0.6)
.fill(Color.init( red: 0.965, green: 0.224, blue: 0.49))
.frame(width: 55, height: 11)
Text(String(nowduelList.user1StepCount))
.font(.system(size: 8))
.bold()
.foregroundColor(Color.white)
}
ZStack(alignment: .trailing){
Rectangle()
.trim(from:0, to: 0.8)
.fill(Color.init( red: 0.208, green: 0.231, blue: 0.314))
.frame(width: 55, height: 11)
Text(String(nowduelList.user2StepCount))
.font(.system(size: 8))
.bold()
.foregroundColor(Color.white)
}
}
And this is an image of my View:

Answer 1

You can rotate the first view to achieve this:
HStack(spacing: -5) {
ZStack(alignment: .leading){
Rectangle()
.trim(from:0, to:0.8) // << Same as second view
.rotation(Angle(degrees: 180)) // << Rotation
.fill(Color.init( red: 0.965, green: 0.224, blue: 0.49))
.frame(width: 55, height: 11)
Text(String(951))
.font(.system(size: 8))
.bold()
.foregroundColor(Color.white)
}
ZStack(alignment: .trailing){
Rectangle()
.trim(from:0, to: 0.8)
.fill(Color.init( red: 0.208, green: 0.231, blue: 0.314))
.frame(width: 55, height: 11)
Text(String(231))
.font(.system(size: 8))
.bold()
.foregroundColor(Color.white)
}
}

Answer 2

Here is the full code you can modify and optimize the code as you want.
struct Triangle: Shape {
func path(in rect: CGRect) -> Path {
var path = Path()
path.move(to: CGPoint(x: 0, y: 0))
path.addLine(to: CGPoint(x: rect.minX, y: rect.maxY))
path.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY))
path.addLine(to: CGPoint(x: rect.maxX/1.2, y: 0))
return path
}
}
struct LeadingTriangle: Shape {
func path(in rect: CGRect) -> Path {
var path = Path()
path.move(to: CGPoint(x: rect.maxX/1.2-rect.maxX, y: 0))
path.addLine(to: CGPoint(x: rect.minX, y: rect.maxY))
path.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY))
path.addLine(to: CGPoint(x: rect.maxX, y: 0))
return path
}
}
var body: some View {
HStack{
ZStack(alignment: .leading){
Rectangle()
.fill(Color.white)
.frame(width: 150, height: 30)
.overlay(
Triangle()
.fill(Color.red)
)
Text(String(23.32))
.font(.system(size: 8))
.bold()
.foregroundColor(Color.white)
}
ZStack(alignment: .trailing){
Rectangle()
.fill(Color.white)
.frame(width: 150, height: 30)
.overlay(
LeadingTriangle()
.fill(Color.blue)
)
Text(String(23.32))
.font(.system(size: 8))
.bold()
.foregroundColor(Color.white)
}
}
}