Flutter使您可以创建精美的本地编译应用程序。Flutter之所以能够做到这一点，是因为Flutter喜欢Material。Material是一个设计系统，可帮助构建高质量的数字体验。随着UI设计的不断发展，Material继续更新其组件，运动和设计系统。

Flutter最近将Slider和RangeSlider小部件更新为最新的设计。新的滑块在设计时考虑到了更好的可访问性：轨道更高，拇指带有阴影，并且值指示器具有新的形状和改进的文本缩放支持。

本文介绍了Slider和RangeSlider小部件的更改。

更新的内容

Slider并RangeSlider进行了更新，以便在使用这些小部件时获得更流畅的体验。此图演示了制作滑块小部件的五个不同组件。

Slider并RangeSlider包括五个部分：

显示拇指值标签的价值指标
拇指滑过的轨迹
指示值位置的拇指
按下拇指时显示的叠加层
滑块不连续时在轨道上的刻度线

注意：本文涉及两种不同类型的叠加层：

该OverlaySlider组件表示前述图像中提到的组分。
Flutter的Overlay类用于在以下屏幕上显示的所有其他小部件上“浮动”小部件。

新的默认值指标形状

旧滑块和新滑块小部件之间最大的视觉差异是默认值指示符：RectangularSliderValueIndicatorShapefor Slider和RectangularRangeSliderValueIndicatorShapefor RangeSlider。指标反映了Material的最新设计更改。旧的指示器形状是一个颠倒的梨，新的指示器形状更加矩形，看起来像气泡。值指标进行了两个更新Slider和RangeSlider。

value指标画在覆盖层上

现在，更新后的值指示符已绘制在叠加层上。这意味着该指示符不再局限于滑块的范围，而是MediaQuery可以显示在其他窗口小部件上。这是预料之中的，因为只有在处理手势检测器时才激活指示器，这意味着仅在用户与滑块交互时才显示指示器。通过将，，和小部件集成Overlay在一起CompositedTransformTarget，值指示器可以显示在其他小部件上方。要了解有关此机制的更多信息，请参见如何在（可能是经过转换的）UI小部件上浮动覆盖小部件。CompositedTransformFollowerLayerlink

下图显示了Slider和RangeSlider窗口小部件的制作方式：

您可能会注意到，我们使用单独LeafRenderObjectWidget的标记在叠加层上绘制指示器。这是因为我们需要在Overlay类和屏幕上都进行绘制，而您不能在同一个LeafRenderObjectWidget窗口小部件上进行绘制。

因为我们现在在覆盖层上绘制值指示符，所以它不再局限于MediaQuery包含滑块的范围。该指示器不再被剪切到该框，这意味着始终显示整个值指示器。

注意：此示例的textScaleFactor设置为4，以进行更好的演示。

值指示器矩形已移动，因此指示器的一部分不会离开屏幕。这项改进使您可以增加指示器内的位数并增加应用程序的文本比例因子，而不必担心文本是否超出屏幕尺寸。在下图中，值指示符文本比例为4，并且包含3位数字的值，但是滑块可以毫无问题地处理它。

double getHorizontalShift({  RenderBox parentBox,  Offset center,  TextPainter labelPainter,  double textScaleFactor,  Size sizeWithOverflow,  double scale,}) {  assert(!sizeWithOverflow.isEmpty);  const double edgePadding = 8.0;  final double rectangleWidth = _upperRectangleWidth(labelPainter, scale, textScaleFactor);  /// Value indicator draws on the overlay, and by using the global Offset,  /// we are making sure that we use the bounds of the Overlay instead of the Slider.  final Offset globalCenter = parentBox.localToGlobal(center);  // The rectangle must be shifted toward the center so that it minimizes the  // chance of it rendering outside the bounds of the render box. If the shift  // is negative, then the lobe is shifted from right to left. If the shift is  // positive, then the lobe is shifted from left to right.  final double overflowLeft = math.max(0, rectangleWidth / 2 —     globalCenter.dx + edgePadding);  final double overflowRight = math.max(0, rectangleWidth / 2 — (sizeWithOverflow.width — globalCenter.dx — edgePadding));  if (rectangleWidth < sizeWithOverflow.width) {    return overflowLeft — overflowRight;  } else if (overflowLeft — overflowRight > 0) {    return overflowLeft — (edgePadding * textScaleFactor);  } else {    return -overflowRight + (edgePadding * textScaleFactor);  }}