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命名路由的名称。

​​​​​​​

你可能感兴趣的:(flutter,java,前端)