Flutter 121: 图解简易 Slider 滑动条

小菜在业务开发过程中会自定义 Slider 滑动条，而在自定义之前，小菜先简单了解一下 Flutter 自带的 Slider ；

创新互联专注于企业成都全网营销、网站重做改版、万源网站定制设计、自适应品牌网站建设、html5、商城系统网站开发、集团公司官网建设、成都外贸网站制作、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为万源等各大城市提供网站开发制作服务。

简单分析源码可得， Slider 是一个有状态的 StatefulWidget 组件，属性也很清晰易懂，其中滑动过程中对应的 value 值和 onChanged 回调是必须参数；

value 未滑动过程中对应的值，在 min 和 max 之间； onChanged 是在滑动过程中回调，当 onChanged 为 null 或 value 所在的 min 和 max 集合范围为空时， Slider 禁止滑动；

min 和 max 为滑动条范围，而 value 的取值范围是在 min 和 max 之间，无论 value 为正还是负，均需要在 min 和 max 之间；

activeColor 为滑动条已滑动过的颜色； inactiveColor 为滑动条中未滑动的颜色；两者均可以在 SliderTheme 中设置；

label 为滑动条滑动到某一节点的标签文案； divisions 是把 min 和 max 等分为 divisions 份数；只有在 divisions 生效时， label 才会展示；

onChangeStart 和 onChangeEnd 分别对应滑动过程中 value 值何时开始更改或何时完成更改时对应的回调；

Slider 的主题效果可以通过 SliderTheme 或 ThemeData.sliderTheme 中获取更新，相较于 Slider 只提供已滑动和未滑动颜色效果，属性粒度更细；

activeTrackColor 和 inactiveTrackColor 分别对应 Slider 已滑动过和未滑动过的轨道颜色；

thumbColor 对应滑动按钮颜色，而 overlayColor 对应滑动按钮映射的叠层颜色，通常设置为半透明状态； overlayShape 对应叠层样式；

valueIndicatorColor 对应 label 气泡颜色； valueIndicatorShape 对应气泡内文字属性； valueIndicatorShape 对应气泡样式，可以再此进行自定义气泡；

activeTickMarkColor 对应已选中刻度颜色； inactiveTickMarkColor 对应未选中刻度颜色； tickMarkShape 对应刻度样式；

trackHeight 为 Slider 轨道高度； trackShape 对应轨道样式，主要再此处进行自定义样式；

对于不可滑动状态， SliderThemeData 提供了对应属性；

Slider 案例源码

小菜本节暂未涉及自定义滑动条样式，对于底层的 Slider 了解还不够深入；如有错误，请多多指导！

flutter 中监听滑动事件

在移动端，各个平台或 UI 系统的原始指针事件模型基本都是一致，即：一次完整的事件分为三个阶段：手指按下、手指移动、和手指抬起，而更高级别的手势（如点击、双击、拖动等）都是基于这些原始事件的。

Flutter 中可以使用 Listener widget 来监听原始触摸事件，它也是一个功能性 widget。

Listener 的常见属性

用法如下：

加载更多需要对 ListView 进行监听，所以需要进行监听器的设置，在 State 中进行监听器的初始化。

2、使用上述的 Listener 来监听，通过 Listener 的 onPointerMove（手指在屏幕上滑动）来监听滑动的距离，当滑动到底部时加载更多数据

Flutter 滑动、缩放控件

onInteractionEnd 交互结束

onInteractionStart 交互开始

onInteractionUpdate 滑动时候一直会回调

focalPoint 是相对于屏幕左上角的偏移量。

localFocalPoint是相对于父容器区域左上角的偏移量。

scale缩放量。

horizontalScale水平缩放量。

verticalScale竖直缩放量。

rotation旋转量。------ 这里说明能监听到旋转量

还可以通过transformationController进行变换控制，有兴趣的可以自己研究。

参考文章

标题名称：flutter滑动定位,flutter左右滑动
标题来源：http://chengdu.cdxwcx.cn/article/phjjch.html