[英]How to create a hexagon clippath on flutter?
我正在尝试使用六边形个人资料图片,但是我在使用带有颤动的剪辑路径时遇到了问题。
六边形的 CSS 代码是这样的:
-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
我怎么能在颤振上做到这一点?
代码
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Hexagon', theme: ThemeData( primarySwatch: Colors.blue, ), home: MyHomePage(title: 'Hexagon'), ); } } class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title; @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { return Scaffold( body: Padding( padding: const EdgeInsets.all(50.0), child: ClipPath( child: Container( color: Colors.amber, ), clipper: _MyClipper(), ), ), ); } } class _MyClipper extends CustomClipper<Path> { @override Path getClip(Size size) { final path = Path(); path.lineTo(0, 0); path.lineTo(size.width, 0); path.lineTo(size.width, size.height * 0.8); path.lineTo(size.width * 0.8, size.height); path.lineTo(size.width * 0.2, size.height); path.lineTo(0, size.height * 0.8); path.lineTo(0, 0); path.close(); return path; } @override bool shouldReclip(CustomClipper<Path> oldClipper) => false; }
或者你可以使用一个名为
flutter_custom_clippers: ^2.0.0
让我们使用ClipPath来获得这个形状并按照你的方式跟随css
。 50% 0%
均值(x, y)
并且lineTo(x,y)
和moveTo
也相同。
class HexagonClipper extends CustomClipper<Path> {
@override
Path getClip(Size size) {
Path path = Path();
path
..moveTo(size.width / 2, 0) // moving to topCenter 1st, then draw the path
..lineTo(size.width, size.height * .25)
..lineTo(size.width, size.height * .75)
..lineTo(size.width * .5, size.height)
..lineTo(0, size.height * .75)
..lineTo(0, size.height * .25)
..close();
return path;
}
@override
bool shouldReclip(covariant CustomClipper<Path> oldClipper) {
return false;
}
}
并使用像
ClipPath(
clipper: HexagonClipper(),
child: Container(
width: 100, /// controll the size and color
height: 110,
color: Colors.amber,
),
)
结果
了解有关ClipPath 的更多信息
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.