Как использовать ClipPath, чтобы он не обрезался за пределами дочернего виджета? - PullRequest
Новая
       12

Как использовать ClipPath, чтобы он не обрезался за пределами дочернего виджета?

0 голосов
/ 25 мая 2020

Я пытаюсь обрезать свой виджет в соответствии с пользовательским путем, но мой CustomClipper слишком велик для моего дочернего виджета. Как я могу изменить размер Custom Clipper в соответствии с размером моего дочернего виджета? Есть ли другой способ обрезать виджет с помощью пути Flutter? 

@override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.orange,
      body: SafeArea(
        child: Center(
          child: ClipPath(
            child: Container(
              color: Colors.pink,
              height: 200,
              width: 200,
            ),
            clipper: MyCustomClipper(),
          ),
        ),
      ),
    );
  }


class MyCustomClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path path = Path()
      ..moveTo(1305.0, 3204.0)
      ..cubicTo(874.0, 3124.0, 514.0, 2886.0, 263.0, 2515.0)
      ..cubicTo(166.0, 2371.0, 81.0, 2167.0, 34.0, 1965.0)
      ..cubicTo(-2.0, 1804.0, -12.0, 1523.0, 15.0, 1354.0)
      ..cubicTo(112.0, 733.0, 556.0, 219.0, 1136.0, 56.0)
      ..cubicTo(1306.0, 8.0, 1399.0, -3.0, 1590.0, 2.0)
      ..cubicTo(1852.0, 9.0, 2049.0, 59.0, 2259.0, 171.0)
      ..cubicTo(2711.0, 412.0, 3012.0, 834.0, 3096.0, 1346.0)
      ..cubicTo(3118.0, 1476.0, 3120.0, 1734.0, 3101.0, 1855.0)
      ..cubicTo(3037.0, 2259.0, 2839.0, 2616.0, 2541.0, 2864.0)
      ..cubicTo(2439.0, 2949.0, 2338.0, 3013.0, 2205.0, 3076.0)
      ..cubicTo(2077.0, 3136.0, 2006.0, 3162.0, 1878.0, 3191.0)
      ..cubicTo(1755.0, 3220.0, 1428.0, 3227.0, 1305.0, 3204.0)
      ..close()
      ..moveTo(1780.0, 2271.0)
      ..cubicTo(2047.0, 2181.0, 2235.0, 1954.0, 2268.0, 1685.0)
      ..cubicTo(2276.0, 1610.0, 2270.0, 1489.0, 2254.0, 1437.0)
      ..cubicTo(2181.0, 1194.0, 2015.0, 1018.0, 1780.0, 938.0)
      ..cubicTo(1691.0, 908.0, 1676.0, 906.0, 1550.0, 906.0)
      ..cubicTo(1424.0, 906.0, 1409.0, 908.0, 1320.0, 938.0)
      ..cubicTo(1020.0, 1042.0, 830.0, 1302.0, 830.0, 1609.0)
      ..cubicTo(830.0, 1942.0, 1060.0, 2216.0, 1405.0, 2296.0)
      ..cubicTo(1443.0, 2305.0, 1504.0, 2308.0, 1575.0, 2306.0)
      ..cubicTo(1666.0, 2303.0, 1701.0, 2297.0, 1780.0, 2271.0)
      ..close();
    return path;
  }

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

1 Ответ

1 голос
/ 25 мая 2020

Основной код c, который показывает треугольник, обрезанный до половины размеров ребенка 

main() => runApp(MaterialApp(home: SO()));

class SO extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Container(
        decoration: BoxDecoration(border: Border.all(width: 1,color: Colors.red)),//this container shows the actual size of the child widget marked by red border and it is w:200 by h:400
        child: ClipPath(
            clipper: CC(),//clips to half the size i.e. w->100,h->200
            child: Container(
                color: Colors.purple,
              width: 200,
              height: 400,
            )),
      ),
    );
  }
}

class CC extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var w = size.width;
    var h = size.height;
    print(w); //should be 200
    print(h); //should be 400

    //clips a triangle to half size of child
    Path p = Path();
    p.moveTo(0, 0);
    p.lineTo(w / 2, 0);
    p.lineTo(w / 2, h / 2);
    p.close();
    return p;
  }

  @override
  bool shouldReclip(CustomClipper oldClipper) => false;
}
enter code here
...