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

Question

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

怎样才能做到这一点？

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

请注意，在这种情况下，TabBar弯曲跟随和圆弧（圆的边缘）。这是我立即需要的。然而，在未来，我可能需要在日食的边缘进行弯曲，所以一个允许它的解决方案将是更可取的。

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

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

为粗体字体道歉，但没有它，人们将继续发布有关如何剪辑小部件的答案，相比之下这是微不足道的，对我的问题毫无用处。

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

标签： flutteruser-interfaceflutter-layoutflutter-widget

Answer 1

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

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

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

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

至于弯字

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

评论

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

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