Flutter自定义view--外凸弧形view绘制

//自定义view外凸的弧形背景

import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:flutter_app/res/colors.dart';

///画板Painter
class AcrView extends CustomPainter {
  Paint _paint = new Paint()
    ..color = MyColors.app_08C2B7 // 画笔颜色
    ..strokeCap = StrokeCap.round //画笔笔触类型
    ..isAntiAlias = true //是否启动抗锯齿
    ..strokeWidth = 1.0 //画笔的宽度
    ..style = PaintingStyle.fill;

  @override
  void paint(Canvas canvas, Size size) {
    Rect rect1 = Rect.fromPoints(Offset(0, size.height / 4 * 3),
        Offset(size.width, size.height + size.height / 4));
    canvas.drawOval(rect1, _paint);
    Rect rec = Rect.fromLTWH(0, 0, size.width, size.height);//绘制凸出的view
    //设置自定义view渐变色
    _paint.shader = LinearGradient(
        begin: Alignment.topCenter,//设置渐变起始方向
        end: Alignment.bottomCenter,
        colors: [
          MyColors.app_44D2AA,
          MyColors.app_08C2B7,
        ]).createShader(rec);
    canvas.drawRect(rec, _paint);//绘制view方块主体
  }

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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值