Flutter 自定义 CustomPaint 实现彩带飘落效果 点击关注公众号，“技术干货”及时达！ 在本文中，我们将探讨如何在Flutter中创建一个引人入胜的彩带飘落效果。这种效果可以为您的应用增添节日气氛，非常适合用于庆祝或特殊成就的场景。我们将逐步分解实现过程，讨论使用的关键概念和Flutter技术。 概述我们的 FallingConfettiWidget 是一个自定义 widget，它创建了一个彩色彩带碎片从屏幕上方落下的动画效果。它使用 Flutter Hooks 进行状态管理，并使用 CustomPaint 进行高效渲染。让我们深入了解主要组件及其协同工作的方式。 ConfettiPiece 类首先，我们定义一个 ConfettiPiece 类来表示每一片彩带： classConfettiPiece{ finalColorcolor; finaldoublewidth; finaldoubleheight; finaldoubleangle; double double finaldoublespeed; ConfettiPiece({ requiredthis.color, requiredthis.width, requiredthis.height, requiredthis.angle, requiredthis.x, requiredthis.y, requiredthis.speed, } 这个类封装了定义和动画化单个彩带碎片所需的所有属性。 FallingConfettiWidget主要的 widget，FallingConfettiWidget，被实现为一个 HookWidget。这允许我们使用 Flutter Hooks 来管理状态和副作用。 状态管理我们使用两个 useState hooks 来管理我们的状态： finalconfetti=useStateListConfettiPiece([]); finalsize=useState(Size.zero); confetti 保存我们的彩带碎片列表，而 size 跟踪 widget 的尺寸。 生成彩带_generateConfetti 方法创建我们的初始彩带碎片集： ListConfettiPiece_generateConfetti(Randomrandom,ListColorcolors,Sizesize,intcount){ returnList.generate(count,(index){ finalpieceWidth=random.nextDouble()*10+10; finalpieceHeight=pieceWidth*(0.5+random.nextDouble()*0.3); returnConfettiPiece( color:colors[random.nextInt(colors.length)], width:pieceWidth, height:pieceHeight, angle:random.nextDouble()*2*pi, x:random.nextDouble()*size.width, y:random.nextDouble()*size.height, speed:random.nextDouble()*2+1, } 这个方法生成一个 ConfettiPiece 对象列表，每个对象都有在指定范围内的随机属性。 动画逻辑我们使用 useEffect hook 来设置我们的动画计时器： useEffect((){ finaltimer=Timer.periodic(16.milliseconds,(timer){ confetti.value=confetti.value.map((piece){ piece.y+=piece.speed; if(piece.ysize.value.height){ piece.y=-piece.height; piece.x=random.nextDouble()*size.value.width; } returnpiece; }).toList(); return()=timer.cancel(); },[size.value]); 这个效果每16毫秒运行一次（约60FPS），更新每个彩带碎片的位置。当一个碎片落到屏幕底部时，它会被重新定位到顶部，并获得一个新的随机x坐标。 响应式布局我们使用 LayoutBuilder 来使我们的 widget 具有响应性： returnLayoutBuilder( builder:(context,constraints){ WidgetsBinding.instance.addPostFrameCallback((_){ updateSize(Size(constraints.maxWidth,constraints.maxHeight)); returnClipRect( child:CustomPaint( painter:ConfettiPainter(confetti:confetti.value), size:Size(constraints.maxWidth,constraints.maxHeight), ), }, ); LayoutBuilder 允许我们获取 widget 的尺寸约束。我们使用 addPostFrameCallback 在布局完成后更新我们的尺寸状态，确保我们不会在构建阶段触发重建。 ConfettiPainterConfettiPainter 类扩展了 CustomPainter，负责实际绘制我们的彩带碎片： classConfettiPainterextendsCustomPainter{ finalListConfettiPiececonfetti; ConfettiPainter({requiredthis.confetti}); @override voidpaint(Canvascanvas,Sizesize){ finalpaint=Paint(); for(finalpieceinconfetti){ if(piece.y=-piece.heightpiece.y=size.height){ paint.color=piece.color; canvas.save(); canvas.translate(piece.x,piece.y); canvas.rotate(piece.angle); canvas.drawRect( Rect.fromCenter(center:Offset.zero,width:piece.width,height:piece.height), paint, canvas.restore(); } } } @override boolshouldRepaint(covariantCustomPainteroldDelegate)=true; } 这个类高效地绘制每个彩带碎片，根据需要应用平移和旋转。为了优化性能，我们只绘制在可见区域内或刚好在可见区域上方的碎片。 结论FallingConfettiWidget 展示了几个高级 Flutter 概念： 使用自定义绘制进行高效渲染使用 Flutter Hooks 进行状态管理和副作用处理使用 LayoutBuilder 实现响应式设计使用裁剪保持边界整洁使用 Timer 实现高效动画通过结合这些技术，我们创建了一个视觉上吸引人且性能良好的彩带效果，可以轻松集成到任何 Flutter 应用中。这个 widget 展示了 Flutter 的灵活性如何允许用相对简洁的代码构建创意和引人入胜的 UI 元素。 您可以根据具体需求自定义颜色、大小和动画参数。祝您编码愉快，愿您的应用充满欢乐庆祝的气氛！ 使用方法要在您的 Flutter 应用中使用这个 FallingConfettiWidget，只需将其添加到您的 widget 树中即可。例如： classMyHomePageextendsStatelessWidget{ @override Widgetbuild(BuildContextcontext){ returnScaffold( body:Stack( children:[ //您的其他UI组件 FallingConfettiWidget(numberOfPieces:100), ], ), } } 这将在您的应用背景中创建飘落的彩色彩带效果。您可以通过调整 numberOfPieces 参数来增加或减少彩带的数量。 进一步优化「性能优化」：对于大量彩带，考虑使用 RepaintBoundary 来限制重绘区域。 「多样化形状」：扩展 ConfettiPainter 以支持多种形状，如圆形、三角形等。 「交互性」：添加触摸事件处理，让用户可以与彩带互动。 「动画曲线」：使用不同的 Curve 来创造更有趣的落下效果。 「配置选项」：增加更多可定制的参数，如彩带颜色、大小范围、下落速度等。 通过这些优化，您可以创建一个更加丰富和可定制的彩带效果，为您的 Flutter 应用增添更多乐趣和互动性。 点击关注公众号，“技术干货”及时达！ 阅读原文