Flutter Widget 之Slider, RangeSlider和CupertinoSlider

需要快速从一些列的值中做选择吗？

Slider widget可以帮你从中选出一个值,将所需的onChanged函数设置为用户交互响应，传递min和max参数以更改可选范围

Slider(
    value: rating,
    onChanged: (newRating) {
        setState(() => rating = newRating);
    },
    min: 0,
    max: 100,
)

带有divisions的Slider将停留在某些点上

Slider(
    value: rating, 
    onChanged: (newRating) {
        setState(() => rating = newRating);
    },
    divisions: 4,
),

设置label参数，则可以在拖动Slider时

Slider(
    value: rating, 
    onChanged: (newRating) {
        setState(() => rating = newRating);
    },
    divisions: 4,
    label: "$rating",
),

然而，若想从一些列值中选出一个子集，又该怎么做呢？ RangleSlider widget可以在RangeValue类别中选择查找两个值

var selectedRangle = RangeValues(0.2, 0.8);

RangeSlider(
    valuews: selectedTange,
    onChanged: (RangeValues newRange) {
        setState(() => selectedRangle = newRange);
    },
);

您可以在RangeSlider中设置min、max、division和lable参数

var selectedRangle = RangeValues(0.2, 0.8);

RangeSlider(
    valuews: selectedTange,
    onChanged: (RangeValues newRange) {
        setState(() => selectedRangle = newRange);
    },
    min: 0,
    max: 100,
    divissions: 10,
    labels: RangeLabels('${selectedRange.start}', '${selectedRange.end}');
);

若您想让iOS用户在使用上顺手一些,则可以改用CupertinoSlider

CupertinoSlider(
    value: rating,
    onChanged: (newRating) {
        setState(() => rating = newRating);
    }
),

你亦可以创建一个自适应Slider,基于平台显示Cupertino或Material Slider

Slider.adaptive(
    value: value,
    onChanged: (newValue) {
        setState(() => value = newValue);
    }
)

如果想了解有关Slider、RangeSlider、CupertinoSlider的内容，或者关于Flutter的其他功能，请访问flutter.dev

原文翻译自视频：视频地址