dart - Flutter中的弯曲形状背景标题

Question

我有一个左侧带有“英雄”图标的 ListView 。当我单击一个列表项时，它会加载下一个屏幕，其中包含文章文本和英雄图像(它会很好地/自动地动画到第二个屏幕上的正确位置)。

我原以为这是“艰难”的部分，但我现在正试图获得一个弯曲的形状作为第二个屏幕的顶部背景。我很想把它做成一个绘制的矢量形状，而不是位图，甚至让它滴落/反弹到页面上，但目前......

我只是想弄清楚如何:

1. 绘制矢量形状
2. 将其作为屏幕的背景，顶部有其他小部件(请参阅下面第二个屏幕上的紫色曲线)

Answer 1

我为您的弯曲形状制作了一个完整的示例 here

我使用了 CustomPainter然后在 Canvas 上绘图，通过一些几何计算，我得到了弯曲的形状。

最终结果

我是怎么画的？

在编码之前和在白板上我确定了一些事情:

1. 我的 Canvas 区:
   • 绘制该形状所需的 Canvas 尺寸(等于 Flutter 小部件的尺寸)。
2. 我的画笔将如何移动以及移动到哪里？
   • 如何表示:使用 Path 在 Canvas 上绘制该形状需要哪些 API？类(class)。例如lineTo()对于直线，quadraticBezierTo()曲线。
   • where 表示:我需要绘制整个形状的点(坐标)在哪里。 (见上图中的黄点和绿点)
3. 点(坐标)计算:
   • 我使用了一些几何方程来计算坐标。例如Point on a circle’s circumference
   • 我的所有计算都取决于 Canvas 大小，这给了我一个响应式形状。

Full sample here!