Flutter – 滑块和 RangeSlide

在Flutter中，滑块和RangeSlider（范围滑块）是用于选择数字值、设置百分比或调整应用程序设置等的常见控件。本文将介绍如何在Flutter中使用这些控件。

滑块（Slider）

滑块（Slider）是一个用于选择数字值的基本控件。它允许用户通过拖动滑块来选择值，并且可以自定义滑块的外观。

有两种方式创建滑块。一种是使用Slider小部件，它是默认滑块。另一种是通过自定义SliderTheme的外观来创建自定义滑块。

Slider(
  value: _value,
  min: 0,
  max: 100,
  onChanged: (double newValue) {
    setState(() {
      _value = newValue;
    });
  },
)

参数说明：

• value：滑块的当前值。
• min：滑块的最小值。
• max：滑块的最大值。
• onChanged：用户拖动滑块时会调用的回调函数。

范围滑块（RangeSlider）

RangeSlider（范围滑块）是一个允许用户选择范围的控件。与滑块相比，它允许用户选择两个值，并且可以自定义滑块的外观。

RangeSlider(
  values: _values,
  min: 0,
  max: 100,
  onChanged: (RangeValues newValues) {
    setState(() {
      _values = newValues;
    });
  },
)

参数说明：

• values：范围滑块的当前值。
• min：范围滑块的最小值。
• max：范围滑块的最大值。
• onChanged：用户拖动范围滑块时会调用的回调函数。

创建自定义滑块

创建自定义滑块需要通过自定义SliderTheme小部件来实现。下面是一个示例代码，展示了如何创建自定义滑块：

SliderTheme(
  data: SliderThemeData(
    valueIndicatorColor: Colors.red, // 滑块值提示器的颜色
    thumbColor: Colors.green, // 滑块拖动部分的颜色
    activeTrackColor: Colors.grey, // 滑块激活区域颜色
    inactiveTrackColor: Colors.grey[300], // 滑块闲置区域颜色
    overlayColor: Colors.red.withAlpha(32), // 滑块拖动部分的遮罩颜色
    valueIndicatorTextStyle: TextStyle( // 滑块值提示器的文本样式
      color: Colors.white,
    ),
  ),
  child: Slider(
    value: _value,
    min: 0,
    max: 100,
    onChanged: (double newValue) {
      setState(() {
        _value = newValue;
      });
    },
  ),
)

总结

在Flutter中使用滑块和范围滑块非常简单，并且可以自定义控件的外观。通过这两个控件，我们可以轻松地让用户选择数值范围、百分比、设置等。