如何弯曲/弯曲 Flutter 小部件？（非仿射小部件渲染变换）

Question

假设您有一些 flutter 小部件，例如TabBar. 它被渲染在一个矩形框中。我需要将其呈现为弧形，以便文本和下划线遵循圆的一部分（或者更好的是贝塞尔曲线）。

如何才能做到这一点？

这说明了我想要实现的目标 - 弯曲的TabBar小部件：

请注意，在这种情况下，TabBar弯曲遵循圆弧（圆的边缘）。这就是我立即需要的。然而，在未来，我可能需要沿着日食边缘进行弯曲，因此允许它的解决方案会更好。

此外，适用于不同小部件的解决方案是首选。

重要提示：我不想剪辑小部件的弯曲形状。小部件的整个区域应该保持可见。相反，我需要弯曲小部件的内容（=弯曲其渲染图像）。

对粗体字体表示歉意，但如果没有它，人们会不断发布有关如何剪辑小部件的答案，相比之下，这很微不足道，对我的问题毫无用处。

来自权威机构（例如在 Flutter 标签中的高声誉或 Flutter 团队成员中的高声誉）的回答“Flutter 目前不支持此功能”也将被接受。

Answer 1

一种方法：使用 aCustomPaint自由绘制线条/区域/等

您可以使用CustomPaint自由绘制任何曲线、区域等。因此，你绝对可以实现你的目标 - 因为它们只不过是曲线、具有弯曲边缘的区域、旋转文本等。这将需要一些工作，但如果你封装得足够好，实现起来并不难。例如，绘制一条充满红色区域的路径，然后绘制一条白色弧线，然后绘制几个具有计算旋转的文本等。听起来您可以在数百行内完成此操作。如果您发现执行此操作有困难，请发表评论，我会解释。

另一种方法：Hack Canvas，使得对的调用drawLine确实成为对 的调用drawPath，等等。

您可以执行以下操作以允许任何小部件（当然还有它们的组合）弯曲/弯曲，但这可能需要一些工程设计。你可以自己制作Canvas，比如说，class BendCanvas implements Canvas {}。例如，具有与输入“线”相对应的弯曲路径BendCanvas.drawLine的实现。Canvas.drawPath类似的事情也适用于绘制矩形等。然后您需要破解 Flutter 的绘制逻辑，以便它采用您自己的 BendCanvas 而不是原始画布。这是一个通用的解决方案，如果你打算有很多弯曲的 UI，它会更高效（更少的代码）；但如果仅在弯曲 TabBar 上，也许使用第一种方法。

至于弯曲文本

在上面的两种方法中，我们主要描述了如何绘制弯曲的矩形（即绘制任意形状的部件）。至于弯曲文本，请参见： https: //github.com/flutter/flutter/issues/16477，这仍然是一个悬而未决的问题。

评论

使用转换是不可能的。正如评论中所解释的，您已经看到Transform不起作用 - 它是仿射或透视，根据定义，它不会弯曲。那么其他变换呢？经过一番研究，似乎没有。那么，看看场景下面呢？我们知道Flutter使用其下的Skia来绘制高性能的UI，那么我们就通过Skia来搜索一下。然而，它不提供任何像弯曲这样的变换。所以好像没什么用。

_{PS：我在 Flutter 标签中的声誉并不高，但我确实回答了超过 100 个 Flutter 问题（包括一些深入源码风格的问题），并在生产应用程序中开发了超过 10 万行 Flutter 代码。}