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 - 动态传递导航小部件名称的主要内容,如果未能解决你的问题,请参考以下文章