Flutter的专属Skia引擎解析+用法原理

在Flutter中，Skia是一个非常重要的部分，因为它负责渲染图层、图像、文本等。以下是一个简单的例子，展示如何使用Skia来绘制一个简单的图形：

import 'package:flutter/widgets.dart';
import 'package:flutter/rendering.dart';
 
class CustomPaintWidget extends SingleChildRenderObjectWidget {
  @override
  RenderCustomPaint createRenderObject(BuildContext context) {
    return RenderCustomPaint(
      painter: MyCustomPainter(),
    );
  }
}
 
class MyCustomPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    // 使用Skia的API绘制一个简单的蓝色矩形
    canvas.drawRect(
      const Rect.fromLTRB(10.0, 10.0, 100.0, 100.0),
      Paint()..color = const Color(0xFF42A5F5),
    );
  }
 
  @override
  bool shouldRepaint(MyCustomPainter oldDelegate) {
    return false; // 如果不需要重新绘制，返回false
  }
}
 
void main() {
  runApp(Center(
    child: CustomPaintWidget(),
  ));
}

在这个例子中，我们创建了一个CustomPaintWidget类，它继承自SingleChildRenderObjectWidget。在createRenderObject方法中，我们创建了一个RenderCustomPaint对象，并指定了一个自定义的MyCustomPainter。在MyCustomPainter的paint方法中，我们使用Canvas来绘制一个蓝色的矩形。最后，在main方法中，我们将这个自定义的绘画组件置于应用的中心。这个例子展示了如何将Skia的绘图能力集成到Flutter应用中。