1

我是 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);
    }
}

在此处输入图像描述

在此处输入图像描述 在此处输入图像描述

4

0 回答 0