用 Flutter canvas 绘制渐变

2023-10-24 01:37:25

掌握 Flutter 中的渐变：创建令人惊叹的视觉效果

在 Flutter 中，渐变不仅是一项简单的设计技巧，更是一种提升你应用程序视觉吸引力的强大工具。通过掌握 Shader 类，你可以轻松地在画布上呈现令人惊叹的色彩过渡，让你的界面充满活力。

绘制渐变的基础

要在 Flutter 画布上绘制渐变，我们依靠 Shader 类。它提供了创建各种渐变类型所需的工具，包括线性、径向和扫描渐变。

线性渐变

线性渐变在两个点之间创建一个平滑的颜色过渡。要创建它，请使用 LinearGradient 类，指定开始和结束颜色以及渐变的方向。

Shader shader = LinearGradient(
  begin: Alignment.topLeft,
  end: Alignment.bottomRight,
  colors: [Colors.red, Colors.blue],
).createShader(rect);

径向渐变

径向渐变从一个中心点向外发散颜色。使用 RadialGradient 类，指定中心点、半径和颜色列表来创建它。

Shader shader = RadialGradient(
  center: Offset(100, 100),
  radius: 100,
  colors: [Colors.red, Colors.blue],
).createShader(rect);

扫描渐变

扫描渐变围绕一个中心点旋转颜色。使用 SweepGradient 类，指定中心点、开始和结束角度以及颜色列表来创建它。

Shader shader = SweepGradient(
  center: Offset(100, 100),
  startAngle: 0,
  endAngle: 2 * pi,
  colors: [Colors.red, Colors.blue],
).createShader(rect);

用混合模式和混合方法控制渐变

除了创建基本的渐变外，你还可以使用混合模式和混合方法来微调它们的外观。混合模式控制渐变与画布上现有颜色融合的方式，而混合方法指定计算渐变颜色的方式。

Flutter 提供了多种混合模式，例如 srcOver、srcIn 和 dstOver，可通过 BlendMode 类进行访问。混合方法包括替换、相乘、叠加和覆盖，由 BlendFunction 类指定。

填充画布

创建 Shader 对象后，就可以用它来填充画布了。使用 canvas.drawPaint() 方法，将 Paint 对象作为参数传递，其中包含 Shader 属性。

canvas.drawPaint(Paint()..shader = shader);

代码示例

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: CustomPaint(
          painter: MyPainter(),
        ),
      ),
    );
  }
}

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    // 创建一个线性渐变
    Shader shader = LinearGradient(
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
      colors: [Colors.red, Colors.blue],
    ).createShader(Rect.fromLTWH(0, 0, size.width, size.height));

    // 用渐变填充画布
    canvas.drawPaint(Paint()..shader = shader);
  }

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