Flutter - Slider

Flutter - Slider 首页 / Flutter入门教程 / Flutter - Slider

Flutter中的滑块(Slider)是用于选择值范围的小部件。无涯教程可以在其中拖动或按下所需的位置来设置值的范围。每当无涯教程更改Slider位置时，都会调用onChanged()函数。

Slider提供了最小和最大参数来设置最小和最大限制。例如，无涯教程有一组值从0.0到50.0，除法是10，Slider将采用0.0、10.0、20.0、30.0、40.0和50.0之类的值。

Slider属性

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

属性类型描述
value Double必需参数，用于指定滑块的当前值。
onChanged Double必需参数，并且在拖动时为滑块选择新值。如果它为null，则禁用滑块。
onChangedStart Double可选参数，并在开始选择新值时调用。
onChangedEnd Double可选参数，并在结束时调用。
max Double可选参数，最大值。默认情况下，它是1.0。
min Double可选参数，最小值。默认情况下，它是0.0。
divisions int数值。如果它为null，则滑块是连续的。
labelstring文本标签。
activeColor Class Color活动部分颜色。
inactiveColor Class Color非活动部分颜色。
SemanticFormatterCallback它是一个回调，用于创建语义值。默认情况下，它是一个百分比。

Flutter中的滑块使用以下术语

Thumb                      -   当无涯教程通过拖动更改值时，它是一个水平滑动的圆形。

Track                         -   这是一条水平线，无涯教程可以在其中滑动拇指。

Overlay                     -  拖动时它​​会出现在拇指周围。

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

Value indicators    - 当无涯教程定义标签时，它将显示拇指值的标签。

Active                         -  它是滑块的活动面，介于拇指和最小值之间。

Inactive                     -  它是滑块的非活动侧，介于拇指和最大值之间。

使用Slider Widget

以下是使用Flutter中的滑块小部件的基本示例。

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

让无涯教程借助示例了解如何在Flutter中使用滑块。在下面的代码中，无涯教程将值存储为整数，在将其作为值参数传递时，必须首先将其转换为双精度，然后在onChanged方法中将其四舍五入为整数。无涯教程还将滑块的活动部分指定为green，而未活动部分为orange。

复制代码
import 'package:flutter/material.dart';

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

// 这个小部件是主要的应用小部件。
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 {
  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 Slider

Range Slider

滑块组件可以基于连续或离散的一组值提供单个或多个选择。在这里，无涯教程必须预先确定一个最小值或最大值才能在一个方向上调整选择。与滑块不同，范围滑块(Range Slider)允许两个选择点，这些选择点提供灵活的调整以设置最大值和最小值。

请参见下面的代码，其中范围值的间隔为10，因为无涯教程已将滑块从0到100分为10个部分。这意味着无涯教程的值被分为0、10、20、30、40，依此类推，直到100。在这里，无涯教程将使用20和50初始化范围值。

复制代码
import 'package:flutter/material.dart';

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

//这个小部件是主要的应用小部件。
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 {
  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。

链接：https://www.learnfk.comhttps://www.learnfk.com/flutter/flutter-slider.html

来源：LearnFk无涯教程网

Flutter Slider

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

Flutter Slider

Image Slider

图像滑块(Image Slider)是在无涯教程的应用程序中显示图像，视频或图形的便捷方式。通常，它会一次在无涯教程的应用程序屏幕上显示一个大图像。它有助于使无涯教程的屏幕对用户更具吸引力。

让无涯教程看看如何在Flutter中制作图像滑块。 Flutter库中有许多依赖项可用于在您的应用中创建滑动图像。在这里，无涯教程将使用flutter_swipper依赖项。因此，首先，无涯教程需要在puspec.yaml文件中添加以下依赖项：

复制代码
dependencies:
  flutter:
    sdk: flutter
  flutter_swiper: ^1.1.6

接下来，在DART文件中添加此依赖项，如下所示:

复制代码
 import 'package:flutter_swiper/flutter_swiper.dart';

以下代码以一种简单的方式说明了flutter_swipper库的用法。在这里，无涯教程从屏幕上显示的网络中拍摄了一张图像。

复制代码
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 Slider

祝学习愉快！(内容编辑有误？请选中要编辑内容 -> 右键 -> 修改 -> 提交！)

技术教程推荐

技术与商业案例解读 -〔徐飞〕

趣谈网络协议 -〔刘超〕

从0打造音视频直播系统 -〔李超〕

摄影入门课 -〔小麥〕

正则表达式入门课 -〔涂伟忠〕

手把手教你玩音乐 -〔邓柯〕

大厂广告产品心法 -〔郭谊〕

快手 · 移动端音视频开发实战 -〔展晓凯〕

AI大模型系统实战 -〔Tyler〕

好记忆不如烂笔头。留下您的足迹吧 :)
休闲君评测 |  TOOLFK工具网 |  chrome插件网 |  古诗文网 |  良许Linux教程网 |  Python之禅 |  红色石头 |  豪评测 |  入党申请书 | 

© 2020 Hi LearnFk 意见反馈 免责声明 关于我们 桂ICP备11002319号-3 友链&广告位+QQ: 1963612630