flutter图解,简书 flutter

Flutter 121: 图解简易 Slider 滑动条

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

成都创新互联公司主要从事成都网站制作、成都网站设计、网页设计、企业做网站、公司建网站等业务。立足成都服务东胜,十余年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18980820575

简单分析源码可得， 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 22: 图解 PopupMenu 那些事儿

小菜需要处理标题栏弹出对话框 PopupMenu 样式， Flutter 当然提供了一些处理方式，类似 PopupMenuEntry 等，小菜仅就最基础的使用方式进行初步的学习和整理。

PopupMenuItem 为单个 item 的弹出样式，默认为 48px 高，可根据需求自行定义。 item 中可以自定义需要的样式，包括文字图片等一系列样式。

Tips: 若需要处理带图标的样式时，官网提供的 Demo 是借助的 ListTile 来处理的，但是小菜测试发现图标与文字距离偏大，原因在于 ListTile 默认左侧图标 leading 距离不可直接调整，建议用 Row 或其他方式调整。

CheckedPopupMenuItem 是一个带有复选标记的弹出菜单项。默认高度同样是 48px ，水平布局使用 ListTile 复选标记是 Icons.done 图标，显示在 leading 位置；同时只有在状态为选中时才会显示图标。

PopupMenuDivider 是一条水平分割线，注意数组要使用父类 PopupMenuEntry ，配合其他 item 样式共同使用。 PopupMenuDivider 可以调整高度，但无法调整颜色，有需要的话可以进行自定义。

PopupMenu 默认的弹框位置都是在右上角，且会挡住标题栏，如果有需要在其他位置弹框就需要借助 showMenu ，主要通过 position 属性定位弹框位置。

menu 的宽高与内容相关，小菜的理解是在水平和竖直方向上会将设置的 position 位置加上 menu 宽高，再与屏幕匹配，超过屏幕宽高，根据 position 按照 LTRB 顺序贴近屏幕边框展示。

Tips: 如果 item 个数过多也无需担心，Flutter 支持默认超过屏幕滑动效果。

小菜目前的学习还仅限于基本的使用，稍高级的自定义涉及较少，如果又不对的地方还希望多多指出。

Flutter 56: 图解自定义 BubbleWidget 气泡插件

小菜在学习时需要用到气泡效果，为了更加灵活，小菜封装了一个简单的 flutter_bubble 气泡插件，方便日常的使用；

小菜准备用 Canvas 的 drawPath 进行绘制，主要分为三个部分，圆角弧线，普通直线，尖角折线，均可由 drawPath 自带方法绘制；小菜以前整理过关于 Canvas 绘制的小博客，实现很简单；

小菜绘制了一个简陋的原型图，整体黑框为 Bubble Widget 整体范围；蓝色圆弧为圆角位置；红色尖角可根据上下左右参数进行配置，且只可展示一个，尖角的高度和角度可自由配置，当确定一个尖角位置时，其余三个方向宽高延伸到黑框部分；而橙线则是连接圆角与尖角等直线；中间空余部分为子 Widget 位置； Tips: Child Widget 宽高小于等于 Bubble Widget ；

首先在边角处绘制四个圆弧，直接用 arcTo 即可，需要注意的是：小菜整体以 drawPath 方式实现，准备从左上角开始顺时针绘制，所以绘制圆弧时也是顺时针方向；

小菜理解， Rect 为绘制圆角的矩形，包括位置及大小； startAngele 为起始角度； sweepAngle 为绘制弧形角度；小菜需要的四个圆弧大小均为 pi/2 ，只需调整矩形位置与起始角度即可；

其次绘制尖角，小菜的尖角是由 lineTo 两段直线拼接起来的，只需要处理起点与终点即可；小菜为了更加灵活，可以设置尖角高度与尖角角度(0 ~ 180)，通过三角函数进行计算；

最后就是将处理好的连接起来，小菜为了适应更多场景，尖角位置也可自由配置，长度为到圆角的距离，默认为边框中间位置；

小菜将配置逻辑编辑好发布到 Pub 库，基本 BubbleWidget 便完成，简单分析一下可配置项；

自定义 Bubble Widget 是小菜发布的第二款 Pub 插件，还有很多不完善的地方，如有错误请多多指导！