swift - 我怎样才能在 swiftUI 中制作一堆垂直 slider

Question

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

水平(横跨屏幕):

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]))")
                }
            }
        }
    }
}

切换堆栈 View 和旋转 slider (不起作用):

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

您可以在 SwiftUI 中从水平 slider 制作垂直 slider ，技巧是交换 frame(width:) 和 frame(height:)。这是我使用内置的 SwiftUI 函数制作一些非常漂亮的垂直 slider 的方法

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 在布局 View 时提供的布局维度。这是对 GeometryReader 的一种巧妙使用，可以精确调整 slider 的大小。

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 个 View 放在一个 View 区域内:

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)
}

完成后，垂直 slider 如下所示: