如何在Flutter中繪制矢量形狀？

Question

我們正在嘗試在Flutter中構建自定義形狀矢量，可以在運行時對其進行更改。

例如，我們需要一個比薩餅形狀矢量小部件，我們可以基於可變值更改切片顏色。

我們試圖在Flutter中使用畫布和畫家，但他們沒有一個清晰，優質的文檔。

我們也嘗試了SVG，但不幸的是Flutter不支持SVG標簽和SVG視圖。

Answer 1

您可以創建擴展CustomPainter的小部件

 class Sky extends CustomPainter { @override void paint(Canvas canvas, Size size) { var rect = Offset.zero & size; var gradient = new RadialGradient( center: const Alignment(0.7, -0.6), radius: 0.2, colors: [const Color(0xFFFFFF00), const Color(0xFF0099FF)], stops: [0.4, 1.0], ); canvas.drawRect( rect, new Paint()..shader = gradient.createShader(rect), ); } @override SemanticsBuilderCallback get semanticsBuilder { return (Size size) { // Annotate a rectangle containing the picture of the sun // with the label "Sun". When text to speech feature is enabled on the // device, a user will be able to locate the sun on this picture by // touch. var rect = Offset.zero & size; var width = size.shortestSide * 0.4; rect = const Alignment(0.8, -0.9).inscribe(new Size(width, width), rect); return [ new CustomPainterSemantics( rect: rect, properties: new SemanticsProperties( label: 'Sun', textDirection: TextDirection.ltr, ), ), ]; }; } // Since this Sky painter has no fields, it always paints // the same thing and semantics information is the same. // Therefore we return false here. If we had fields (set // from the constructor) then we would return true if any // of them differed from the same fields on the oldDelegate. @override bool shouldRepaint(Sky oldDelegate) => false; @override bool shouldRebuildSemantics(Sky oldDelegate) => false; } 

也可以看看

• https://pub.dartlang.org/packages/flutter_svg （對Flutter的有限SVG支持）
• https://github.com/flutter/flutter/tree/master/dev/tools/vitool
• https://github.com/simolus3/fluttie （不確定這是否已經起作用）