本文將向您展示如何使用Flutter 中的**CustomClipper類繪制n 角星**（5 角星、6 角星、10 角星、20 角星等）。無需安裝任何第三方軟件包。我們將從頭開始制作東西。

重點是什么？

1.通過擴展CustomClipper類實現一個可重用的自定義裁剪器：

// This custom clipper help us achieve n-pointed star shape class StarClipper extends CustomClipper<Path> {/// The number of points of the starfinal int points;StarClipper(this.points);// Degrees to radians conversiondouble _degreeToRadian(double deg) => deg * (math.pi / 180.0);@overridePath getClip(Size size) {Path path = Path();double max = 2 * math.pi;double width = size.width;double halfWidth = width / 2;double wingRadius = halfWidth;double radius = halfWidth / 2;double degreesPerStep = _degreeToRadian(360 / points);double halfDegreesPerStep = degreesPerStep / 2;path.moveTo(width, halfWidth);for (double step = 0; step < max; step += degreesPerStep) {path.lineTo(halfWidth + wingRadius * math.cos(step),halfWidth + wingRadius * math.sin(step));path.lineTo(halfWidth + radius * math.cos(step + halfDegreesPerStep),halfWidth + radius * math.sin(step + halfDegreesPerStep));}path.close();return path;}// If the new instance represents different information than the old instance, this method will return true, otherwise it should return false.@overridebool shouldReclip(CustomClipper<Path> oldClipper) {StarClipper starClipper = oldClipper as StarClipper;return points != starClipper.points;} }

現在您可以輕松繪制星星了，如下所示：

SizedBox(height: 360,width: 360,child: ClipPath(clipper: StarClipper(6),child: Container(height: 300,color: Colors.amber,),),),

完整示例

預覽

此示例生成 4 種不同的星形：5 角星、6 角星、10 角星和 20 角星。

編碼

main.dart 中的完整源代碼和解釋：

// main.dart import 'package:flutter/material.dart'; import 'dart:math' as math;// This custom clipper help us achieve n-pointed star shape class StarClipper extends CustomClipper<Path> {/// The number of points of the starfinal int points;StarClipper(this.points);// Degrees to radians conversiondouble _degreeToRadian(double deg) => deg * (math.pi / 180.0);@overridePath getClip(Size size) {Path path = Path();double max = 2 * math.pi;double width = size.width;double halfWidth = width / 2;double wingRadius = halfWidth;double radius = halfWidth / 2;double degreesPerStep = _degreeToRadian(360 / points);double halfDegreesPerStep = degreesPerStep / 2;path.moveTo(width, halfWidth);for (double step = 0; step < max; step += degreesPerStep) {path.lineTo(halfWidth + wingRadius * math.cos(step),halfWidth + wingRadius * math.sin(step));path.lineTo(halfWidth + radius * math.cos(step + halfDegreesPerStep),halfWidth + radius * math.sin(step + halfDegreesPerStep));}path.close();return path;}// If the new instance represents different information than the old instance, this method will return true, otherwise it should return false.@overridebool shouldReclip(CustomClipper<Path> oldClipper) {StarClipper starClipper = oldClipper as StarClipper;return points != starClipper.points;} }void main() {runApp(const MyApp()); }class MyApp extends StatelessWidget {const MyApp({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return MaterialApp(debugShowCheckedModeBanner: false,title: 'KindaCode.com',theme: ThemeData(primarySwatch: Colors.indigo,),home: const MyHomePage(),);} }class MyHomePage extends StatefulWidget {const MyHomePage({Key? key}) : super(key: key);@override_MyHomePageState createState() => _MyHomePageState(); }class _MyHomePageState extends State<MyHomePage> {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('Kindacode.com'),),body: Padding(padding: const EdgeInsets.all(20),child: Center(child: Column(children: [// 5-pointed starSizedBox(height: 180,width: 180,child: ClipPath(clipper: StarClipper(5),child: Container(height: 150,color: Colors.green,),),),// 6-pointed starSizedBox(height: 180,width: 180,child: ClipPath(clipper: StarClipper(6),child: Container(height: 150,color: Colors.amber,),),),// 10-pointed starSizedBox(height: 180,width: 180,child: ClipPath(clipper: StarClipper(10),child: Container(height: 150,color: Colors.indigo,),),),// 20-pointed starSizedBox(height: 180,width: 180,child: ClipPath(clipper: StarClipper(20),child: Container(height: 150,color: Colors.cyan,),),),],),),),);} }

結論

我們從頭開始繪制自定義星形，沒有使用任何第三個插件。如果您想在現代 Flutter 中探索更多新奇有趣的東西

總結

以上是生活随笔為你收集整理的Flutter：使用 CustomClipper 绘制 N 角星的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。