Flutter 滑块

17 Mar 2025 | 6 分钟阅读

在Flutter中，滑块是一个Material Design的widget，用于选择一个范围的值。它是一个输入widget，我们可以通过拖动或按下所需位置来设置一系列值。在本文中，我们将展示如何在Flutter中使用滑块widget来设置值的范围，以及如何自定义滑块的外观。

通常，我们使用滑块widget来改变一个值。因此，需要将该值存储在一个变量中。这个widget有一个滑块类，它需要onChanged()函数。每当我们改变滑块的位置时，就会调用这个函数。

滑块可以用于从连续或离散的一组值中选择一个值。默认情况下，它使用一个连续的值范围。如果我们想使用离散的值，我们必须为divisions使用一个非空值。这个离散的划分表示离散间隔的数量。在获取值之前，我们必须设置最小值和最大值。滑块提供min和max参数来设置最小和最大的限制。例如，我们有一组从0.0到50.0的值，divisions是10，那么滑块将取值为0.0, 10.0, 20.0, 30.0, 40.0, 和 50.0。

滑块属性

以下是在Flutter中使用的滑块属性。它有两个必需的参数，所有其他的都是可选的。

属性	类型	描述
值	double	这是一个必需的参数，用于指定滑块的当前值。
onChanged	double	这是一个必需的参数，在用户为滑块选择一个新值时，在拖动期间调用。如果它为null，则滑块被禁用。
onChangedStart	double	这是一个可选的参数，当我们开始选择一个新值时被调用。
onChangedStart	double	这是一个可选的参数，当我们在为滑块选择一个新值时完成时被调用。
max	double	这是一个可选的参数，它决定了用户可以使用的最大值。默认情况下，它是1.0。它应该大于或等于min。
min	double	这是一个可选的参数，它决定了用户可以使用的最小值。默认情况下，它是0.0。它应该小于或等于max。
divisions	int	它决定了离散划分的数量。如果它为null，则滑块是连续的。
label	string	它指定将显示在滑块上方的文本标签。它显示了离散滑块的值。
activeColor	class Color	它决定了滑块轨道活动部分的颜色。
inactiveColor	class Color	它决定了滑块轨道非活动部分的颜色。
SemanticFormatterCallback		这是一个回调，用于创建一个语义值。默认情况下，它是一个百分比。

Flutter中的滑块使用以下术语

Thumb：这是一个圆形，当我们通过拖动改变值时，它会水平滑动。

Track：这是一条水平线，我们可以在上面滑动Thumb。

Overlay：在拖动时，它出现在Thumb周围。

Tick marks：它用于标记滑块的离散值。

Value indicators：当我们定义标签时，它将显示Thumb值的标签。

Active：它是滑块的活动侧，位于Thumb和最小值之间。

Inactive：它是滑块的非活动侧，位于Thumb和最大值之间。

如何在Flutter中使用滑块widget？

以下是在Flutter中使用滑块widget的基本示例。

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

示例

让我们通过一个例子来了解如何在Flutter中使用滑块。在下面的代码中，我们将该值存储为整数，当它作为value参数传递时，必须先转换为double，然后在onChanged方法中四舍五入为整数。我们还将滑块的活动部分指定为绿色，而非活动部分指定为橙色。

import 'package:flutter/material.dart';

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

// This Widget is the main application widget.
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MySliderApp(),
    );
  }
}

class MySliderApp extends StatefulWidget {
  MySliderApp({Key key}) : super(key: key);

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

class _MySliderAppState extends State<MySliderApp> {
  int _value = 6;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Slider Demo'),
        ),
        body: Padding(
          padding: EdgeInsets.all(15.0),
            child: Center(
                child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    mainAxisSize: MainAxisSize.max,
                    children: [
                      Icon(
                        Icons.volume_up,
                        size: 40,
                      ),
                      new Expanded(
                          child: Slider(
                            value: _value.toDouble(),
                            min: 1.0,
                            max: 20.0,
                            divisions: 10,
                            activeColor: Colors.green,
                            inactiveColor: Colors.orange,
                            label: 'Set volume value',
                            onChanged: (double newValue) {
                              setState(() {
                                _value = newValue.round();
                                });
                              },
                              semanticFormatterCallback: (double newValue) {
                                return '${newValue.round()} dollars';
                              }
                            )
                      ),
                    ]
                )
            ),
          )
      );
  }
}

输出

当我们在IDE中运行这个应用程序时，我们应该得到类似于下面的屏幕截图的UI。在这里，我们可以拖动滑块来设置音量标签。

Flutter范围滑块

它是一个高度可定制的组件，用于从一系列值中选择一个值。它可以从连续或离散的一组值中选择。

为什么使用范围滑块？

基于连续或离散的值集，滑块组件可以提供单选或多选。在这里，我们必须预先确定最小值或最大值来调整一个方向的选择。与滑块不同，范围滑块允许两个选择点，从而提供灵活的调整来设置最大值和最小值。当我们要控制一个特定范围时，比如指示时间长度或价格点时，这种调整使其成为一个有用的特性。

请看下面的代码，范围值是10的间隔，因为我们将滑块从0到100分成了10个部分。这意味着我们的值在0, 10, 20, 30, 40, 等等，一直到100之间。这里，我们将用20和50来初始化范围值。

import 'package:flutter/material.dart';

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

// This Widget is the main application widget.
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MySliderApp(),
    );
  }
}

class MySliderApp extends StatefulWidget {
  MySliderApp({Key key}) : super(key: key);

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

class _MySliderAppState extends State<MySliderApp> {
  RangeValues _currentRangeValues = const RangeValues(20, 60);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Flutter Range Slider Demo'),
        ),
        body: Padding(
          padding: EdgeInsets.all(15.0),
          child: Center(
              child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  mainAxisSize: MainAxisSize.max,
                  children: [
                    Icon(
                      Icons.volume_up,
                      size: 40,
                    ),
                    new Expanded(
                        child: RangeSlider(
                          values: _currentRangeValues,
                          min: 0,
                          max: 100,
                          divisions: 10,
                          labels: RangeLabels(
                            _currentRangeValues.start.round().toString(),
                            _currentRangeValues.end.round().toString(),
                          ),
                          onChanged: (RangeValues values) {
                            setState(() {
                              _currentRangeValues = values;
                            });
                          },
                        )
                    ),
                  ]
              )
          ),
        )
    );
  }
}

输出

当我们在IDE中运行这个应用程序时，我们应该得到类似于下面的屏幕截图的UI。

当我们拖动滑块时，我们可以看到值的范围来设置音量标签。

Flutter图片滑块

图片滑块是一种在我们的应用程序中显示图片、视频或图形的便捷方式。通常，它会在我们的应用程序屏幕上一次显示一张大图片。它有助于使我们的屏幕对用户更具吸引力。

让我们看看如何在Flutter中创建一个图片滑块。在Flutter库中有许多依赖关系可以用来在你的应用程序中创建一个滑动图像。这里，我们将使用flutter_swiper依赖。因此，首先，我们需要在puspec.yaml文件中添加下面的依赖关系

dependencies:
  flutter:
    sdk: flutter
  flutter_swiper: ^1.1.6

接下来，像下面这样在你的dart文件中添加这个依赖关系

示例

下面的代码简单地解释了flutter_swiper库的使用。在这里，我们从网络上获取了一张图片，显示在屏幕上。

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

void main(){ runApp(MyApp()); }

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: MyHomeScreen()
    );
  }
}

class MyHomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Flutter Image Slider Demo"),),
      body: Container(
          padding: EdgeInsets.all(10),
          margin: EdgeInsets.all(5),
          alignment: Alignment.center,
          constraints: BoxConstraints.expand(
              height: 225
          ),
          child: imageSlider(context)),
    );
  }
}

Swiper imageSlider(context){
  return new Swiper(
    autoplay: true,
    itemBuilder: (BuildContext context, int index) {
      return new Image.network(
        "https://lh3.googleusercontent.com/wIcl3tehFmOUpq-Jl3hlVbZVFrLHePRtIDWV5lZwBVDr7kEAgLTChyvXUclMVQDRHDEcDhY=w640-h400-e365-rj-sc0x00ffffff",
        fit: BoxFit.fitHeight,
      );
    },
    itemCount: 10,
    viewportFraction: 0.7,
    scale: 0.8,
  );
}

输出

当我们在IDE中运行这个应用程序时，我们应该得到类似于下面的屏幕截图的UI。在这里，图片会自动滑动。

下一个主题Flutter开关

← 上一个下一个 →

Flutter 滑块

滑块属性

Flutter中的滑块使用以下术语

如何在Flutter中使用滑块widget？

示例

Flutter范围滑块

为什么使用范围滑块？

Flutter图片滑块

示例

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Flutter 教程

Dart 编程

Flutter 基础

Flutter 小部件

Flutter 路由

高级概念

差异

面试题

Flutter 滑块

滑块属性

Flutter中的滑块使用以下术语

如何在Flutter中使用滑块widget？

示例

Flutter范围滑块

为什么使用范围滑块？

Flutter图片滑块

示例

相关帖子

Flutter 图表

Flutter 文本

Flutter 按钮

Flutter Container

Flutter 开关

Flutter 列表

Flutter 文本字段

Flutter 表单

Flutter 动画

Flutter 表格

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器