Flutter Slider 滑动条的基本使用

分手后的思念是犯贱 2023-10-07 15:44 27阅读 0赞

> 在码农的世界里，优美的应用体验，来源于程序员对细节的处理以及自我要求的境界，年轻人也是忙忙碌碌的码农中一员，每天、每周，都会留下一些脚印，就是这些创作的内容，有一种执着，就是不知为什么，如果你迷茫，不妨来瞅瞅码农的轨迹。

*  [优美的音乐节奏带你浏览这个效果的编码过程][Link 1]
 *  [坚持每一天，是每个有理想青年的追求][Link 2]
 *  [追寻年轻人的脚步，也许你的答案就在这里][Link 3]
 *  [如果你迷茫 不妨来瞅瞅这里][Link 4]

--------------------

Flutter滑动条 Slider 的详细配置使用

--------------------

import 'package:flutter/cupertino.dart';
    import 'package:flutter/material.dart';
    
    /// 创建人： Created by zhaolong
    /// 创建时间：Created by  on 2020/12/25.
    ///
    /// 可关注公众号：我的大前端生涯   获取最新技术分享
    /// 可关注网易云课堂：https://study.163.com/instructor/1021406098.htm
    /// 可关注博客：https://blog.csdn.net/zl18603543572
    ///
    
    main() {
        
      runApp(
        MaterialApp(
          debugShowCheckedModeBanner: false,
          home: AppRootPage(),
        ),
      );
    }
    
    class AppRootPage extends StatefulWidget {
        
      @override
      State<StatefulWidget> createState() {
        
        return new _AppRootPageState();
      }
    }
    
    class _AppRootPageState extends State<AppRootPage> {
        
      @override
      Widget build(BuildContext context) {
        
        return Scaffold(
          appBar: AppBar(
            title: Text("滑动条"),
          ),
          //居中
          body: Center(
            child: Container(
              width: 240,
              height: 120,
              child: buildThem(),
            ),
          ),
        );
      }
    
      //Slider的值
      double _sliderValue = 1.0;
    
      Widget buildThem() {
        
        return Theme(
          data: ThemeData(
            sliderTheme: SliderThemeData(
              trackHeight: 1,
              //滑块的颜色
              thumbColor: Colors.deepOrange,
              //滑块的大小
                thumbShape: RoundSliderThumbShape(enabledThumbRadius: 10),
              //点击滑块边缘的颜色
              overlayColor: Colors.deepPurpleAccent.withOpacity(0.2),
              //点击滑块边缘的显示半径
              overlayShape: RoundSliderOverlayShape(overlayRadius: 20),
              //滑动左侧滚动条的颜色
              activeTrackColor: Colors.blue,
              //滚动条右侧的颜色
              inactiveTrackColor: Colors.grey,
              //任何情况都显示气泡
              showValueIndicator: ShowValueIndicator.always,
              //气泡的文字样式
              valueIndicatorTextStyle: TextStyle(color: Colors.white),
              //气泡的背景
              valueIndicatorColor: Colors.redAccent
            )
          ),
          child: buildSliderWidget(),
        );
      }
    
      Widget buildSliderWidget() {
        
        return Slider(
          //Slider的当前的值  0.0 ~ 1.0
          value: _sliderValue,
          min: 1.0,
          max: 100.0,
          //平均分成的等分
          divisions: 100,
          //滚动时会回调
          onChanged: (double value) {
        
            _sliderValue = value;
            print("Value $_sliderValue");
            setState(() {
        });
          },
          onChangeStart: (double startValue) {
        
            print("开始滚动");
          },
          onChangeEnd: (double endValue) {
        
            print("停止 滚动");
          },
          //滑块以及滑动左侧的滚动条颜色
          // activeColor: Colors.redAccent,
          //滑块右侧的滚动条颜色
          // inactiveColor: Colors.blue,
          //气泡
          label: "${_sliderValue.toStringAsFixed(1)}",
        );
      }
    }

完毕

不局限于思维，不局限语言限制，才是编程的最高境界。

以小编的性格，肯定是要录制一套视频的，随后会上传

有兴趣 你可以关注一下 [西瓜视频 — 早起的年轻人][Link 5]

![在这里插入图片描述][20201031094959816.gif_pic_center]

[Link 1]: https://www.bilibili.com/video/BV1QX4y1G7Sh/
[Link 2]: https://www.zhihu.com/zvideo/1348960604003180544
[Link 3]: https://www.ixigua.com/6933784858019758595
[Link 4]: https://biglead.blog.csdn.net/article/details/93532582
[Link 5]: https://www.toutiao.com/c/user/token/MS4wLjABAAAAYMrKikomuQJ4d-cPaeBqtAK2cQY697Pv9xIyyDhtwIM/
[20201031094959816.gif_pic_center]: https://img-blog.csdnimg.cn/20201031094959816.gif#pic_center