颤抖的画布图表并非总是出现

问题描述

我是不熟悉Canvas的新手，我使用CustomPainter在屏幕上绘制图表以及其他一些小部件。一切工作正常，但在某些情况下未显示图表。当我单击显示的日期时，应该显示该图表。例如，如果我单击第一天，它将显示，然后在第二天，如果我单击第三天，它将不显示，如果我今天返回第二天，它将显示。这种情况仅在一个月的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,canvas);
        _drawTextAt('11',Offset( lbMargin + xAxisPointsAt * 2,canvas);
        _drawTextAt('12am',Offset( lbMargin + xAxisPointsAt * 3,canvas);
        _drawTextAt('1',Offset( lbMargin + xAxisPointsAt * 4,canvas);
        _drawTextAt('2',Offset( lbMargin + xAxisPointsAt * 5,canvas);
        _drawTextAt('3',Offset( lbMargin + xAxisPointsAt * 6,canvas);
        _drawTextAt('4',Offset( lbMargin + xAxisPointsAt * 7,canvas);
        _drawTextAt('5',Offset( lbMargin + xAxisPointsAt * 8,canvas);
        _drawTextAt('6',Offset( lbMargin + xAxisPointsAt * 9,canvas);
        _drawTextAt('7am',Offset( lbMargin + xAxisPointsAt * 10,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);
    }
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）