Flutter自定义UI实战之一：画布篇

2024-03-06 10:14:59

Flutter作为谷歌开源的一款跨平台应用开发框架，凭借着简洁易用、性能优异的特点，深受广大开发者的喜爱。在Flutter中，我们可以通过CustomPaint组件自定义自己的UI元素。本系列文章将带你深入浅出地探索Flutter自定义UI的奥秘，从入门到实战，循序渐进。

前言

无论是何种前端UI系统，都会提供一个自绘UI的接口。这个接口通常会提供一个画布Canvas，里面封装了一些基本的API。开发者可以通过Canvas绘制各种自定义图形。

认识`Canvas`

Canvas是一个抽象类，代表一个二维绘图表面。我们可以通过CustomPaint组件来创建Canvas并进行绘制。CustomPaint组件接收一个Painter对象，该对象负责绘制实际的内容。

import 'package:flutter/material.dart';
import 'package:flutter/painting.dart';

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    // 绘制代码
  }

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

class CanvasPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CustomPaint(painter: MyPainter());
  }
}

基础图形绘制

Canvas提供了丰富的API，可以绘制各种各样的图形，包括：

点和线段
矩形和圆角矩形
圆形和椭圆
路径（可以绘制任意形状）

以下是几个简单的绘制示例：

// 绘制一个点
canvas.drawPoint(Offset(100, 100), Paint());

// 绘制一条线段
canvas.drawLine(Offset(100, 100), Offset(200, 200), Paint());

// 绘制一个矩形
canvas.drawRect(Rect.fromLTWH(100, 100, 100, 100), Paint());

// 绘制一个圆形
canvas.drawCircle(Offset(150, 150), 50, Paint());

// 绘制一个路径
Path path = Path();
path.moveTo(100, 100);
path.lineTo(200, 200);
path.lineTo(300, 100);
path.close();
canvas.drawPath(path, Paint());