由于工作中项目需求,需要将H5转换为Flutter代码。
其中的斑马纹背景需要根据接口返回的颜色来渲染,所以不能只是图片形式,无法通过decoration属性配
由于工作中项目需求,需要将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 void paint(Canvas canvas, Size size) { … canvas. drawLine(); }
斑马纹坐标位置计算
2.82 = 2倍根号2
1.41 = 根号二
- 填充个数= 最大高度 / (画笔宽度1.41+间距) 向上取整。(从0, 0开始,左侧会露出空位,所以需要填充)
- 条纹个数 = 宽度/(画笔宽度1.41+间距) 向上取整。
- (x轴y轴) 偏移量 =画笔宽度 / 2.82 (画笔起始点、结束点会露出一小节,需要计算x,y偏移量。将左上角x,y减去偏移量,右下角x,y加上偏移量,补充此部分)
- 起点坐标 =((画笔宽度1.41+间距) * 条纹index – 偏移量,– 偏移量)
- 终点坐标 =((画笔宽度1.41+间距) * 条纹index - 偏移量+高度, 高度+偏移量)
圆角裁剪(如果需要)
由于画笔绘制的是直角的,所以作为背景板会超出,需要裁剪掉四个角。使用
ClipRRect( borderRadius: BorderRadius.all(Radius.circular(10)), child: xxx )
作为背景
使用Stack布局,实现斑马纹在下方作为背景板,需要展示的内容在上方
Stack( children: [ buildZebraBack(…), 需要展示的内容 ] )
代码
使用处 main_page.dart
Stack( children: [ Positioned( child: ZebraStripesBack( width: 335, height: 44, lineWidth: 10, spacing: 10, borderRaduis: 10, lineColor: Colors.blue), top: 0, left: 0, ), Container( width: 335, height: 44, alignment: Alignment.center, padding: EdgeInsets.only( top: 10, left: 12, bottom: 10, right: 12), child: Text( "英语", style: TextStyle( color: Color(0xFFFFFFFF), fontSize: 14.sp, fontWeight: FontWeight.w500), ) ) ] )
斑马纹具体实现类 zebra_stripes_back.dart
import 'dart:math'; import 'package:flutter/material.dart'; // 斑马纹具体实现类 class ZebraStripesBack extends StatefulWidget { ZebraStripesBack({ this.width: 0, this.height: 0, this.spacing: 4, this.lineWidth: 4, this.lineColor: Colors.transparent, this.borderRaduis: 0, }); final double width; // 容器宽度 final double height; // 容器高度 final double lineWidth; // 斑马纹宽度 final double spacing; // 间距 final double borderRaduis; // 容器圆角 final Color lineColor; // 斑马纹颜色 @override State<StatefulWidget> createState() => _ZebraStripesBackState(); } class _ZebraStripesBackState extends State<ZebraStripesBack> { @override void initState() { super.initState(); } @override void dispose() { super.dispose(); } @override Widget build(BuildContext context) { return ClipRRect( borderRadius: BorderRadius.all(Radius.circular(widget.borderRaduis)), child: CustomPaint( size: Size(widget.width, widget.height), painter: _ZebraStripesBackPainter( maxWidth: widget.width, maxHeight: widget.height, spacing: widget.spacing, lineWidth: widget.lineWidth, lineColor: widget.lineColor, borderRaduis: widget.borderRaduis, ), )); } } class _ZebraStripesBackPainter extends CustomPainter { _ZebraStripesBackPainter({ this.maxWidth: 0, this.maxHeight: 0, this.spacing: 4, this.lineWidth: 4, this.lineColor: Colors.black12, this.borderRaduis: 0, }); final double maxWidth; final double maxHeight; final double spacing; final double lineWidth; final Color lineColor; final double borderRaduis; @override void paint(Canvas canvas, Size size) { var paint = Paint() ..isAntiAlias = true ..style = PaintingStyle.fill ..color = lineColor ..strokeWidth = lineWidth; int number = 0; // 个数 int fillNumber = 0; // 填充个数 double lineAndSpace = lineWidth *1.41 + spacing; // 单个条纹宽 + 间距宽 if (lineWidth > 0) { number = (maxWidth / lineAndSpace).ceil(); fillNumber = (maxHeight / lineAndSpace).ceil(); // 填充个数 } double deviation = lineWidth / 2.82; // x y轴偏移量 = width / 2倍根号2 for (int i = -fillNumber; i < number; i++) { var left = lineAndSpace * i - deviation; double dx = left; double dy = -deviation; double dx1 = left + maxHeight; double dy1 = maxHeight + deviation; canvas.drawLine( Offset(dx, dy), Offset(dx1, dy1), paint, ); } } @override bool shouldRepaint(CustomPainter oldDelegate) => true; }
计算过程解释
偏移量计算过程
填充个数计算过程
为什么画笔宽度需要乘 根号二?
缺少-填充
缺少-偏移量
以上就是Android Flutter实现"斑马纹"背景的示例代码的详细内容,更多关于Flutte斑马纹背景的资料请关注好代码网其它相关文章!