Flutter Widget 之CustomPaint

你是否像创建一个极其自定义的用户界面？

使用Flutter，您可以访问低级别的绘画调用。

这些都很快很有效率而且能让你构建光滑图形

比如，使用圆形实现材料墨水波纹效果

首先，向窗口树添加CustomPaint Widget

赋予它一个大小和画笔

CustomPaint (
    size: Size(200, 100),
    painter: MyPainter(),
)

然后部署画笔，这是一个简单的类，它扩展了CustomPainter并实现两个方法paint和shouldRepaint

class MyPainter extends CustomPainter {
    @override
    void paint(Canvas canvax, Size size) {
        // ...
    }

    @override
    bool shouldRepaint(CustomPainter old) {
        // ...
    }
}

重建CustomPainter时会调用shouldRepaint方法， 你可以告诉框架重用以前的绘制结果。

class MyPainter extends CustomPainter {
    @override
    void paint(Canvas canvax, Size size) {
        canvas.drawLine(...);
    }

    @override
    bool shouldRepaint(CustomPainter old) {
        return old.myParameter != myParameter;
    }
}

paint方法是获取画布的地方，可以自由绘制。

你可以绘制线条、矩形、圆形、弧形、路径、位图图像、Nine patches、甚至是文本段落、并且您可以完全控制如何绘制这些颜色、着色器，混合模式等

canvas.drawLine()
canvas.drawRect()
canvas.drawCircle()
canvas.drawArc()
canvas.drawPath()
canvas.drawImage()
canvas.drawImageNine()
canvas.drawParagraph()

如果想了解有关CustomPaint的内容，或者关于Flutter的其他功能，请访问flutter.io

原文翻译自视频：视频地址