Flutter如何实现两个圆圈不同区域的颜色渐变

在Flutter中，我想实现两个圆形叠加时，不同重叠区域显示不同颜色渐变的效果。比如圆A从左到右红蓝渐变，圆B从上到下黄绿渐变，当它们部分重叠时，重叠区域能否自动混合出新的渐变颜色？该如何通过CustomPainter或Shader来实现这种动态混合效果？求具体代码示例或实现思路。

2 回复

使用RadialGradient实现两个圆圈的渐变。在Container的decoration中设置BoxDecoration，通过gradient属性定义不同圆心和半径的径向渐变。可调整center和radius参数控制渐变区域。

更多关于Flutter如何实现两个圆圈不同区域的颜色渐变的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中实现两个圆圈不同区域的颜色渐变，可以使用RadialGradient（径向渐变）结合CustomPainter自定义绘制。以下是具体实现方法：

核心代码示例

import 'package:flutter/material.dart';

class DualCircleGradient extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      size: Size(300, 300),
      painter: DualCircleGradientPainter(),
    );
  }
}

class DualCircleGradientPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final center = Offset(size.width / 2, size.height / 2);
    final radius = size.width / 3;

    // 第一个圆圈 - 左上到右下渐变
    final gradient1 = RadialGradient(
      colors: [Colors.blue, Colors.transparent],
      stops: [0.5, 1.0],
      center: Alignment.topLeft,
      radius: 0.8,
    );
    
    final paint1 = Paint()
      ..shader = gradient1.createShader(
        Rect.fromCircle(center: center, radius: radius),
      );
    
    canvas.drawCircle(center, radius, paint1);

    // 第二个圆圈 - 右下到左上渐变
    final gradient2 = RadialGradient(
      colors: [Colors.red, Colors.transparent],
      stops: [0.5, 1.0],
      center: Alignment.bottomRight,
      radius: 0.8,
    );
    
    final paint2 = Paint()
      ..shader = gradient2.createShader(
        Rect.fromCircle(center: center, radius: radius),
      );
    
    canvas.drawCircle(center, radius, paint2);
  }

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

关键参数说明

  1. RadialGradient配置：

    • colors：定义渐变颜色数组
    • stops：颜色停止点（0.0到1.0）
    • center：控制渐变中心位置
    • radius：渐变半径比例

  2. 自定义位置：

    • 通过调整center参数控制渐变方向：
      • Alignment.topLeft
      • Alignment.bottomRight
      • Alignment(-0.5, 0.5) 自定义坐标

  3. 重叠效果：

    • 两个圆圈使用相同中心点绘制
    • 通过不同的渐变方向创建分区效果

使用方式

MaterialApp(
  home: Scaffold(
    body: Center(
      child: DualCircleGradient(),
    ),
  ),
);

这种方法可以灵活控制每个圆圈的渐变方向、颜色和范围，实现不同区域的颜色渐变效果。

回到顶部