SwiftUI中如何先旋转元素再布局以实现垂直滑块？

完全可行，而且有简洁的实现方式，核心是调整旋转后元素的布局尺寸，避免默认rotationEffect带来的空间占用问题。

自定义垂直滑块组件 #

先实现VerticalSlider，通过旋转滑块并调整布局容器的尺寸，让它在HStack中只占用必要宽度，同时拉伸至HStack的可用高度：

struct VerticalSlider: View {
    @Binding var value: Double
    
    var body: some View {
        Slider(value: $value)
            .rotationEffect(.degrees(-90)) // 旋转为垂直方向
            .frame(maxHeight: .infinity) // 占满HStack的可用高度
            .fixedSize(horizontal: true, vertical: false) // 保持水平方向的固有宽度（滑块厚度）
    }
}

布局调整与使用 #

在你的HStack中，给中间的水平滑块设置layoutPriority(1)，让它优先占据剩余空间，确保垂直滑块只占自身所需宽度：

VStack {
    Text("Some long title")
    HStack {
        VerticalSlider(value: .constant(0.5))
        Slider(value: .constant(0.5))
            .layoutPriority(1) // 让水平滑块优先占用剩余空间
        VerticalSlider(value: .constant(0.5))
    }
    Text("Some long footer")
}
.padding()

原理说明 #

• rotationEffect仅改变视觉方向，元素的布局边界还是原来的水平尺寸，所以我们用frame(maxHeight: .infinity)让滑块在旋转前（水平状态）尽可能拉伸高度，旋转后这个高度就变成了垂直滑块的视觉长度。
• fixedSize(horizontal: true)强制组件保持水平方向的固有尺寸（即滑块的厚度），避免它占用多余的水平空间。
• layoutPriority(1)确保中间的水平滑块在布局时优先分配空间，垂直滑块只会占用自己需要的窄宽度，最终形成你要的"H"形布局，且不会干扰上下的文本标签。

如果需要自定义滑块样式（比如颜色、轨道宽度），直接给Slider添加对应的修饰符即可，和普通水平滑块的用法一致。

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