what is the best way to create a view (as in the image below)? so that its width is the size of the text content and the fill, taking into account the percentage. I tried several options, through Frame and GeometryReader, but it turns out either a view with a fixed width or for the width of the screen.
Maybe there is a more elegant way.
var percent: CGFloat = 0.7
var body: some View {
VStack(alignment: .leading) {
cell("Lorem")
cell("Lorem ipsum")
cell("Lorem ipsum dolor")
cell("Lorem ipsum dolor sit")
cell("Lorem ipsum dolor sit amet")
}
}
@ViewBuilder
func cell(_ string: String) -> some View {
Text(string)
.padding(.all, 5)
.background(
GeometryReader { geometry in
ZStack(alignment: .leading) {
Rectangle()
.foregroundColor(.green)
.frame(width: geometry.size.width * percent, height: geometry.size.height)
Capsule()
.stroke(Color.black, lineWidth: 1)
}
}
)
.clipShape(Capsule())
}
