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

您可以在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)
    }
}

然后将滑块框（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 2

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

Answer 3

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

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

3 个答案: