Flutter范围选择器插件cupertino_range_slider_improved的使用

描述

Cupertino Range Slider 是一个Flutter插件，它提供了一个滑块组件，帮助用户从一组值中选择一个范围。这个组件的设计遵循了iOS风格的Cupertino设计语言。

使用方法

以下是一个简单的例子，演示如何使用CupertinoRangeSlider来创建一个范围选择器：

示例代码

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

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

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  double minValue = 20.0;
  double maxValue = 80.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Cupertino Range Slider Demo'),
      ),
      body: Container(
        margin: EdgeInsets.all(10.0),
        child: Column(
          children: <Widget>[
            RangeSliderItem(
              title: 'Happiness',
              initialMinValue: 20,
              initialMaxValue: 80,
              onMinValueChanged: (v) => setState(() => minValue = v.toDouble()),
              onMaxValueChanged: (v) => setState(() => maxValue = v.toDouble()),
            ),
            // 更多的RangeSliderItem可以添加在这里
          ],
        ),
      ),
    );
  }
}

class RangeSliderItem extends StatefulWidget {
  final String title;
  final int initialMinValue;
  final int initialMaxValue;
  final ValueChanged<int> onMinValueChanged;
  final ValueChanged<int> onMaxValueChanged;

  const RangeSliderItem({
    Key? key,
    required this.title,
    required this.initialMinValue,
    required this.initialMaxValue,
    required this.onMinValueChanged,
    required this.onMaxValueChanged,
  }) : super(key: key);

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

class _RangeSliderItemState extends State<RangeSliderItem> {
  late int minValue;
  late int maxValue;

  @override
  void initState() {
    super.initState();
    minValue = widget.initialMinValue;
    maxValue = widget.initialMaxValue;
  }

  @override
  Widget build(BuildContext context) {
    return FilterItemHolder(
      title: widget.title,
      value: '$minValue-$maxValue',
      child: CupertinoRangeSlider(
        minValue: minValue.roundToDouble(),
        maxValue: maxValue.roundToDouble(),
        min: 1.0,
        max: 100.0,
        onMinChanged: (minVal) {
          setState(() {
            minValue = minVal.round();
            widget.onMinValueChanged(minValue);
          });
        },
        onMaxChanged: (maxVal) {
          setState(() {
            maxValue = maxVal.round();
            widget.onMaxValueChanged(maxValue);
          });
        },
      ),
    );
  }
}

class FilterItemHolder extends StatelessWidget {
  final String title;
  final String value;
  final Widget? child;

  FilterItemHolder({Key? key, required this.title, this.value = '', this.child})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Container(
          margin: const EdgeInsets.fromLTRB(0.0, 24.0, 0.0, 12.0),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Expanded(
                child: Text(
                  title,
                  maxLines: 1,
                  overflow: TextOverflow.clip,
                  style: TextStyle(
                    color: const Color(0xFF000000),
                    fontSize: 12.0,
                    fontWeight: FontWeight.w600,
                  ),
                ),
              ),
              Text(
                value,
                style: TextStyle(
                  color: const Color(0xFF000000),
                  fontSize: 12.0,
                  fontWeight: FontWeight.w600,
                ),
              )
            ],
          ),
        ),
        Container(
          padding: const EdgeInsets.only(left: 20.0, right: 20.0),
          decoration: BoxDecoration(
            color: Color(0xFFFFFFFF),
            borderRadius: const BorderRadius.all(const Radius.circular(5.0)),
          ),
          child: Container(
            height: 47.0,
            child: ConstrainedBox(
              constraints: BoxConstraints.expand(),
              child: child!,
            ),
          ),
        )
      ],
    );
  }
}

在这个示例中，我们创建了一个MyHomePage页面，其中包含一个RangeSliderItem，用于展示和操作范围选择器。每个RangeSliderItem都允许用户调整最小值和最大值，并实时更新界面上显示的数值范围。此外，通过设置回调函数onMinValueChanged和onMaxValueChanged，可以在用户改变滑块位置时执行自定义逻辑。