流畅的自绘图形——Flutter中自定义绘制的无限可能

2024-01-08 12:08:12

前言

Flutter作为一款优秀的跨平台应用开发框架，除了拥有丰富的控件库外，还为开发者提供了强大的自定义绘制能力。通过CustomPaint，您可以直接在Canvas上绘制各种图形，实现更个性化的界面效果。

使用CustomPaint进行绘制

1. 绘制圆形

import 'package:flutter/material.dart';

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

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    canvas.drawCircle(Offset(100, 100), 50, Paint());
  }

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

2. 绘制文本

import 'package:flutter/material.dart';

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

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    canvas.drawText(TextSpan(text: 'Hello, World!'), Offset(100, 100), Paint());
  }

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

3. 绘制图片

import 'package:flutter/material.dart';

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

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    canvas.drawImage(Image.asset('assets/image.png'), Offset(100, 100), Paint());
  }

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

4. 绘制动画

import 'package:flutter/material.dart';

class CustomPaintPage extends StatefulWidget {
  @override
  _CustomPaintPageState createState() => _CustomPaintPageState();
}

class _CustomPaintPageState extends State<CustomPaintPage> with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this, duration: Duration(seconds: 2));
    _animation = Tween(begin: 0.0, end: 1.0).animate(_controller);
    _controller.repeat(reverse: true);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: CustomPaint(
        size: Size(200, 200),
        painter: MyPainter(_animation),
      ),
    );
  }
}

class MyPainter extends CustomPainter {
  final Animation<double> _animation;

  MyPainter(this._animation);

  @override
  void paint(Canvas canvas, Size size) {
    canvas.drawCircle(Offset(100, 100), 50 * _animation.value, Paint());
  }

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