Flutter教程实现自定义Painter绘制

在Flutter中实现自定义Painter绘制时遇到几个问题：

  1. 如何正确继承CustomPainter类并重写paint方法？我的绘制效果总是无法显示，不知道是否漏掉了关键步骤。
  2. 在canvas上绘制复杂图形（如贝塞尔曲线）时，坐标计算总是出错，有没有推荐的计算方法或工具？
  3. 性能优化方面，如何避免自定义绘制导致的UI卡顿？特别是在频繁重绘的场景下。
  4. 能否分享一个结合动画的自定义Painter完整示例？官方文档的例子比较简单，想学习更实际的用法。
  5. 绘制文本时如何实现自动换行和样式自定义？目前用drawText只能处理单行文本。
3 回复

要使用Flutter的CustomPainter实现自定义绘图，首先创建一个继承自CustomPainter的类，在其中重写paint方法完成绘制逻辑。例如，画一个简单的矩形：

import 'package:flutter/material.dart';

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

    // 绘制矩形
    canvas.drawRect(Rect.fromLTWH(0, 0, size.width, size.height), paint);
  }

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

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      body: Center(
        child: CustomPaint(
          painter: MyPainter(),
          size: Size(200, 200),
        ),
      ),
    ),
  ));
}

这里定义了一个MyPainter类，通过canvas.drawRect绘制了一个蓝色矩形。CustomPaint组件使用这个画家进行绘制，并设置大小为200x200像素。你可以根据需求修改paint方法中的绘图逻辑，比如添加渐变、路径或图片等。

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


以下是一个简单的 Flutter 自定义 Painter 示例：

  1. 创建一个继承自 CustomPainter 的类：
class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()..color = Colors.blue;
    canvas.drawRect(Rect.fromLTWH(0, 0, size.width, size.height), paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}
  1. 在 Widget 中使用 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('自定义 Painter')),
        body: Center(
          child: CustomPaint(
            size: Size(300, 300),
            painter: MyPainter(),
          ),
        ),
      ),
    );
  }
}

这段代码会绘制一个蓝色的矩形。你可以根据需要修改 paint 方法中的逻辑来实现更复杂的图形。

Flutter 自定义Painter绘制教程

在Flutter中，使用CustomPainter可以创建自定义绘制效果。下面是一个基础教程：

基础用法

import 'package:flutter/material.dart';

class MyCustomPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    // 在这里实现绘制逻辑
    final paint = Paint()
      ..color = Colors.blue
      ..strokeWidth = 5
      ..style = PaintingStyle.stroke;
    
    canvas.drawRect(
      Rect.fromLTWH(0, 0, size.width, size.height),
      paint,
    );
    
    // 画一个圆形
    canvas.drawCircle(
      Offset(size.width / 2, size.height / 2),
      50,
      Paint()..color = Colors.red,
    );
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false; // 如果不需要重绘返回false
  }
}

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

高级绘制技巧

  1. 绘制路径
void paint(Canvas canvas, Size size) {
  final path = Path();
  path.moveTo(50, 50);
  path.lineTo(150, 50);
  path.lineTo(100, 150);
  path.close(); // 闭合路径
  
  canvas.drawPath(
    path,
    Paint()..color = Colors.green,
  );
}
  1. 绘制文本
void paint(Canvas canvas, Size size) {
  final textPainter = TextPainter(
    text: TextSpan(
      text: 'Hello Flutter',
      style: TextStyle(color: Colors.black, fontSize: 24),
    ),
    textDirection: TextDirection.ltr,
  )..layout();
  
  textPainter.paint(canvas, Offset(50, 50));
}
  1. 动画绘制
class AnimatedPainter extends CustomPainter {
  final double progress;
  
  AnimatedPainter(this.progress);
  
  @override
  void paint(Canvas canvas, Size size) {
    // 使用progress值实现动画效果
    canvas.drawRect(
      Rect.fromLTWH(0, 0, size.width * progress, size.height),
      Paint()..color = Colors.orange,
    );
  }
  
  @override
  bool shouldRepaint(AnimatedPainter oldDelegate) {
    return oldDelegate.progress != progress;
  }
}

以上就是Flutter中自定义绘制的基础知识。你可以根据需要组合不同的绘制方法来实现复杂效果。

回到顶部