ios - Swiftui - 仅显示视图的百分比
问题描述
我有一个RoundedRectangle
, 我的目标是RoundedRectangle
在它上面放置另一个,这样覆盖层就会显示“完成百分比”。不过,我似乎找不到合适的咒语。
我认为理想情况下,覆盖应该以某种方式只显示其自身的一部分。调整自身大小以匹配百分比会扭曲叠加层的形状。
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())
在上面的操场上,如果您查看 1、2 甚至 3 %,您可以看到红色叠加层超出了左上角和左下角的蓝色背景矩形边界。见下图。
我觉得这不是正确的解决方案,但我也找不到正确的组合(尝试scaleEffect
、一堆offset
和position
数学)来真正确定它。
对我来说,就像我上面所说的,当值为0.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 !!
推荐阅读
- javascript - 将结果与空格混合,并在 Javascript 中添加破折号?
- powershell - 使用 Powershell 在 Azure 中查找标记的资源
- python - python:如何在大型项目中跟踪函数执行顺序
- vuejs2 - VueJs - Axios:如何在参数中发送多个值?
- c - 如何在点(。)的最后一次出现和字符串的结尾之间获取字符串,并将其与 C 中的另一个字符串连接起来?
- html - 咖啡脚本的控制器功能
- android - Xamarin、C#、谷歌地图片段不响应任何命令。(即移动相机)
- python - Python:随机日期生成
- javascript - JavaScript 函数 $ 未定义
- javascript - 如何将复选框值传递给 php?(javascript)