SwiftUI view with different widths with fill depending on the percentage

Question

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.

Answer 1

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())
}