flutter - 如何在 Flutter 中使用 Custom Clipper 制作戒指？

Question

我正在尝试通过在颤振中使用自定义剪辑器在小部件中心制作一个带有孔的圆圈，但我不工作，我不知道如何使它工作。

所以结果是这样的，就像小部件中心有一个空的环。

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;
  }
}

结果