Reputation: 9419
I would like to build the following view and be able to control how much each view fills the outer rectangle:
This is what I have so far:
import SwiftUI
struct TestView: View {
var body: some View {
HStack(spacing: 0) {
Rectangle().fill(Color.blue)
Rectangle()
.fill(Color.yellow)
Rectangle()
.fill(Color.pink)
}
.cornerRadius(8)
.frame(maxHeight: 25)
}
}
Since a HStack decides how to lay out the views on its own, I'm not sure if that's the right View to use. I've tried with a Capsule but it's just a rounded rectangle. What can I use to build the View above? Ideally, I would like to give a percentage to the view and then make it fill appropriately.
Upvotes: 0
Views: 780
Reputation: 258621
Here is a demo of possible approach (tested with Xcode 12 / iOS 14)
var body: some View {
Color.clear // << placeholder
.frame(maxWidth: .infinity, maxHeight: 25)
.overlay(GeometryReader { gp in
// chart is here
HStack(spacing: 0) {
Rectangle().fill(Color.blue)
.frame(width: 0.6 * gp.size.width)
Rectangle()
.fill(Color.yellow)
.frame(width: 0.1 * gp.size.width)
Rectangle()
.fill(Color.pink)
.frame(width: 0.3 * gp.size.width)
}
})
.clipShape(RoundedRectangle(cornerRadius: 8))
}
Upvotes: 2