Question

滑块必须根据用户输入使用 n 个拇指。需要选择百分比范围。我刚刚开始使用 Flutter。我已经能够很好地遵循一些教程。非常感谢任何帮助！

class _SliderScreenState extends State<SliderScreen> {
  RangeValues values = RangeValues(1, 100);
  RangeLabels labels = RangeLabels('1', "100");
  double _currentSliderValue = 20;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter RangeSlider Demo'),
      ),
      
      body: SliderTheme(
        data: SliderThemeData(
          trackHeight: 10,
        ),
        child: RangeSlider(
            divisions: 5,
            activeColor: Colors.red[700],
            inactiveColor: Colors.red[300],
            min: 1,
            max: 100,
            values: values,
            labels: labels,
            onChanged: (value) {
              print("START: ${value.start}, End: ${value.end}");

              setState(() {
                values = value;
                labels = RangeLabels("${value.start.toInt().toString()}\$",
                    "${value.start.toInt().toString()}\$");
              });
            }),
      ),
    );
  }
}

Answer 1

我推荐的一个软件包是使用 https://pub.dev/packages/syncfusion_flutter_sliders，它带有多种自定义选项，具有强大的性能。

PS：他们的 API 文档也很出色，这使得它更易于使用。

Answer 2

来吧，随心所欲地修改

class _SliderScreenState extends State<SliderScreen> {
  RangeValues values = RangeValues(1, 100);
  RangeLabels labels = RangeLabels('1', "100");
  int divisions = 5;
  List strLabels = [];

  @override
  void initState() {
    super.initState();

    strLabels = [for (var i = 0; i <= values.end; i += (values.end ~/ divisions)) i];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter RangeSlider Demo'),
      ),
      
      body: ListView(
         shrinkWrap: true,
         children: [
         Container(
                width: MediaQuery.of(context).size.width * .95,
                child: Column(
                  children: [
                    SliderTheme(
                      data: SliderThemeData(
                        trackHeight: 10,
                      ),
                      child: RangeSlider(
                        divisions: divisions,
                        activeColor: Colors.red[700],
                        inactiveColor: Colors.red[300],
                        min: 1,
                        max: 100,
                        values: values,
                        labels: labels,
                        onChanged: (value) {
                          print("START: ${value.start}, End: ${value.end}");

                          setState(() {
                            values = value;
                            labels = RangeLabels(
                                "${value.start.toInt().toString()}\$", "${value.start.toInt().toString()}\$");
                          });
                        },
                      ),
                    ),
                    Padding(
                      padding: EdgeInsets.symmetric(horizontal: MediaQuery.of(context).size.width * .05),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: strLabels.map((i) {
                          print(i);
                          return Text('$i%');
                        }).toList(),
                      ),
                    ),
                  ],
                ),
              ),
       ],
      ),
    );
  }
}

如何在颤振中创建自定义范围滑块小部件？

2 个答案: