如何用Flutter制作可变色斑马纹背景？

本文共计1097个文字，预计阅读时间需要5分钟。

Flutter实现条纹背景功能，因项目中需求，需将H5转换为Flutter代码。其中，条纹背景需根据接口返回的颜色来渲染，不能仅是图片形式，无法通过decoration属性配置图片。

Flutter 实现“斑马纹”背景

由于工作中项目需求，需要将H5转换为Flutter代码。
其中的斑马纹背景需要根据接口返回的颜色来渲染，所以不能只是图片形式，无法通过decoration属性配置图片背景板。

楼主这边想到的方法就是通过 实现一个canvas绘制斑马纹类。使用Stack布局，将斑马纹放在下方作为背景板，需要展示的内容在上方。
实现 “斑马纹”背景（需要变换颜色）

文章主要分为 效果图、实现思维、代码、计算过程解释。希望对大家有所帮助

最终效果图

实现思维 斑马纹（45°角，向左倾斜）

使用CustomPaint(size: Size(width, height), painter: 画笔)

CustomPaint( size: Size(widget.width, widget.height), painter: 画笔, ) 画笔

继承 CustomPainter类，实现paint(Canvas canvas, Size size)方法，根据 宽度、高度、画笔宽度、间距 计算出各个点位。使用canvas. drawLine方法 绘制出斑马纹。