美文网首页
边框上绘制渐变色

边框上绘制渐变色

作者: 渚清与沙白 | 来源:发表于2024-12-30 17:57 被阅读0次
import 'package:flutter/material.dart';

class RectangularPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = const Color(0xFF25C700)
      ..style = PaintingStyle.stroke
      ..strokeWidth = 4;

    final rect = Rect.fromLTWH(0, 0, size.width, size.height);
    // canvas.drawRect(rect, paint);
    
    // 定义矩形的边框和填充区域
    RRect rRect = RRect.fromRectAndRadius(rect, Radius.circular(0)); // 设置矩形的圆角

    const gradient = LinearGradient(
      colors: [Colors.blue, Colors.green], // 渐变色的起始和结束颜色
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
    );

    // 绘制渐变色填充
    paint.shader = gradient.createShader(rect);
    canvas.drawRRect(rRect, paint); // 使用绘制的渐变色填充矩形

    // 绘制矩形边框
    paint.color = Colors.black; // 设置边框颜色
    paint.style = PaintingStyle.stroke; // 只绘制边框
    paint.strokeWidth = 4; // 设置边框宽度
    canvas.drawRRect(rRect, paint); // 绘制边框
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }
}

相关文章

网友评论

      本文标题:边框上绘制渐变色

      本文链接:https://www.haomeiwen.com/subject/pvxzejtx.html