Flutter中的弯曲形状背景标题

Question

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

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

我只是想弄清楚如何：

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

Answer 1

我为你的曲线形状制作了一个完整的样本here

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

最终结果

我是怎么画的？

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

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

Full sample here!