flutter - 如何将渐变作为活动颜色添加到 Flutter 中的 Slider
问题描述
我对 Flutter 中的 Slider 有疑问。我想将活动颜色设为渐变。而且我在渐变小部件中没有找到任何滑块
解决方案
我为此创建了一个类,您可以使用该类。
自定义类
class GradientRectSliderTrackShape extends SliderTrackShape with BaseSliderTrackShape {
/// Creates a slider track that draws 2 rectangles.
const GradientRectSliderTrackShape({ this.gradient = const LinearGradient(colors: [Colors.lightBlue, Colors.blue]) });
final LinearGradient gradient;
@override
void paint(
PaintingContext context,
Offset offset, {
required RenderBox parentBox,
required SliderThemeData sliderTheme,
required Animation<double> enableAnimation,
required TextDirection textDirection,
required Offset thumbCenter,
bool isDiscrete = false,
bool isEnabled = false,
}) {
assert(sliderTheme.disabledActiveTrackColor != null);
assert(sliderTheme.disabledInactiveTrackColor != null);
assert(sliderTheme.activeTrackColor != null);
assert(sliderTheme.inactiveTrackColor != null);
assert(sliderTheme.thumbShape != null);
// If the slider [SliderThemeData.trackHeight] is less than or equal to 0,
// then it makes no difference whether the track is painted or not,
// therefore the painting can be a no-op.
if (sliderTheme.trackHeight! <= 0) {
return;
}
final Rect trackRect = getPreferredRect(
parentBox: parentBox,
offset: offset,
sliderTheme: sliderTheme,
isEnabled: isEnabled,
isDiscrete: isDiscrete,
);
// Assign the track segment paints, which are left: active, right: inactive,
// but reversed for right to left text.
final ColorTween activeTrackColorTween = ColorTween(begin: sliderTheme.disabledActiveTrackColor, end: sliderTheme.activeTrackColor);
final ColorTween inactiveTrackColorTween = ColorTween(begin: sliderTheme.disabledInactiveTrackColor, end: sliderTheme.inactiveTrackColor);
final Paint activePaint = Paint()
..shader = gradient.createShader(trackRect)
..color = activeTrackColorTween.evaluate(enableAnimation)!;
final Paint inactivePaint = Paint()
..color = inactiveTrackColorTween.evaluate(enableAnimation)!;
final Paint leftTrackPaint;
final Paint rightTrackPaint;
switch (textDirection) {
case TextDirection.ltr:
leftTrackPaint = activePaint;
rightTrackPaint = inactivePaint;
break;
case TextDirection.rtl:
leftTrackPaint = inactivePaint;
rightTrackPaint = activePaint;
break;
}
final Rect leftTrackSegment = Rect.fromLTRB(trackRect.left, trackRect.top, thumbCenter.dx, trackRect.bottom);
if (!leftTrackSegment.isEmpty)
context.canvas.drawRect(leftTrackSegment, leftTrackPaint);
final Rect rightTrackSegment = Rect.fromLTRB(thumbCenter.dx, trackRect.top, trackRect.right, trackRect.bottom);
if (!rightTrackSegment.isEmpty)
context.canvas.drawRect(rightTrackSegment, rightTrackPaint);
}
执行
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return SliderTheme(
data: SliderTheme.of(context).copyWith(
activeTrackColor: Colors.green,
inactiveTrackColor: Colors.grey.shade400,
trackShape: GradientRectSliderTrackShape(
gradient: LinearGradient(
colors: [
Colors.blue,
Colors.pink,
],
),
),
trackHeight: 3.0,
thumbColor: Colors.pink,
overlayShape: RoundSliderOverlayShape(overlayRadius: 0.0),
overlayColor: Colors.white,
),
child: Slider(
min: 3,
max: 8,
value: 5,
onChanged: (val) {},
),
);
}
推荐阅读
- json - 如何连接2个表,其中一个表中的数据有需要解析的JSON数据?
- html - 如何在容器上方覆盖元素
- php - 从多维数组的第三级获取数据列
- axios - 在 Nuxt asyncData 中使用 axios 在浏览器刷新时丢失令牌
- azure-keyvault - 如何在ARM中为dependsOn引用子资源
- vue.js - 如何使用 Jest 创建 Vue 实例(未定义 Vue)
- excel - 仅将字符串添加到活动合并单元格一次 - Excel VBA 宏
- python - 通过 Python 将列从一个现有的 excel 文件复制到另一个文件
- jsf - 将 Richfaces333 + JSF 1.2 迁移到 Richfaces 4.3.7.Final + JSF 2.2:缺少标签
- python - Python跟踪mudule,解释输出