我是 Flutter Canvas 的新手,我使用 CustomPainter 在屏幕上绘制图表以及其他一些小部件。一切正常,只是图表在某些情况下没有出现。当我单击显示的日期时,应该显示图表。例如,如果我单击第 1 天它会显示,然后在第 2 天它不会显示如果我单击第 3 天它会显示如果我今天返回 2 它会显示。这只会在一个月的 2 或 3 天发生,有时它会持续一整天。
另外,我注意到,当所选日期的图表未显示时,当我关闭当前屏幕并通过按应用栏上的退格键返回上一个屏幕时,它会出现一瞬间。
child: Container(
margin: EdgeInsets.only(bottom: 15.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(7))
),
child: CustomPaint(
painter: GenerateChart( widget.sleepData ),
),
),
class GenerateChart extends CustomPainter
{
final double lbMargin = 30.0;
double xAxisPointsAt = 0.00;
double leaveSpace = 20.00;
double chartHgt = 100.00;
double drawPosition = 0.00;
double slpDuration = 0.00;
double slpStartedTime = 0.00;
int initialGap = 0;
double prvsSlpDuration = 0.00;
int slpLvl = 0;
final List sleepTrends;
GenerateChart(this.sleepTrends);
@override
void paint( Canvas canvas, Size size )
{
List<Color> grClrL = [
const Color(0xff6982ab),
const Color(0xffafc8f1),
];
List<Color> grClrD = [
const Color(0xff147ad6),
const Color(0xff64caff),
];
List<Color> grClrA = [
const Color(0xfff92a3c),
const Color(0xfffbb5Bc),
];
List<Color> grClrR = [
const Color(0xff909090),
const Color(0xffccccc),
];
var paintXAxis = Paint()
..color = Colors.green[800]
..style = PaintingStyle.stroke
..strokeWidth = 1.0;
var paint = Paint()
..style = PaintingStyle.fill;
var paintArea;
if ( sleepTrends.length > 0 )
initialGap = sleepTrends[0]['gap'];
slpStartedTime = ( ( initialGap * 100 ) / 60 );
drawPosition = lbMargin + ( ( slpStartedTime * xAxisPointsAt ) / 100 );
prvsSlpDuration = slpDuration;
for ( var i = 0; i < sleepTrends.length; i++ )
{
slpDuration = ( double.parse(sleepTrends[i]['duration']) * xAxisPointsAt ) / 100;
slpLvl = int.parse(sleepTrends[i]['level']);
paintArea = Offset(drawPosition, size.height - chartHgt - lbMargin) & Size(slpDuration, chartHgt);
paint.shader = LinearGradient(
begin: Alignment.topRight,
end: Alignment.bottomCenter,
colors: ( slpLvl == 0 ) ? grClrD : ( slpLvl == 1 ) ? grClrL : ( slpLvl == 2 ) ? grClrR : grClrA,
).createShader( paintArea );
canvas.drawRect( paintArea, paint );
prvsSlpDuration = slpDuration;
drawPosition = drawPosition + prvsSlpDuration;
chartHgt = ( chartHgt == 100 ) ? 97 : ( chartHgt == 97 ) ? 100 : 97;
}
Offset hzStartingPoint = Offset(lbMargin, size.height - lbMargin);
Offset hzEndingPoint = Offset(size.width - lbMargin, size.height - lbMargin);
canvas.drawLine(hzStartingPoint, hzEndingPoint, paintXAxis);
xAxisPointsAt = ( size.width - ( lbMargin * 2 ) ) / 11;
_drawTextAt('9pm', Offset( lbMargin, size.height - leaveSpace ), canvas);
_drawTextAt('10', Offset( lbMargin + xAxisPointsAt * 1, size.height - leaveSpace ), canvas);
_drawTextAt('11', Offset( lbMargin + xAxisPointsAt * 2, size.height - leaveSpace ), canvas);
_drawTextAt('12am', Offset( lbMargin + xAxisPointsAt * 3, size.height - leaveSpace ), canvas);
_drawTextAt('1', Offset( lbMargin + xAxisPointsAt * 4, size.height - leaveSpace ), canvas);
_drawTextAt('2', Offset( lbMargin + xAxisPointsAt * 5, size.height - leaveSpace ), canvas);
_drawTextAt('3', Offset( lbMargin + xAxisPointsAt * 6, size.height - leaveSpace ), canvas);
_drawTextAt('4', Offset( lbMargin + xAxisPointsAt * 7, size.height - leaveSpace ), canvas);
_drawTextAt('5', Offset( lbMargin + xAxisPointsAt * 8, size.height - leaveSpace ), canvas);
_drawTextAt('6', Offset( lbMargin + xAxisPointsAt * 9, size.height - leaveSpace ), canvas);
_drawTextAt('7am', Offset( lbMargin + xAxisPointsAt * 10, size.height - leaveSpace ), canvas);
}
@override
bool shouldRepaint( CustomPainter oldDelegate )
{
return false;
}
void _drawTextAt( String text, Offset position, Canvas canvas )
{
final textStyle = TextStyle(
color: Colors.black,
fontSize: 11,
);
final textSpan = TextSpan(
text: text,
style: textStyle,
);
final textPainter = TextPainter(
text: textSpan,
textDirection: TextDirection.ltr,
textAlign: TextAlign.center);
textPainter.layout(minWidth: 5, maxWidth: 30);
Offset drawPosition =
Offset(position.dx, position.dy - (textPainter.height / 2));
textPainter.paint(canvas, drawPosition);
}
}