Flutter 实现“斑马纹”背景（需要变换颜色）.doc
版权申诉
159 浏览量
2022-07-13
10:56:27
上传
评论
收藏 616KB DOC 举报
Flutter 实现“斑马纹”背景（需要变换颜色）
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 方法 绘制出斑马纹。
@override
评论0
最新资源