首页 > 建站教程 > APP开发,混合APP >  Flutter笔记47:SliderTheme滑块主题正文

Flutter笔记47:SliderTheme滑块主题

Slider滑块组件本身能够满足一些简单的样式需求,但是如果想进行更多的自定义设置,就可以用到SliderTheme滑块主题组件了,SliderTheme必须将Slider包裹起来,才能对Slider进行更深层次的定制
class _DemoPageState extends State<DemoPage> {
  double value = 0.0;

  @override
  Widget build(BuildContext context) {
    return SliderTheme(
      data: SliderTheme.of(context).copyWith(
        //已拖动的颜色
        activeTrackColor: Colors.yellowAccent,
        //未拖动的颜色
        inactiveTrackColor: Colors.red,
        //提示气泡label的背景色
        valueIndicatorColor: Colors.blue,
        //提示气泡label的文本颜色
        valueIndicatorTextStyle: TextStyle(
          color: Colors.white
        ),
        //滑块中心的颜色
        thumbColor: Colors.orange,
        //滑块边缘的颜色,按下滑块可见
        overlayColor: Colors.green,
        //分段的颜色,即Slider中divisions分段后,每段分割的颜色
        inactiveTickMarkColor: Colors.black,
      ),
      child: Slider(
        value: value,
        label: '$value',
        min: 0.0,
        max: 100.0,
        divisions: 100,
        onChanged: (val) {
          setState(() {
            value = val.floorToDouble();
          });
        }
      ),
    );
  }
}