Flutter使CustomClipper的大小可调整 [英] Flutter make resizeable parts of CustomClipper

问题描述

在我的朋友

由于我对Flutter的此功能没有任何经验，我不知道该如何解决，我在此图像中有3个黑色部分，我想为其设置自定义尺寸

 类ProductClipper扩展了CustomClipper< Path>.{@override路径getClip(大小大小){最终因子W = size.width/100;最终因子H = size.height/100;返回Path()..moveTo(0.0 * factorH，0.0 * factorW)..lineTo(100.0 * factorH，0.0 * factorW)..lineTo(100.0 * factorH，72.6 * factorW)..cubicTo(90.4 * factorH，72.6 * factorW，81.0 * factorH，72.6 * factorW，72.1 *因数H，72.6 *因数W)..cubicTo(64.8 * factorH，72.6 * factorW，62.3 * factorH，75.2 * factorW，62.3 *因数H，88.3 *因数W)..cubicTo(62.3 * factorH，97.3 * factorW，61.9 * factorH，100.0 * factorW，57.2 *因数H，100.0 *因数W)..cubicTo(42.8 * factorH，100.0 * factorW，23.7 * factorH，100.0 *因数W，0.0 *因数H，100.0 *因数W)..lineTo(0.0 * factorH，0.0 * factorW)..关闭();}@overridebool shouldReclip(CustomClipper< Path> oldClipper)=>真的;}ClipPath(快剪:ProductClipper()，子代:集装箱(宽度:200，//可以调整大小高度:200，//可以调整大小颜色:Colors.pink，)，)， 

 类Clipper1扩展了CustomClipper< Path>.{@override路径getClip(大小大小){var factorW = size.width/100;var factorH = size.height/100;返回Path()..moveTo(0.0 * factorW，0.0 * factorH)..cubicTo(2.0 * factorW，-1.0 * factorH，3.0 * factorW，-1.0 * factorH，3.0 *因数W，0.0 *因数H)..cubicTo(15.0 * factorW，1.0 * factorH，17.0 * factorW，19.0 * factorH，20.0 *因数W，43.0 *因数H)..cubicTo(23.0 * factorW，66.0 * factorH，33.0 * factorW，71.0 * factorH，35.0 *因数W，71.0 *因数H)..cubicTo(50.0 * factorW，71.0 * factorH，72.0 * factorW，71.0 * factorH，100.0 *因数W，71.0 *因数H)..lineTo(100.0 * factorW，100.0 * factorH)..lineTo(0.0 * factorW，100.0 * factorH)..lineTo(0.0 * factorW，0.0 * factorH)..关闭();}@overridebool shouldReclip(CustomClipper< Path> oldClipper)=>真的;} 

解决方案

  import'package:flutter/material.dart';void main()=>runApp(MyApp());MyApp类扩展了StatelessWidget {@override窗口小部件build(BuildContext context){返回MaterialApp(标题:"Flutter演示"，主题:ThemeData(primarySwatch:Colors.blue，)，家:脚手架(正文:SafeArea(子:MyHomePage()，)，)，);}}类MyHomePage扩展了StatefulWidget {@override_MyHomePageState createState()=>_MyHomePageState();}类_MyHomePageState扩展State< MyHomePage>{@override窗口小部件build(BuildContext context){退货中心(子:列(子代:< Widget> [ClipPath(快船队:Clipper1(sizeA:40，)，子代:集装箱(宽度:150，//您可以更改此大小height:100，//您可以更改此大小颜色:Colors.blue，)，)，ClipPath(快船队:Clipper2(sizeA:10，)，子代:集装箱(宽度:180，高度:200，颜色:Colors.pink，)，)，]，)，);}}Clipper1类扩展了CustomClipper< Path>.{Clipper1({this.sizeA});两倍大小@override路径getClip(大小大小){var factorW = size.width/100;var factorH = size.height/100;返回Path()..moveTo(0.0，0.0)..lineTo(sizeA，0.0)..cubicTo(尺寸A，0，3.0 *因数W，0，尺寸A + 3.0 *因子W，0，)..cubicTo(尺寸A + 15.0 *因子W，1.0 *因数H，尺寸A + 17.0 *因子W，19.0 *因数H，尺寸A + 20.0 *因子W，43.0 *因数H，)..cubicTo(尺寸A + 23.0 *因子W，66.0 *因数H，尺寸A + 33.0 *因子W，71.0 *因数H，尺寸A + 35.0 *因子W，71.0 *因数H，)..cubicTo(50.0 * factorW，71.0 * factorH，72.0 * factorW，71.0 * factorH，100.0 *因数W，71.0 *因数H)..lineTo(100.0 * factorW，100.0 * factorH)..lineTo(0.0 * factorW，100.0 * factorH)..lineTo(0.0 * factorW，0.0 * factorH)..关闭();}@overridebool shouldReclip(CustomClipper< Path> oldClipper)=>真的;}Clipper2类扩展了CustomClipper< Path>.{Clipper2({this.sizeA});两倍大小@override路径getClip(大小大小){var factorW = size.width/100;var factorH = size.height/100;返回Path()..moveTo(0.0，0.0)..lineTo(100.0 *因数W，0.0，)..lineTo(100.0 *因数W，72.6 *因数H，)..cubicTo(尺寸A + 66.7 *因子W，72.6 *因数H，尺寸A + 57.3 *因子W，72.6 *因数H，尺寸A + 48.4 *因子W，72.6 *因数H，)..cubicTo(尺寸A + 41.1 *因子W，72.6 *因数H，尺寸A + 38.6 *因子W，75.2 *因数H，尺寸A + 38.6 *因子W，88.3 *因数H，)..cubicTo(尺寸A + 38.6 *因子W，97.3 *因数H，尺寸A + 38.2 *因子W，100.0 *因数H，尺寸A + 33.5 *因子W，100.0 *因数H，)..cubicTo(尺寸A + 19 *因子W，100.0 *因数H，sizeA * factorW，100.0 *因数H，0.0，100.0 *因数H，)..lineTo(0.0，0.0)..关闭();}@overridebool shouldReclip(CustomClipper< Path> oldClipper)=>真的;} 

in this code which my friend @kherel implemented for me, i want to have custom size for black part of this screen shot:

as i dont have any experience for this feature in Flutter i don't know how can i solve that, i have 3 black part in this image which i want to set custom size for them

class ProductClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final factorW = size.width / 100;
    final factorH = size.height / 100;
    return Path()
      ..moveTo(0.0 * factorH, 0.0 * factorW)
      ..lineTo(100.0 * factorH, 0.0 * factorW)
      ..lineTo(100.0 * factorH, 72.6 * factorW)
      ..cubicTo(90.4 * factorH, 72.6 * factorW, 81.0 * factorH, 72.6 * factorW,
          72.1 * factorH, 72.6 * factorW)
      ..cubicTo(64.8 * factorH, 72.6 * factorW, 62.3 * factorH, 75.2 * factorW,
          62.3 * factorH, 88.3 * factorW)
      ..cubicTo(62.3 * factorH, 97.3 * factorW, 61.9 * factorH, 100.0 * factorW,
          57.2 * factorH, 100.0 * factorW)
      ..cubicTo(42.8 * factorH, 100.0 * factorW, 23.7 * factorH,
          100.0 * factorW, 0.0 * factorH, 100.0 * factorW)
      ..lineTo(0.0 * factorH, 0.0 * factorW)
      ..close();
  }

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

ClipPath(
  clipper: ProductClipper(),
  child: Container(
    width: 200,  //can be resizable
    height: 200, //can be resizable
    color: Colors.pink,
  ),
),

class Clipper1 extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var factorW = size.width / 100;
    var factorH = size.height / 100;
    return Path()
      ..moveTo(0.0 * factorW, 0.0 * factorH)
      ..cubicTo(2.0 * factorW, -1.0 * factorH, 3.0 * factorW, -1.0 * factorH,
          3.0 * factorW, 0.0 * factorH)
      ..cubicTo(15.0 * factorW, 1.0 * factorH, 17.0 * factorW, 19.0 * factorH,
          20.0 * factorW, 43.0 * factorH)
      ..cubicTo(23.0 * factorW, 66.0 * factorH, 33.0 * factorW, 71.0 * factorH,
          35.0 * factorW, 71.0 * factorH)
      ..cubicTo(50.0 * factorW, 71.0 * factorH, 72.0 * factorW, 71.0 * factorH,
          100.0 * factorW, 71.0 * factorH)
      ..lineTo(100.0 * factorW, 100.0 * factorH)
      ..lineTo(0.0 * factorW, 100.0 * factorH)
      ..lineTo(0.0 * factorW, 0.0 * factorH)
      ..close();
  }

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

解决方案

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: SafeArea(
          child: MyHomePage(),
        ),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: <Widget>[
          ClipPath(
            clipper: Clipper1(
              sizeA: 40,
            ),
            child: Container(
              width: 150, //you can change this size
              height: 100, //you can change this size
              color: Colors.blue,
            ),
          ),
          ClipPath(
            clipper: Clipper2(
              sizeA: 10,
            ),
            child: Container(
              width: 180,
              height: 200,
              color: Colors.pink,
            ),
          ),
        ],
      ),
    );
  }
}

class Clipper1 extends CustomClipper<Path> {
  Clipper1({this.sizeA});

  double sizeA;
  @override
  Path getClip(Size size) {
    var factorW = size.width / 100;
    var factorH = size.height / 100;
    return Path()
      ..moveTo(0.0, 0.0)
      ..lineTo(sizeA, 0.0)
      ..cubicTo(
        sizeA,
        0,
        3.0 * factorW,
        0,
        sizeA + 3.0 * factorW,
        0,
      )
      ..cubicTo(
        sizeA + 15.0 * factorW,
        1.0 * factorH,
        sizeA + 17.0 * factorW,
        19.0 * factorH,
        sizeA + 20.0 * factorW,
        43.0 * factorH,
      )
      ..cubicTo(
        sizeA + 23.0 * factorW,
        66.0 * factorH,
        sizeA + 33.0 * factorW,
        71.0 * factorH,
        sizeA + 35.0 * factorW,
        71.0 * factorH,
      )
      ..cubicTo(50.0 * factorW, 71.0 * factorH, 72.0 * factorW, 71.0 * factorH,
          100.0 * factorW, 71.0 * factorH)
      ..lineTo(100.0 * factorW, 100.0 * factorH)
      ..lineTo(0.0 * factorW, 100.0 * factorH)
      ..lineTo(0.0 * factorW, 0.0 * factorH)
      ..close();
  }

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

class Clipper2 extends CustomClipper<Path> {
  Clipper2({this.sizeA});

  double sizeA;
  @override
  Path getClip(Size size) {
    var factorW = size.width / 100;
    var factorH = size.height / 100;
    return Path()
      ..moveTo(0.0, 0.0)
      ..lineTo(
        100.0 * factorW,
        0.0,
      )
      ..lineTo(
        100.0 * factorW,
        72.6 * factorH,
      )
      ..cubicTo(
        sizeA + 66.7 * factorW,
        72.6 * factorH,
        sizeA + 57.3 * factorW,
        72.6 * factorH,
        sizeA + 48.4 * factorW,
        72.6 * factorH,
      )
      ..cubicTo(
        sizeA + 41.1 * factorW,
        72.6 * factorH,
        sizeA + 38.6 * factorW,
        75.2 * factorH,
        sizeA + 38.6 * factorW,
        88.3 * factorH,
      )
      ..cubicTo(
        sizeA + 38.6 * factorW,
        97.3 * factorH,
        sizeA + 38.2 * factorW,
        100.0 * factorH,
        sizeA + 33.5 * factorW,
        100.0 * factorH,
      )
      ..cubicTo(
        sizeA + 19 * factorW,
        100.0 * factorH,
        sizeA * factorW,
        100.0 * factorH,
        0.0,
        100.0 * factorH,
      )
      ..lineTo(0.0, 0.0)
      ..close();
  }

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

这篇关于Flutter使CustomClipper的大小可调整的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！