[英]Custom range slider in SwiftUI
尝试使用 SwiftUI 中的值添加slider最小和最大范围选择。
添加最小值和最大值,如上图。
// define min & max value
@State var minValue: Float = 0.0
@State var maxValue: Float = Float(UIScreen.main.bounds.width - 50.0)
// setup slider view
ZStack (alignment: Alignment(horizontal: .leading, vertical: .center), content: {
Rectangle()
.fill(Color(UIColor.systemTeal).opacity(0.3))
.cornerRadius(30)
.frame(width: CGFloat(self.max), height: 30)
Rectangle()
.fill(Color.blue.opacity(25))
.cornerRadius(30)
.offset(x: CGFloat(self.min))
.frame(width: CGFloat((self.max + 20) - self.min), height: 30)
Circle()
.fill(Color.orange)
.frame(width: 30, height: 30)
.offset(x: CGFloat(self.min))
.gesture(DragGesture().onChanged({ (value) in
if value.location.x > 8 && value.location.x <= self.sliderWidth &&
value.location.x < CGFloat(self.max) {
self.min = Double(value.location.x)
}
}))
Circle()
.fill(Color.orange)
.frame(width: 30, height: 30)
.offset(x: CGFloat(self.max))
.gesture(DragGesture().onChanged({ (value) in
if value.location.x <= self.sliderWidth && value.location.x > CGFloat(self.min) {
self.max = Double(value.location.x)
}
}))
})
.padding()
在这段代码中,我遇到了最大值问题,同时拖动最大值,然后更改了 slider 轨道宽度,因此它不能完美移动。 我尝试了不同的框架,但它不起作用。
最后,我得到了解决方案。
// define min & max value
@State var minValue: Float = 0.0
@State var maxValue: Float = Float(UIScreen.main.bounds.width - 50.0)
// setup slider view
VStack {
HStack {
Text("0")
.offset(x: 28, y: 20)
.frame(width: 30, height: 30, alignment: .leading)
.foregroundColor(Color.black)
Spacer()
Text("100")
.offset(x: -18, y: 20)
.frame(width: 30, height: 30, alignment: .trailing)
.foregroundColor(Color.black)
}
ZStack(alignment: Alignment(horizontal: .leading, vertical: .center), content: {
Capsule()
.fill(Color.black.opacity(25))
.frame(width: CGFloat((UIScreen.main.bounds.width - 50) + 10), height: 30)
Capsule()
.fill(Color.black.opacity(25))
.offset(x: CGFloat(self.minValue))
.frame(width: CGFloat((self.maxValue) - self.minValue), height: 30)
Circle()
.fill(Color.orange)
.frame(width: 30, height: 30)
.background(Circle().stroke(Color.white, lineWidth: 5))
.offset(x: CGFloat(self.minValue))
.gesture(DragGesture().onChanged({ (value) in
if value.location.x > 8 && value.location.x <= (UIScreen.main.bounds.width - 50) &&
value.location.x < CGFloat(self.maxValue - 30) {
self.minValue = Float(value.location.x - 8)
}
}))
Text(String(format: "%.0f", (CGFloat(self.minValue) / (UIScreen.main.bounds.width - 50)) * 100))
.offset(x: CGFloat(self.minValue))
.frame(width: 30, height: 30, alignment: .center)
.foregroundColor(Color.black)
Circle()
.fill(Color.orange)
.frame(width: 30, height: 30)
.background(Circle().stroke(Color.white, lineWidth: 5))
.offset(x: CGFloat(self.maxValue - 18))
.gesture(DragGesture().onChanged({ (value) in
if value.location.x - 8 <= (UIScreen.main.bounds.width - 50) && value.location.x > CGFloat(self.minValue + 50) {
self.maxValue = Float(value.location.x - 8)
}
}))
Text(String(format: "%.0f", (CGFloat(self.maxValue) / (UIScreen.main.bounds.width - 50)) * 100))
.offset(x: CGFloat(self.maxValue - 18))
.frame(width: 30, height: 30, alignment: .center)
.foregroundColor(Color.black)
})
.padding()
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.