我想将多个值显示为从 0 到 1 的连续值。我希望它们从下向上增长,从 0 显示无值到 1 显示全高。
但是,我无法让它“从底部成长”。我不确定用什么更好的术语来形容它——它是一个非常简单的垂直仪表,就像汽车上的油量表。我能够让它从中间生长,但似乎找不到让它从底部生长的方法。我玩过mask
andclipShape
和overlay
- 但必须可以通过简单的View
, 和高度计算来做到这一点。我特别希望能够显示重叠的仪表,如下图所示。
我ContentView.swift
的如下:
import SwiftUI
struct ContentView: View {
// binding values with some defaults to show blue over red
@State var redPct: CGFloat = 0.75
@State var bluePct: CGFloat = 0.25
let DISP_PCT = 0.8 // quick hack - the top "gauge" takes this much so the sliders display below
var body: some View {
GeometryReader { geom in
VStack {
ZStack {
// neutral background
Rectangle()
.fill(Color.gray)
.frame(width: geom.size.width, height: geom.size.height * DISP_PCT)
// the first gauge value display
Rectangle()
.fill(Color.red)
.frame(width: geom.size.width, height: geom.size.height * DISP_PCT * redPct)
// the second gauge value, on top of the first
Rectangle()
.fill(Color.blue)
.frame(width: geom.size.width, height: geom.size.height * DISP_PCT * bluePct)
}
HStack {
Slider(value: self.$redPct, in: 0...1)
Text("Red: \(self.redPct, specifier: "%.2f")")
}
HStack {
Slider(value: self.$bluePct, in: 0...1)
Text("Red: \(self.bluePct, specifier: "%.2f")")
}
}
}
}
}
当您使用滑块时,红色/蓝色视图会从中间“向外”增长。我希望他们从包含视图的底部“长大”。
我觉得这措辞不好-如果需要任何澄清,请不要犹豫!
任何帮助将不胜感激!