flutter 使用ClipPath实现中间透明圆形，四周半透明

最新推荐文章于 2025-05-16 22:33:57 发布

小小舍

最新推荐文章于 2025-05-16 22:33:57 发布

阅读量769

点赞数 9

文章标签： flutter

本文链接：https://blog.youkuaiyun.com/qq_43560721/article/details/135149658

版权

import 'package:flutter/cupertino.dart';

class CenterTransparentCircularMask extends CustomClipper<Path> {
  final double radius;
  CenterTransparentCircularMask(this.radius);

  @override
  Path getClip(Size size) {
    final path = Path()
      ..addRect(Rect.fromLTWH(0, 0, size.width, size.height)) // 初始矩形
      ..addOval(Rect.fromCircle(center: Offset(size.width / 2, size.height / 2), radius: this.radius)); // 圆形洞口

    return path..fillType = PathFillType.evenOdd; // 设置填充规则
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
    return false;
  }
}

Container(
                      child: ClipPath(
                        clipper: CenterTransparentCircularMask(23.0), // 自定义的裁剪器
                        child: Container(
                          color: Colors.black.withOpacity(0.5),
                          width: screenWidth,//遮罩宽
                          height: playerHeight,//遮罩高
                        ),
                      ),
                    ),