SwiftUI中如何将Slider高度设置为对应图片的高度？

问题核心是：多个FaderView横向排列时，你用GeometryReader拿到的是父容器的高度，而非图片缩放后的实际高度，导致Slider的宽度（旋转后对应高度）没有跟着图片缩小。下面是修复方案：

步骤1：定义获取视图尺寸的PreferenceKey #

先创建一个ViewSizeKey来捕获图片的实际渲染尺寸：

struct ViewSizeKey: PreferenceKey {
    static var defaultValue: CGSize = .zero
    static func reduce(value: inout CGSize, nextValue: () -> CGSize) {
        value = nextValue()
    }
}

步骤2：修改FaderView，捕获图片尺寸并应用到Slider #

调整FaderView的结构，先获取图片的实际高度，再用这个值设置Slider的宽度：

struct FaderView: View {
    @State var sliderValue: CGFloat = 0
    @State private var imageHeight: CGFloat = 0
    
    var body: some View {
        ZStack{
            // Fader Background
            Image("FaderBackground")
                .resizable()
                .scaledToFit()
                .cornerRadius(10)
                .padding()
                .background(
                    GeometryReader { geo in
                        Color.clear
                            .preference(key: ViewSizeKey.self, value: geo.size)
                    }
                )
                .onPreferenceChange(ViewSizeKey.self) { size in
                    imageHeight = size.height * 0.84 // 保留你原来的缩放比例
                }
            
            // Fader Slider
            Slider(
                value: $sliderValue,
                in: 0...127,
                step: 1.0
            )
            .frame(width: imageHeight)
            .rotationEffect(.degrees(-90.0), anchor: .center)
            .frame(maxWidth: .infinity, maxHeight: .infinity)
        }
    }
}

步骤3：保留MixerView的原有结构 #

MixerView不需要修改，保持横向排列即可：

struct MixerView: View {    
    var body: some View {
        HStack{
            ForEach(0..<8) { _ in
                FaderView()
            }
        }
        .frame(height: UIScreen.main.bounds.height)
    }
}

关键说明 #

• 用background里的GeometryReader捕获图片的实际渲染尺寸，而非父容器的尺寸，这样图片缩放后，imageHeight会实时更新。
• 通过onPreferenceChange拿到图片高度后，按你原来的0.84比例计算Slider的宽度，旋转后就和图片高度匹配了。
• 移除了嵌套的ZStack和多余的GeometryReader，简化结构的同时避免尺寸混淆。

内容的提问来源于stack exchange，提问作者Wpitchy