Flutter 自定义绘制图形示例

在Flutter中如何使用CustomPaint实现自定义图形绘制？比如我想画一个带渐变的五角星，但不太清楚如何计算坐标点和处理绘制逻辑。能否提供一个完整的示例代码，包括如何设置画笔属性、处理Canvas绘制以及如何将自定义图形嵌入到Widget树中？另外，在性能优化方面，有哪些需要注意的地方？

3 回复

以下是一个简单的 Flutter 自定义绘制图形的示例：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('自定义绘制示例')),
        body: Center(
          child: CustomPaint(
            size: Size(200, 200),
            painter: MyPainter(),
          ),
        ),
      ),
    );
  }
}

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.blue
      ..style = PaintingStyle.fill;

    final path = Path();
    path.moveTo(0, size.height * 0.5);
    path.lineTo(size.width * 0.5, size.height * 0.1);
    path.lineTo(size.width, size.height * 0.5);
    path.lineTo(size.width * 0.5, size.height * 0.9);
    path.close();

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}

这个例子中，我们创建了一个自定义的 CustomPainter，并使用 Canvas 绘制了一个四边形。你可以根据需要修改路径和样式来绘制不同的图形。

更多关于Flutter 自定义绘制图形示例的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


以下是一个简单的 Flutter 自定义绘制图形的示例：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('自定义绘制图形')),
        body: CustomPaintExample(),
      ),
    );
  }
}

class CustomPaintExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: CustomPaint(
        size: Size(200, 200),
        painter: MyCustomPainter(),
      ),
    );
  }
}

class MyCustomPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..color = Colors.blue
      ..style = PaintingStyle.stroke
      ..strokeWidth = 10;

    Offset center = Offset(size.width / 2, size.height / 2);
    canvas.drawCircle(center, 50, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }
}

这个例子中，CustomPaint 组件用于自定义绘制，通过 MyCustomPainter 类实现。这里绘制了一个蓝色的圆形，设置其半径为50，并且有10像素的描边宽度。

以下是一个简单的Flutter自定义绘制图形的示例，使用CustomPaint绘制一个自定义的三角形和圆形：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter自定义绘制')),
        body: Center(
          child: CustomPaint(
            size: Size(300, 300),
            painter: MyPainter(),
          ),
        ),
      ),
    );
  }
}

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.blue
      ..style = PaintingStyle.fill;
    
    // 绘制三角形
    final path = Path();
    path.moveTo(size.width / 2, 50); // 顶点
    path.lineTo(size.width - 50, size.height - 50); // 右下角
    path.lineTo(50, size.height - 50); // 左下角
    path.close(); // 闭合路径
    canvas.drawPath(path, paint);
    
    // 绘制圆形
    canvas.drawCircle(
      Offset(size.width / 2, size.height / 2), // 圆心位置
      50, // 半径
      paint..color = Colors.red, // 修改颜色
    );
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
}

关键点说明：

  1. CustomPaint 是用于自定义绘制的Widget
  2. CustomPainter 类实现具体绘制逻辑
  3. paint() 方法中使用 Canvas 进行绘制
  4. 可以绘制基本图形（圆形、矩形等）或使用 Path 绘制复杂形状
  5. shouldRepaint 决定是否需要重绘（这里返回false表示不需要重绘）
回到顶部