如何制作一堆垂直滑块？

Question

我正在尝试在 iPad 应用程序上使用 SwiftUI 创建一组垂直推子（测试代码中为 10 个，但实际为 32 个）。 水平制作滑块时，它们会在屏幕上正确拉伸。当垂直旋转这些相同的滑块时，它们似乎被锁定在水平尺寸上。有没有简单的方法让滑块垂直？

水平（跨屏幕拉伸）：

import SwiftUI

struct ContentView: View {
    @State private var sliderVal: Double = 0
    @State var values: [Double] = Array.init(repeating: 0.0, count: 10)

    var body: some View {
        VStack() {
            ForEach((0 ... 9), id: \.self) {i in
                HStack {
                    Text("\(i): ")
                    Slider(value: self.$values[i], in: 0 ... 100, step: 1.0)
                        .colorScheme(.dark)
                    Text("\(Int(self.values[i]))")
                }
            }
        }
    }
}

切换堆栈视图并旋转滑块（不起作用）：

struct ContentView: View {
    @State private var sliderVal: Double = 0
    @State var values: [Double] = Array.init(repeating: 0.0, count: 10)

    var body: some View {
        HStack() {
            ForEach((0 ... 9), id: \.self) {i in
                VStack {
                    Text("\(i): ")
                    Slider(value: self.$values[i], in: 0 ... 100, step: 1.0)
                        .colorScheme(.dark)
                        .rotationEffect(.degrees(-90))
                    Text("\(Int(self.values[i]))")
                }
            }
        }
    }
}

Answer 1

我制作了一个自定义 VSlider 视图（GitHub 上的源）来解决这个问题。它的用法应该与 Slider 几乎相同，如下面的比较演示所示（尽管它不是通用的，因此必须与 Double 一起使用）。

Answer 2

您可以在 SwiftUI 中从水平滑块制作垂直滑块，技巧是交换框架（宽度：）和框架（高度：）。这是我使用内置 SwiftUI 函数制作一些非常漂亮的垂直滑块的方法

import SwiftUI

struct VerticalSlider: View {
    @EnvironmentObject var playData : PlayData
    var channelNumber:Int
    var sliderHeight:CGFloat

    var body: some View {
        Slider(
            value: self.$playData.flickerDimmerValues[self.channelNumber],
            in: 0...255,
            step: 5.0
        ).rotationEffect(.degrees(-90.0), anchor: .topLeading)
        .frame(width: sliderHeight)
        .offset(y: sliderHeight)
    }
}

然后将 Slider 框架（width: ）传递给变量 sliderHeight 中的上述代码，如下代码所示，其中 sliderHeight 是 SwiftUI 在布局视图时提供的布局尺寸。这是 GeometryReader 的巧妙使用，可以精确调整滑块的大小。

import SwiftUI

struct VerticalBar: View {
    @EnvironmentObject var playData : PlayData
    var channelNumber:Int

    var body: some View {
        VStack {
            GeometryReader { geo in
                VerticalSlider(
                    channelNumber: self.channelNumber,
                    sliderHeight: geo.size.height
                )
            }
            Text("\(self.channelNumber + 1)")
                .font(.headline)
                .frame(height: 10.0)
                .padding(.bottom)
           
        }
    }
}

然后我使用 HStack 将上述视图中的 8 个放入视图区域中：

HStack {
    Spacer(minLength: 5.0)
    VerticalBar(channelNumber: 0)
    VerticalBar(channelNumber: 1)
    VerticalBar(channelNumber: 2)
    VerticalBar(channelNumber: 3)
    VerticalBar(channelNumber: 4)
    VerticalBar(channelNumber: 5)
    VerticalBar(channelNumber: 6)
    VerticalBar(channelNumber: 7)
    Spacer(minLength: 5.0)
}

完成后，垂直滑块如下所示：

Answer 3

我找到了这个 SwiftUI 库：repo 链接。它的好处是滑块在 macOS 和其他平台上都是相同的。此外，您可以非常轻松地自定义滑块。

Answer 4

我在 iOS 应用程序上遇到了同样的问题，我的解决方案是简单地将滑块包装在 ZStack 中，然后将旋转效果和帧修改器应用到 ZStack 而不是滑块本身。这是我的基本实现：

ZStack {
    Slider(value: $opacity, in: 0...1)
        .tint(Color.blue)
}
.rotationEffect(Angle(degrees: -90))
.frame(width: 200, height: 50)

应该注意的是，使用这种方法仍然存在一些奇怪的间距问题，主要是如果正常实现的话，视图看起来会保留与原始滑块相同的宽度，但这可以通过 padding 和 padding 轻松修复偏移量。希望这对某人有帮助！