我正在尝试在 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]))")
}
}
}
}
}
我制作了一个自定义 VSlider 视图(GitHub 上的源)来解决这个问题。它的用法应该与 Slider 几乎相同,如下面的比较演示所示(尽管它不是通用的,因此必须与 Double 一起使用)。
您可以在 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)
}
完成后,垂直滑块如下所示:
我找到了这个 SwiftUI 库:repo 链接。它的好处是滑块在 macOS 和其他平台上都是相同的。此外,您可以非常轻松地自定义滑块。
我在 iOS 应用程序上遇到了同样的问题,我的解决方案是简单地将滑块包装在 ZStack 中,然后将旋转效果和帧修改器应用到 ZStack 而不是滑块本身。这是我的基本实现:
ZStack {
Slider(value: $opacity, in: 0...1)
.tint(Color.blue)
}
.rotationEffect(Angle(degrees: -90))
.frame(width: 200, height: 50)
应该注意的是,使用这种方法仍然存在一些奇怪的间距问题,主要是如果正常实现的话,视图看起来会保留与原始滑块相同的宽度,但这可以通过 padding 和 padding 轻松修复偏移量。希望这对某人有帮助!