解锁 scratcher 高级能力reset 与 reveal 程序化控制刮刮卡的完整攻略【免费下载链接】scratcherScratch card widget which temporarily hides content from user.项目地址: https://gitcode.com/gh_mirrors/sc/scratcherFlutter 刮刮卡插件scratcher是一个能够暂时隐藏内容的 Scratch card 组件用户用手指刮开涂层露出下方隐藏的图片、文字或奖励。但很多新手只停留在手动刮开这一步其实 scratcher 还提供了强大的程序化控制能力——通过reset与reveal两个方法你可以像遥控器一样重置刮刮卡、直接揭晓答案。这篇完整攻略将带你从零掌握 ScratcherState 的调用技巧做出更智能的抽奖与解密交互。为什么需要程序化控制刮刮卡手动刮开体验固然有趣但真实业务里往往需要人为干预用户看完广告后直接reveal揭晓奖励不用真刮中奖后想再来一次一键reset重置刮刮卡页面尺寸变化、动画播放完毕后自动重置涂层。这些场景都离不开GlobalKey 绑定 ScratcherState的编程方式这正是本文的核心内容。准备工作安装与引入 scratcher在pubspec.yaml中添加依赖dependencies: scratcher: ^2.5.0运行flutter pub get后在代码中引入import package:scratcher/scratcher.dart;该插件支持 Android、iOS 以及 WebCanvasKit平台你可以放心使用。最简刮刮卡示例先跑起来先写一个最小可用的刮刮卡用一张海滩风景图作为遮盖层下方隐藏奖励文字Scratcher( brushSize: 30, threshold: 50, color: Colors.grey, onChange: (value) print(已刮开: $value%), onThreshold: () print(达标你赢了!), child: Container(height: 300, color: Colors.blue), )threshold: 50表示刮开 50% 区域即触发onThreshold回调brushSize控制画笔大小越大刮得越快。核心步骤用 GlobalKey 绑定 ScratcherState程序化控制的关键一步是为 Scratcher 组件绑定全局 Keyfinal scratchKey GlobalKeyScratcherState(); Scratcher( key: scratchKey, child: /* 你的奖励内容 */, )拿到scratchKey.currentState后就能调用reset()和reveal()两个公开方法。完整参数说明可参考源码 lib/widgets.dart 中的ScratcherState定义。reset() 方法详解一键重置刮刮卡状态 reset会把刮刮卡恢复到初始状态涂层重新盖满、进度归零、回调状态清空。最实用的是它的可选参数duration——传入后涂层会以淡出动画重新铺满而不是瞬间跳变scratchKey.currentState.reset( duration: Duration(milliseconds: 2000), );两点注意动画播放期间刮擦是锁定的结束后自动恢复reset()会自动调用一次onChange(0)可用于同步界面进度条。在官方示例 example/lib/basic.dart 中就通过按钮触发reset实现重玩一次的效果。reveal() 方法详解直接揭晓刮刮卡内容 reveal用于立即展示全部内容同样支持duration参数实现平滑过渡scratchKey.currentState.reveal( duration: Duration(milliseconds: 2000), );它的行为特点若定义了threshold会顺带触发一次onThreshold回调仅一次自动调用onChange(100)方便更新进度 UI调用后canScratch置为 false用户无法再刮。这个 API 非常适合看视频解锁答案倒计时结束自动揭晓等玩法。实战场景把 reset 和 reveal 用起来 场景一签到抽奖。用户签到后先 reveal 展示中奖结果点击再刮一次按钮调用 reset 重新开始。场景二广告激励。播放广告期间涂层不可刮enabled: false结束后调用 reveal 直接放奖。场景三三连击彩蛋。参考 example/lib/scratch_box.dart 的做法收集多个刮刮卡完成次数达标后统一 reveal 并播放缩放动画把AnimationController与刮刮卡状态联动起来。进阶技巧让刮刮卡体验更顺滑 ✨精度调优ScratchAccuracy分 low / medium / high 三档低精度性能更好适合元素多的页面回调串联结合onScratchStart、onScratchUpdate、onScratchEnd监控刮擦全过程图片涂层image参数可传入自定义图片作为涂层配合rebuildOnResize在布局变化时自动重置。总结scratcher 的核心价值不只是能刮更在于通过reset 与 reveal 程序化控制把刮刮卡变成可编程的交互组件。从绑定GlobalKeyScratcherState开始你就能自由掌控重置与揭晓时机再结合动画时长与回调轻松打造出专业级的抽奖与解密体验。现在就动手改造你的第一个刮刮卡吧【免费下载链接】scratcherScratch card widget which temporarily hides content from user.项目地址: https://gitcode.com/gh_mirrors/sc/scratcher创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
