【问题标题】:How to change duration of Hero Animation in Flutter but with arguments如何在 Flutter 中使用参数更改英雄动画的持续时间
【发布时间】:2023-03-14 07:04:01
【问题描述】:

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

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

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

我以前用过

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官方文档

标签: flutter flutter-animation flutter-routes


【解决方案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
}

【讨论】:

    猜你喜欢
    • 2018-11-03
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-11-01
    • 2013-01-18
    • 2021-01-18
    • 2019-10-30
    • 1970-01-01
    相关资源
    最近更新 更多