在我的朋友@kherel为我实现的这段代码中,我希望此屏幕快照的黑色部分具有自定义尺寸:
因为我对Flutter的此功能没有任何经验,所以我不知道该怎么解决,我在此图像中有3个黑色部分,我想为其设置自定义尺寸
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;
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句