[英]Swiftui - only show a percentage of a view
I have a RoundedRectangle
, and my objective is to lay another RoundedRectangle
over it such that the overlay shows a "percentage complete".我有一个RoundedRectangle
,我的目标是在它上面放置另一个RoundedRectangle
,以便覆盖显示“完成百分比”。 I can't seem to find the proper incantation to do so, though.不过,我似乎找不到合适的咒语。
I think that ideally, the overlay should somehow only show a percentage of itself.我认为理想情况下,覆盖应该以某种方式只显示其自身的一部分。 Resizing itself to match the percentage skews the shape of the overlay.调整自身大小以匹配百分比会扭曲叠加层的形状。
import PlaygroundSupport
struct ContentView: View {
@State private var value: Double = 0
var body: some View {
GeometryReader { geom in
VStack {
Slider(value: self.$value, in: 0...1, step: 0.01)
ZStack {
ZStack(alignment: .leading) {
// The main rectangle
RoundedRectangle(cornerRadius: 10)
.fill(Color.blue)
.frame(width: geom.size.width,
height: 200)
// The progress indicator...
RoundedRectangle(cornerRadius: 10)
.fill(Color.red)
.opacity(0.5)
.frame(width: CGFloat(self.value) * geom.size.width,
height: 200)
}
Text("\(Int(self.value * 100)) %")
}
}
}
.padding()
}
}
PlaygroundPage.current.setLiveView(ContentView())
In the above playground, if you look at 1, 2, or even 3 %, you can see that the red overlay is out of the blue background rectangle bounds in the upper and lower left.在上面的操场上,如果您查看 1、2 甚至 3 %,您可以看到红色叠加层超出了左上角和左下角的蓝色背景矩形边界。 See image below.见下图。
I feel like this is not the proper solution, but I also couldn't find the right mix of things (trying scaleEffect
, a bunch of offset
and position
math) to really nail it.我觉得这不是正确的解决方案,但我也找不到正确的组合(尝试scaleEffect
,一堆offset
和position
数学)来真正确定它。
To me, like I said above, it feels like the overlay should be able to say "only make my left-most 40% visible" when the value is 0.4
.对我来说,就像我上面所说的,当值为0.4
时,感觉覆盖应该能够说“只让我最左边的 40% 可见”。
That was long-winded, I apologize for that.那是冗长的,我为此道歉。 If you've read this far, and have any advice to impart, I'd be incredibly appreciative.如果你已经读到这里,并且有任何建议可以传授,我将非常感激。
Thanks!谢谢!
If I correctly understood your concern, here is a solution.如果我正确理解您的担忧,这里有一个解决方案。 Tested with Xcode 11.4 / iOS 13.4.使用 Xcode 11.4 / iOS 13.4 进行测试。
ZStack {
ZStack(alignment: .leading) {
// The main rectangle
RoundedRectangle(cornerRadius: 10)
.fill(Color.blue)
.frame(width: geom.size.width,
height: 200)
// The progress indicator...
RoundedRectangle(cornerRadius: 10)
.fill(Color.red)
.opacity(0.5)
.frame(width: CGFloat(self.value) * geom.size.width,
height: 200)
}
.clipShape(RoundedRectangle(cornerRadius: 10)) // << here !!
This how I approach it so I don't have to manage more than one cornerRadius
.这就是我处理它的方式,因此我不必管理多个cornerRadius
。
VStack {
ZStack(alignment: .leading) {
// The main rectangle
Rectangle()
.fill(Color.blue)
.frame(width: geom.size.width,
height: 200)
// The progress indicator...
Rectangle()
.fill(Color.red)
.opacity(0.5)
.frame(width: CGFloat(self.value) * geom.size.width,
height: 200)
}
.cornerRadius(10)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.