Flutter教程自定义绘制图形

在Flutter中如何使用CustomPaint实现自定义图形绘制？我想绘制一个带渐变色的圆角矩形，但不知道如何控制画笔的属性和渐变效果。具体问题如下：

  1. 如何设置Paint对象的渐变填充而不是纯色？
  2. 怎么通过CustomPainter的canvas绘制精确的圆角矩形路径？
  3. 绘制时遇到性能问题，是否需要考虑重绘边界或复用Paint对象？
    希望能得到带代码示例的解答，最好能说明如何优化绘制性能。
3 回复

作为屌丝程序员，教你用Flutter自定义绘制图形，简单高效。首先在CustomPainter中重写paint方法，使用Canvas类实现绘制。例如画一个红色圆：

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()..color = Colors.red;
    canvas.drawCircle(Offset(size.width / 2, size.height / 2), 50, paint);
  }

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

// 使用
CustomPaint(painter: MyPainter())

想画矩形？替换drawCircle为drawRect，传入Rect即可。还可设置渐变色、虚线等，通过Paint对象配置StrokeCap、StrokeJoin、Path等。记得在StatefulWidget中调用CustomPaint，避免重复绘制提高性能。屌丝编程不求复杂，够用就行！

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


作为一个屌丝程序员，我建议从最简单的CustomPainter开始。首先创建一个继承自CustomPainter的类，在paint方法中通过canvas完成绘制，比如画个矩形：

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint()..color = Colors.blue;
    canvas.drawRect(Rect.fromLTWH(0, 0, 100, 100), paint);
  }

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

然后在Widget树中使用CustomPaint包裹，并指定MyPainter：

CustomPaint(
  painter: MyPainter(),
)

进阶可以学习Path、Canvas提供的更多API，比如画圆、弧线、贝塞尔曲线等。同时注意理解Paint的属性如strokeWidth、strokeCap、blendMode等。

掌握Transform进行图形变换也很重要。多动手实践，尝试绘制更复杂的图形，比如绘制折线图、饼图等实用图形。坚持下去，你会逐渐精通自定义绘制。

Flutter自定义绘制图形教程

在Flutter中，你可以使用CustomPaint和CustomPainter来创建自定义图形。以下是基本实现方法：

基础使用

import 'package:flutter/material.dart';

class MyCustomPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    // 在这里绘制图形
    final paint = Paint()
      ..color = Colors.blue
      ..style = PaintingStyle.fill;
    
    // 示例：绘制一个圆形
    canvas.drawCircle(
      Offset(size.width / 2, size.height / 2),
      size.width / 3,
      paint,
    );
  }

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

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

常用绘制方法

  1. 绘制形状:

    // 矩形
canvas.drawRect(Rect.fromLTWH(0, 0, 100, 100), paint);

// 圆角矩形
canvas.drawRRect(RRect.fromRectAndRadius(
  Rect.fromLTWH(0, 0, 100, 100), 
  Radius.circular(10)
), paint);

// 路径(自定义形状)
Path path = Path();
path.moveTo(0, 0);
path.lineTo(50, 100);
path.lineTo(100, 0);
canvas.drawPath(path, paint);

  2. 绘制文本:

    TextPainter textPainter = TextPainter(
  text: TextSpan(text: 'Hello', style: TextStyle(color: Colors.black)),
  textDirection: TextDirection.ltr,
);
textPainter.layout();
textPainter.paint(canvas, Offset(10, 10));

高级技巧

  • 使用..shader创建渐变效果
  • 组合多个绘制操作创建复杂图形
  • 使用clipPath裁剪画布
  • 实现动画效果(结合AnimationController)

记住，shouldRepaint方法优化性能，只在需要重绘时返回true。

回到顶部