【问题标题】:What is the best way to place text over an Rive animation in Flutter?在 Flutter 中将文本放置在 Rive 动画上的最佳方式是什么?
【发布时间】:2021-08-23 18:44:56
【问题描述】:

我是 Flutter 的新手。我想放置一些文本,它们的值会随着 Rive 动画而改变。无论屏幕大小如何,确保文本在动画上保持相同位置的最佳方法是什么?

假设这 3 个红色框有一些遥测数据作为示例。

带有位置的 Stack 小部件可以工作吗?在我进入这个兔子洞之前,我想我需要一些关于如何在 Rive 动画中或上方显示数据的建议。

【问题讨论】:

    标签: flutter animation text rive


    【解决方案1】:

    好吧,Stack 总是答案 :) 用它包裹 Rive 动画,并在任何你想要的地方使用 text 小部件。

    【讨论】:

    • 好吧,如果我尝试这样做并在平板电脑上运行相同的应用程序,在手机上的正确位置显示文本,那么文本不在同一个位置。
    • 我可以将 Rive 动画固定为一定的大小以使文本不会移动吗?
    • 响应性可以通过多种方式实现。没有灵丹妙药。您可以尝试使用自定义尺寸将Stack 包装到SizedBox,然后使用Positioned.fill 小部件包装Rive 动画,使其占据整个Stack,最后,使用Positioned 包装Text 小部件确定其在Stack中的位置。
    • 所以我先放了一个容器,给它一个尺寸。这似乎或多或少起作用。因为它使 Rive 动画在所有不同的设备上都具有相同的大小。我会以这样的方式设计动画,以便有一点可玩性。但至少我知道该怎么做。感谢您的信息。
    猜你喜欢
    • 1970-01-01
    • 2012-01-10
    • 2021-02-26
    • 1970-01-01
    • 2021-11-11
    • 2021-03-17
    • 2011-05-20
    • 1970-01-01
    • 2011-06-02
    相关资源
    最近更新 更多