[英]How to apply gradient to an accentColor of any View - SwiftUI
在这里,我正在使用 Slider。 我们可以像这样改变 Slider 的accentColor
,
Slider(value: $tip, in: 0...50, step: 1)
.accentColor(.red)
但是如何将Gradient
应用到一个accentColor
?
我试图通过屏蔽 slider 来应用渐变,但后来我无法再滑动它了。
LinearGradient(gradient: Gradient(colors: [.red, .blue]), startPoint: .top, endPoint: .bottom)
.mask(Slider(value: $tip, in: 0...50, step: 1))
那么有没有间接的方法呢?
ZStack {
LinearGradient(
gradient: Gradient(colors: [.red, .blue]),
startPoint: .leading,
endPoint: .trailing
)
.mask(Slider(value: $val, in: 0...50, step: 1))
// Dummy replicated slider, to allow sliding
Slider(value: $val, in: 0...50, step: 1)
.opacity(0.05) // Opacity is the trick here.
// .accentColor(.clear)
// instead setting opacity,
// setting clear color is another alternative
// slider's circle remains white in this case
}
@Enes Karaosman 解决方案提取为独立视图
import SwiftUI
struct LinearGradientSlider: View {
@Binding var value: Double
var colors: [Color] = [.green, .red]
var range: ClosedRange<Double>
var step: Double
var label: String
var body: some View {
ZStack {
LinearGradient(
gradient: Gradient(colors: colors),
startPoint: .leading,
endPoint: .trailing
)
.mask(Slider(value: $value, in: range, step: step))
// Dummy replicated slider, to allow sliding
Slider(value: $value, in: range, step: step, label: { Text(label).font(Font.body.lowercaseSmallCaps()) })
// .opacity(0.05) // Opacity is the trick here.
.accentColor(.clear)
// instead setting opacity,
// setting clear color is another alternative
// slider's circle remains white in this case
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.