ios 我可以在SwiftUI中将滑块高度设置为图像的高度吗?

qnyhuwrf  于 2023-02-26  发布在  iOS
关注(0)|答案(1)|浏览(171)

我试图将滑块的高度设置为与图片的高度相同,在这张图片中,你可以看到滑块是正确的高度,我希望基于容器的高度使用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)
    }
}
f0brbegy

f0brbegy1#

你犯的主要错误是使用全局坐标空间而不是局部坐标空间。Geometry Reader占用尽可能多的空间,所以它在代码中阅读的高度是整个可用空间的高度,而不是图像视图的高度。
如果你想要正确的高度,你可以使用这个视图扩展,它最初是Pure SwiftUI库的一部分。

public extension View {
 func geometryReader(
    _ geoCallback: @escaping (GeometryProxy) -> ()
 ) -> some View {
    geometryReader(id: 1, geoCallback)
 }

 func geometryReader<T: Hashable>(
    id: T,
    _ geoCallback: @escaping (GeometryProxy) -> ()
 ) -> some View {
    overlay(
      GeometryReader { (geo: GeometryProxy) in
        Color.clear.onAppear {
            geoCallback(geo)
        }
        .id(id)
      }
    )
  }
}

并按如下方式实现渐变视图:

struct FaderView: View {
 @State var sliderValue: CGFloat = 0
 @State var imageHeight: CGFloat = 0

 var body: some View {
     Image("FaderBackground")
         .resizable()
         .scaledToFit()
         .cornerRadius(10)
         .geometryReader { proxy in
             imageHeight = proxy.frame(in: .local).height
         }
         .overlay {
             Slider(
                 value: $sliderValue,
                 in: 0...127,
                 step: 1.0
             )
             .frame(width: imageHeight * 0.84)
             .rotationEffect(
                 .degrees(-90.0),
                 anchor: .center
             )
         }
 }
}

当然,您不必使用我介绍的扩展,但是我发现这个解决方案简洁易懂。

相关问题