如何在 swiftUI 中制作一堆垂直滑块

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 中从水平滑块制作垂直滑块，诀窍是 frame(width:) 和 frame(height:) 交换。这是我使用内置 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 frame(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)
}

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