Flutter滑动组件插件another_xlider的使用

another_xlider 是一个为Flutter设计的滑块组件，支持水平和垂直方向，提供丰富的自定义选项。它兼容RTL（从右到左）布局，并且拥有大量的配置项以满足不同场景的需求。

重要变更

• Flutter版本2.x - 使用1.1.1及以下版本。
• Flutter版本3.x - 使用1.1.2及以上版本。

快速上手

单个滑块

创建一个简单的单值滑块：

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

若需设置为RTL模式，只需添加rtl: true参数。

范围滑块

范围滑块允许同时选择两个值：

FlutterSlider(
  values: [30, 420],
  rangeSlider: true,
  max: 500,
  min: 0,
  onDragging: (handlerIndex, lowerValue, upperValue) {
    _lowerValue = lowerValue;
    _upperValue = upperValue;
    setState(() {});
  },
)

垂直轴

通过设置axis属性可以改变滑块的方向：

FlutterSlider(
  ...
  axis: Axis.vertical,
  ...
)

自定义元素

操作柄(Handler)

可以自定义操作柄的样式：

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,),
  ),
  ...
)

轨道(Trackbar)

轨道样式也可以根据需求调整：

FlutterSlider(
  ...
  trackBar: FlutterSliderTrackBar(
    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)
    ),
  ),
  ...
)

提示框(Tooltip)

提示框提供了多种定制方式：

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

高级特性

固定值(Fixed Values)

当需要一系列固定的值时，可使用fixedValues属性：

FlutterSlider(
  ...
  fixedValues: [
    FlutterSliderFixedValue(percent: 0, value: "1000"),
    FlutterSliderFixedValue(percent: 10, value: "10K"),
    ...
  ],
  ...
)

忽略区间(Ignore Steps)

某些情况下可能希望跳过特定区间：

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

标记(Hatch Mark)

用于在滑块下方或旁边添加刻度线：

FlutterSlider(
  ...
  hatchMark: FlutterSliderHatchMark(
    density: 0.5,
    labels: [
      FlutterSliderHatchMarkLabel(percent: 0, label: Text('Start')),
      ...
    ],
  ),
  ...
)

完整示例代码

下面是一个包含上述特性的完整示例：

import 'package:flutter/material.dart';
import 'package:another_xlider/another_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 = 200;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title!),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: <Widget>[
            _singleSlider(),
            _rangeSlider(),
            _customHandler(),
            _tooltipExample(),
            _hatchMarkWithLabels(),
          ],
        ),
      ),
    );
  }

  FlutterSliderHandler customHandler(IconData icon) {
    return FlutterSliderHandler(
      decoration: BoxDecoration(),
      child: Container(
        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))
          ],
        ),
        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,
          ),
        ),
      ),
    );
  }

  Widget _singleSlider() {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: ListTile(
        title: Text('Single Slider'),
        subtitle: Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Expanded(
              child: FlutterSlider(
                handlerWidth: 30,
                handlerHeight: 30,
                values: [_lowerValue],
                max: 100,
                min: 0,
                tooltip: FlutterSliderTooltip(disabled: true),
                trackBar: FlutterSliderTrackBar(activeTrackBar: BoxDecoration(color: Colors.blue.withOpacity(0.5))),
                onDragging: (handlerIndex, lowerValue, upperValue) {
                  setState(() {
                    _lowerValue = lowerValue;
                  });
                },
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(left: 8.0),
              child: Text(
                '${_lowerValue.toInt()} %',
                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _rangeSlider() {
    // 省略了部分代码...
  }

  // 其他方法如_customHandler、_tooltipExample等...
}

此代码片段展示了如何结合使用another_xlider的各种功能来构建复杂的用户界面。您可以根据实际项目需求进行适当调整。