Flutter – 滑块和 RangeSlide

滑块是一个小部件，用于从应用程序的给定范围中选择一个值。我们可以滑动该值并从中选择所需的值。我们不需要安装任何依赖项来实现滑块。

Range Slider与 Slider 小部件非常相似，但我们可以从给定范围中选择连续的值范围，而不是选择单个值。

执行：

滑块：

滑块小部件可以通过简单地使用滑块小部件并提供范围值来实现。此小部件采用两个必需参数：

1. value：这里我们需要在应用程序启动时传递默认值，并且应该是 double 类型。
2. onChanged：只要滑块值发生变化，就会触发此函数，并且我们会得到一个可用于进一步处理的双精度值。

这是 Slider 的语法。

Dart

Slider(
  value: value,
  onChanged: (value) {    
  },
),

范围滑块：

RangeSlider 小部件是通过使用名为 RangeSlider 的小部件实现的。此小部件采用两个必需参数：

1. values：这里我们需要传递具有开始和结束的 RangeValues 类型的数据。
2. onChanged：只要范围值发生更改并且我们得到 RangeValue 值，就会触发此函数。

Dart

RangeSlider(
  values: RangeValues(start, end),
  onChanged: (value) {},
)

示例 1：滑块小部件

在这里，我们创建了一个年龄选择器滑块。用户可以滑动滑块并选择一个值。

Dart

import 'package:flutter/material.dart';
  
class SliderTutorial extends StatefulWidget {
  const SliderTutorial({Key? key, required this.title}) : super(key: key);
  final String title;
  @override
  _SliderTutorialState createState() => _SliderTutorialState();
}
  
class _SliderTutorialState extends State {
  int age = 10;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Slider(
            label: "Select Age",
            value: age.toDouble(),
            onChanged: (value) {
              setState(() {
                age = value.toInt();
              });
            },
            min: 5,
            max: 100,
          ),
          Text(
            "Your Age: " + age.toString(),
            style: const TextStyle(
              fontSize: 32.0,
            ),
          ),
        ],
      ),
    );
  }
}

输出：

示例 2： RangeSlider 小部件

在此示例中，我们将实现 RangeSlider 小部件。我们需要分别创建两个双精度值 start 和 end 来实现 RangeSlider。这是代码。

Dart

import 'package:flutter/material.dart';
  
class RangeSliderTutorial extends StatefulWidget {
  const RangeSliderTutorial({Key? key, required this.title}) : super(key: key);
  final String title;
  @override
  _RangeSliderTutorialState createState() => _RangeSliderTutorialState();
}
  
class _RangeSliderTutorialState extends State {
  double start = 30.0;
  double end = 50.0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          RangeSlider(
            values: RangeValues(start, end),
            labels: RangeLabels(start.toString(), end.toString()),
            onChanged: (value) {
              setState(() {
                start = value.start;
                end = value.end;
              });
            },
            min: 10.0,
            max: 80.0,
          ),
          Text(
            "Start: " +
                start.toStringAsFixed(2) +
                "\nEnd: " +
                end.toStringAsFixed(2),
            style: const TextStyle(
              fontSize: 32.0,
            ),
          ),
        ],
      ),
    );
  }
}

输出：