如何使环使用自定义剪贴在翩翩？

Question

我试图使圆圈与一个孔在中心的小部件通过使用自定义剪贴在翩翩，但我TS不工作，我不知道如何使它的作品。

因此，结果像这样，像一个环与空的中心的部件。

import 'package:flutter/material.dart';

class View_Test extends StatefulWidget {
  @override
  _View_TestState createState() => _View_TestState();
}

class _View_TestState extends State<View_Test> {
  double y = 200;
  double x = 100;
  double w = 10; 

  @override
  Widget build(BuildContext context) {
    double height = MediaQuery.of(context).size.height;
    double width = MediaQuery.of(context).size.width;

    return Scaffold(
    appBar: AppBar(
      title: Text("test"),
    ),
    body: Container(
        height: height,
        width: width,
        color: Colors.yellow,
        child: Center(
            child: ClipPath(
                clipper: Clip(x: x, y: y, w: w),
                child: Container(
                  color: Colors.grey,
                  height: y,
                  width: x,
                )))));
  }
}

class Clip extends CustomClipper<Path> {
  double x;
  double y;
  double w;
  Clip({this.x, this.y, this.w});

  @override
    Path getClip(Size size) {
    var path = Path();
    var rect = Rect.fromLTRB(0, 0, x, y);
    path.addOval(rect);
    var rect2 = Rect.fromLTRB(0 + w, 0 + w, x - w, y - w);
    path.addOval(rect2);
    path.close();

    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
    // TODO: implement shouldReclip
    return true;
  }
}

这是我的代码，请帮助我。

Answer 1

它的工作，这是代码。

class Clip extends CustomClipper<Path> {
  double x;
  double y;
  double w;
  Clip({this.x, this.y, this.w});

  @override
  Path getClip(Size size) {
    var path = Path();
    var rect = Rect.fromLTRB(0, 0, x, y);
    path.addOval(rect);
    path.fillType = PathFillType.evenOdd;
    var rect2 = Rect.fromLTRB(0 + w, 0 + w, x - w, y - w);
    path.addOval(rect2);
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
    // TODO: implement shouldReclip
    return true;
  }
}

结果