flutter - 在 Flutter Canvas 中使用 Gradient 和 Paint 对象

Question

我可以使用以下示例绘制半圆: Flutter how to draw semicircle (half circle)

但是，Paint 对象似乎只接受Color(使用Paint.color)。我想添加 RadialGradient 或 LinearGradient 作为 Color。这可能吗？

Answer 1

是的!使用Paint.shader这是完全可能的.
您可以直接使用 dart:ui 创建渐变着色器，也可以使用 Gradient.createShader 将 Flutter 渐变转换为着色器.

dart:ui gradient

import 'dart:ui' as ui;

// In your paint method
final paint = Paint()
  ..shader = ui.Gradient.linear(
    startOffset,
    endOffset,
    [
      color1,
      color2,
    ],
  );

现实世界的例子可以是 seen here .

Flutter painting gradient

import 'package:flutter/painting.dart';

// In your paint method
final paint = Paint()
  ..shader = RadialGradient(
    colors: [
      color1,
      color2,
    ],
  ).createShader(Rect.fromCircle(
    center: offset,
    radius: radius,
  ));

一个例子是 found here .

<小时/>

这两个实际上是相同的。当您调用 createShader 时，Flutter 绘画版本只是将其转换为 dart:ui 渐变(着色器)。它存在的原因是绘画版本更适合预构建的小部件，例如 Container。