Flutter滑动选择器插件flutter_xlider的使用

flutter_xlider 是一个功能强大的Flutter插件，提供了Material Design风格的滑动选择器（Slider）和范围选择器（Range Slider），支持水平和垂直方向，并且具备RTL（从右到左）支持以及丰富的自定义选项。以下是该插件的详细使用说明及示例代码。

一、基本用法

1. 单个滑块(Single Slider)

FlutterSlider(
  values: [300], // 初始值
  max: 500,      // 最大值
  min: 0,        // 最小值
  onDragging: (handlerIndex, lowerValue, upperValue) {
    _lowerValue = lowerValue;
    _upperValue = upperValue;
    setState(() {});
  },
)

2. 范围滑块(Range Slider)

FlutterSlider(
  values: [30, 420], // 初始值
  rangeSlider: true, // 是否为范围选择器
  max: 500,
  min: 0,
  onDragging: (handlerIndex, lowerValue, upperValue) {
    _lowerValue = lowerValue;
    _upperValue = upperValue;
    setState(() {});
  },
)

3. 垂直轴(Vertical Axis)

通过设置 axis 参数可以将滑块变为垂直方向：

FlutterSlider(
  axis: Axis.vertical, // 设置为垂直方向
  ...
)

二、高级特性

1. 自定义手柄(Handlers)

可以通过 handler 和 rightHandler 属性来自定义滑块的手柄样式：

FlutterSlider(
  handler: FlutterSliderHandler(
    decoration: BoxDecoration(),
    child: Material(
      type: MaterialType.canvas,
      color: Colors.orange,
      elevation: 3,
      child: Container(
          padding: EdgeInsets.all(5),
          child: Icon(Icons.adjust, size: 25,)),
    ),
  ),
  rightHandler: FlutterSliderHandler(
    child: Icon(Icons.chevron_left, color: Colors.red, size: 24,),
  ),
  ...
)

2. 手柄缩放动画(Handler Scale Animation)

控制手柄的缩放动画效果：

FlutterSlider(
  handlerAnimation: FlutterSliderHandlerAnimation(
    curve: Curves.elasticOut,
    reverseCurve: Curves.bounceIn,
    duration: Duration(milliseconds: 500),
    scale: 1.5
  ),
  ...
)

3. 轨道条(Trackbars)

自定义轨道条的样式：

FlutterSlider(
  trackBar: FlutterSliderTrackBar(
    activeTrackBarHeight: 5,
    inactiveTrackBar: BoxDecoration(
      borderRadius: BorderRadius.circular(20),
      color: Colors.black12,
      border: Border.all(width: 3, color: Colors.blue),
    ),
    activeTrackBar: BoxDecoration(
      borderRadius: BorderRadius.circular(4),
      color: Colors.blue.withOpacity(0.5)
    ),
  ),
  ...
)

4. 提示框(Tooltips)

对提示框进行个性化定制：

FlutterSlider(
  tooltip: FlutterSliderTooltip(
    textStyle: TextStyle(fontSize: 17, color: Colors.white),
    boxStyle: FlutterSliderTooltipBox(
      decoration: BoxDecoration(
        color: Colors.redAccent.withOpacity(0.7)
      )
    )
  ),
  ...
)

5. 忽略某些区间(Ignore Steps)

指定某些区间不可选中：

FlutterSlider(
  ignoreSteps: [
    FlutterSliderIgnoreSteps(from: 8000, to: 12000),
    FlutterSliderIgnoreSteps(from: 18000, to: 22000),
  ],
  ...
)

6. 固定值(Fixed Values)

当需要在特定位置显示固定文本时使用：

FlutterSlider(
  values: [10, 50],
  fixedValues: [
    FlutterSliderFixedValue(percent: 0, value: "1000"),
    FlutterSliderFixedValue(percent: 10, value: "10K"),
    FlutterSliderFixedValue(percent: 50, value: 50000),
    FlutterSliderFixedValue(percent: 80, value: "80M"),
    FlutterSliderFixedValue(percent: 100, value: "100B"),
  ],
  ...
)

7. 分隔线(Hatch Mark)

用于标记刻度或添加标签：

FlutterSlider(
  hatchMark: FlutterSliderHatchMark(
    density: 0.5, 
    labels: [
      FlutterSliderHatchMarkLabel(percent: 0, label: Text('Start')),
      FlutterSliderHatchMarkLabel(percent: 10, label: Text('10,000')),
      FlutterSliderHatchMarkLabel(percent: 50, label: Text('50 %')),
      FlutterSliderHatchMarkLabel(percent: 80, label: Text('80,000')),
      FlutterSliderHatchMarkLabel(percent: 100, label: Text('Finish')),
    ],
  ),
  ...
)

三、完整示例Demo

下面是一个完整的例子，包含了上述提到的各种配置项：

import 'package:flutter/material.dart';
import 'package:flutter_xlider/flutter_xlider.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: MyHomePage(title: 'Xlider Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, this.title}) : super(key: key);
  final String? title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  double _lowerValue = 50;
  double _upperValue = 180;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title!)),
      body: SingleChildScrollView(
        child: Column(
          children: <Widget>[
            // 单个滑块
            Container(
              padding: EdgeInsets.all(50),
              child: FlutterSlider(
                values: [0],
                max: 100,
                min: 0,
              ),
            ),
            
            // 范围滑块
            Container(
              margin: EdgeInsets.only(top: 50, left: 50, right: 50),
              alignment: Alignment.centerLeft,
              child: FlutterSlider(
                values: [60, 160],
                max: 200,
                min: 50,
                maximumDistance: 300,
                rangeSlider: true,
                rtl: true,
                handlerAnimation: FlutterSliderHandlerAnimation(
                    curve: Curves.elasticOut,
                    reverseCurve: null,
                    duration: Duration(milliseconds: 700),
                    scale: 1.4),
                onDragging: (handlerIndex, lowerValue, upperValue) {
                  setState(() {
                    _lowerValue = lowerValue;
                    _upperValue = upperValue;
                  });
                },
              ),
            ),
            
            // 其他复杂配置...
            
            SizedBox(height: 50),
            Text('Lower Value: ' + _lowerValue.toString()),
            SizedBox(height: 25),
            Text('Upper Value: ' + _upperValue.toString())
          ],
        ),
      ),
    );
  }

  customHandler(IconData icon) {
    return FlutterSliderHandler(
      decoration: BoxDecoration(),
      child: Container(
        child: Container(
          margin: EdgeInsets.all(5),
          decoration: BoxDecoration(
              color: Colors.blue.withOpacity(0.3), shape: BoxShape.circle),
          child: Icon(icon, color: Colors.white, size: 23,),
        ),
        decoration: BoxDecoration(
          color: Colors.white,
          shape: BoxShape.circle,
          boxShadow: [
            BoxShadow(
                color: Colors.blue.withOpacity(0.3),
                spreadRadius: 0.05,
                blurRadius: 5,
                offset: Offset(0, 1))
          ],
        ),
      ),
    );
  }
}

以上就是关于 flutter_xlider 插件的基本介绍和使用方法，希望对你有所帮助！如果有任何问题或者想要了解更多细节，请参考官方文档或查阅更多资料。