我试图将滑块的高度设置为与图片的高度相同,在这张图片中,你可以看到滑块是正确的高度,我希望基于容器的高度使用GeometryReader
。
当我有8个这样的一排,图像变小(这是我想要的),但滑块保持不变的高度。
如何将滑块的高度设置为图像的高度?
struct FaderView: View {
@State var sliderValue: CGFloat = 0
var body: some View {
ZStack{
// Fader Background
ZStack {
GeometryReader { geo in
Image("FaderBackground")
.resizable()
.scaledToFit()
.cornerRadius(10)
.padding()
.frame(maxWidth: geo.size.width, maxHeight: geo.size.height)
// Fader Slider
HStack(alignment: .center) {
Slider(
value: $sliderValue,
in: 0...127,
step: 1.0
)
.frame(width: geo.size.height * 0.84)
.rotationEffect(.degrees(-90.0), anchor: .center)
}
.frame(maxWidth: geo.size.width, maxHeight: geo.size.height)
}
}
}
}
struct MixerView: View {
var body: some View {
HStack{
FaderView()
FaderView()
FaderView()
FaderView()
FaderView()
FaderView()
FaderView()
FaderView()
}
.frame(height: UIScreen.main.bounds.height)
}
}
1条答案
按热度按时间f0brbegy1#
你犯的主要错误是使用全局坐标空间而不是局部坐标空间。Geometry Reader占用尽可能多的空间,所以它在代码中阅读的高度是整个可用空间的高度,而不是图像视图的高度。
如果你想要正确的高度,你可以使用这个视图扩展,它最初是Pure SwiftUI库的一部分。
并按如下方式实现渐变视图:
当然,您不必使用我介绍的扩展,但是我发现这个解决方案简洁易懂。