如何在 Flutter 中使用参数更改英雄动画的持续时间

Posted 2023-02-23

【中文标题】如何在 Flutter 中使用参数更改英雄动画的持续时间

【英文标题】：How to change duration of Hero Animation in Flutter but with arguments

【发布时间】：2021-02-19 20:56:16

【问题描述】：

这里是my code as a gist (an interactive version of my code in dartpad.dev)

简要介绍一下我试图用这个应用程序做什么：

我有两个页面 / 我想在 TextField 中输入一个字符串，它将同时开始出现在 appBar 中，还有另一个按钮，当你按下它时，它将带你到另一个页面（ Home Widget ），但使用您在/ 页面中编写的text。我希望这个过渡就像一个英雄动画，其中从 appBar 的 / 页面 flies 到 body 的 Info 的文本

我以前用过

Navigator.pushNamed(context, "Info", arguments: "text": myController.text);

路由到新页面并传递我想在那里显示的文本。我能够做到，但即使在配置文件模式下，动画也太快了

但我从this Question 得到的答案是使用

Navigator.push(
  context,
  PageRouteBuilder(
      transitionDuration: Duration(seconds: 2),
      pageBuilder: (_, __, ___) => Page2())
      ),

但问题是，Navigator.push(context, PageRouteBuilder( ... ) ) 不允许您传递参数，我绝对希望能够这样做。

【问题讨论】：

添加settings: ...

@pskink 你能扩展一下吗？或者指向我可以了解更多信息的网站？

查看PageRouteBuilder官方文档

【参考方案1】：

如果您可以使用PageRouteBuilder class 控制过渡动画，那么您唯一关心的就是传递数据。现在，我敢肯定，你错过了这个，这是：

将数据作为参数传递给 Flutter 中的类。你不必总是喜欢这样的东西arguments: 。

现在，我的意思是，Flutter 中的每个类都可以接受数据作为参数，你是怎么做到的。

创建一个接受参数的内容[你已经完成了] 在使用时传递类中的数据，在我们的例子中是Info(pass_it_here) [现在必须这样做]

我们如何在代码中实现这一点？

因此，您只需在转换时传递如下所述的数据。您的 Info 类正在接受数据。所以你需要做的就是实现你想要的，这是：

Navigator.push(
  context,
  PageRouteBuilder(
      transitionDuration: Duration(seconds: 2),
      pageBuilder: (_, __, ___) => Info(text: myController.text) // <-- here is the magic
  )
)

建议：

如果你为一个类定义参数，让我们以Info为例，请将其声明为final。我知道您将更改数据，但您可以将内容复制到局部变量并做任何您想做的事情。

示例

class Info extends StatefulWidget 
  final String text;  // <-- Declare this as final
  
  Info(this.text);

  @override
  _InfoState createState() => _InfoState();

在主类中使用@immutable 数据：

class _InfoState extends State<Info> 
   // here how you are just copying the data to the local variable
   // var _myText = widget.text;
   String _myText = "";

   // or you can do this via @initState
   @override
   void initState()
     super.initState();

     _myText = widget.text;
   

   // Now use your variable _myText however you want