Flutter - 动态传递导航小部件名称

Posted

技术标签:

【中文标题】Flutter - 动态传递导航小部件名称【英文标题】:Flutter - Pass Navigating Widget Name Dynamically 【发布时间】:2021-06-19 21:29:49 【问题描述】:

我创建了一个按钮小部件以避免重复代码,因为屏幕上有多个按钮。单击每个按钮应将其带到不同的屏幕。

class ButtonWidget extends StatelessWidget 
  final buttonText;
  final destination;
  ButtonWidget(this.buttonText, this.destination);
  @override
  Widget build(BuildContext context) 
    return InkWell(
        onTap: () 
          Navigator.push(context, MaterialPageRoute(builder: (context) 
            switch (destination) 
              case 'signUp':
               return SignUp();
               break;
              case 'signIn':
               return SignIn();
               break;
              case 'SignInGoogle':
               return SignInGoogle();
               break;
              default:
               return SignUp();
            
          ));
        ,
        child: Align(
            alignment: Alignment.bottomCenter,
            child: Container(
              constraints: BoxConstraints(
                  minHeight: 6.5 * SizeConfig.heightMultiplier,
                  maxHeight: 7.9 * SizeConfig.heightMultiplier),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.all(
                  Radius.circular(4 * SizeConfig.heightMultiplier),
                ),
                color: AppTheme.topBarBackgroundColor,
              ),
              child: Center(child: Text(buttonText)),
            )));
  

点击时我想导航到目标小部件。但这似乎不起作用。我以以下方式调用 ButtonWidget:

ButtonWidget(
   buttonText: Strings.signUp,
   destination: 'signUp',
)

【问题讨论】:

为什么不直接传递小部件而不是它的名称。像最终的小部件目的地; 您的ButtonWidget 是否总是导航到其他屏幕?是否有可能会弹出导航堆栈或具有不同的点击行为? 始终导航 【参考方案1】:

传递小部件而不是它的名称表示:

class ButtonWidget extends StatelessWidget 
  final buttonText;
  final Widget destination;
  ButtonWidget(this.buttonText, this.destination);
  @override
  Widget build(BuildContext context) 
    return InkWell(
        onTap: () 
          Navigator.push(context, MaterialPageRoute(builder: (context) => destination
          ));
        ,
        child: Align(
            alignment: Alignment.bottomCenter,
            child: Container(
              constraints: BoxConstraints(
                  minHeight: 6.5 * SizeConfig.heightMultiplier,
                  maxHeight: 7.9 * SizeConfig.heightMultiplier),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.all(
                  Radius.circular(4 * SizeConfig.heightMultiplier),
                ),
                color: AppTheme.topBarBackgroundColor,
              ),
              child: Center(child: Text(buttonText)),
            )));
  

实施:

ButtonWidget(
   buttonText: Strings.signUp,
   destination: SignUp(),
)

【讨论】:

谢谢。出于某种奇怪的原因,它没有早点工作。

以上是关于Flutter - 动态传递导航小部件名称的主要内容,如果未能解决你的问题,请参考以下文章

Flutter Hero 小部件未按预期工作

Flutter Navigator.pop 再次运行小部件构建方法

Flutter:导航时“小部件树中的多个全局键”

Flutter:小部件和导航的生命周期

Flutter:在堆栈小部件中动态添加拖放小部件

如何使用小部件在 Dataframe 选择语句中传递动态列名