Flutter之命名路由页面传值

一.在风格组件MaterialApp内的routes可选参数中创建命名路由

MaterialApp{
    .....    //其他代码无关
    home: MyHomePage()
    routes{    //在routes中注册路由
        "new_SearchPage":(context) => newPage()    //注册一个路由器名称
    }
}

提示:"new_SearchPage" 是命名路由的名称。

.在点击按钮的时候,响应Push路由器跳转

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
          child: ElevatedButton(
              onPressed: () {
                Navigator.pushNamed(context, "new_SearchPage", arguments: "helloRoute");
              },
              child: Text("页面传参")),
        ));
  }
}

提示:context 记录widget分枝节点操作信息,便于widget遍历执行    
             routeName 路由器名称     
             arguments 传值(可选参数)

.在对应Widget内接收参数并且使用。

class newPage extends StatelessWidget {    
  const newPage({super.key});
    
  @override
  Widget build(BuildContext context) {
    var args = ModalRoute.of(context)?.settings.arguments;    //接收参数
    return Scaffold(
      appBar: AppBar(
        title: Text("${args}"),
      ),
      body: Text("welcome to RoutePage"),
    );
  }
}

提示:ModalRoute.of(context) 获取跳转路由,settings路由的设置,内有arguments传值和name命名路由的名称。

​​​​​​​

  • 5
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值