flutter页面跳转 Route 使用汇总

Posted 2021-07-04 飞翔的熊blabla

一、push方式直接跳转

普通跳转

Navigator.push(context, MaterialPageRoute(builder: (BuildContext context) => Page1()));
复制代码

带参数跳转和接收参数

      Navigator.push(context,
          MaterialPageRoute(
              builder: (BuildContext context) => Page2(),
              settings: RouteSettings(name: "路由名",arguments: "这是页面2传递过来的参数")
          ));
复制代码

final String message = ModalRoute.of(context).settings.arguments as String;
复制代码

构造函数直接传参

Navigator.push(context, MaterialPageRoute(builder: (BuildContext context) => Page3("这是传递过来的参数")));

//目标页面接收数据同上
final String message = ModalRoute.of(context).settings.arguments as String;
复制代码

跳转后携带参数返回

      Future result = Navigator.of(context).push(MaterialPageRoute(
          builder: (ctx) {
            return Page3("传进来的参数，点击返回，携带参数返回");
          }
      ));

      //接收返回的参数
      result.then((res) {
        setState(() {
          _handleMessage = res;
        });
      });
复制代码

//返回页面传递的参数
Navigator.of(context).pop("这是返回携带的参数");
复制代码

 

二、命名路由跳转

先在入口页面配置路由

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      routes: WGRouter.routes,
      initialRoute: WGRouter.main,//初始页面路由可代替home
      onGenerateRoute: WGRouter.generateRoute,
      onUnknownRoute: WGRouter.unknownRoute,
//      home: MainPage(),
    );
  }
}
复制代码

class WGRouter {

  static final main = 'main';
  static final pathPage1 = 'page_1';
  static final pathPage2 = 'page_2';
  static final pathPage3 = 'page_3';

  static final Map<String, WidgetBuilder> routes = {
    main: (ctx) => MainPage(),
    pathPage1: (ctx){
      return Page1();
    },
    pathPage2: (ctx) => Page2(),
  };


  static final RouteFactory generateRoute = (settings) {
    if (settings.name == pathPage3) {
      return MaterialPageRoute(
          builder: (ctx) {
            return Page3(settings.arguments);
          }
      );
    }
    return null;
  };

  static final RouteFactory unknownRoute = (settings) {
    return MaterialPageRoute(
        builder: (ctx) {
          return WGUnknownPage();
        }
    );
  };
}
复制代码

命名路由跳转

Navigator.of(context).pushNamed(WGRouter.pathPage1);
复制代码

命名路由携带参数跳转

Navigator.of(context).pushNamed(WGRouter.pathPage2,arguments:"命名路由携带的参数");
复制代码

三、完整代码和展示图

 

class MainPage extends StatefulWidget {

  @override
  _MainPageState createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {

  final _titles = ['普通跳转','带参数普通跳转','构造函数直接传参数','携带参数返回','命名路由',"命名路由带参数",'generate路由','未定义的页面'];

  var _handleMessage = "";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('首页'),),
      body: Container(
        height: double.infinity,
        width: double.infinity,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Text(_handleMessage),
            buildJumpButton(context,_titles[0]),
            buildJumpButton(context,_titles[1]),
            buildJumpButton(context,_titles[2]),
            buildJumpButton(context,_titles[3]),
            buildJumpButton(context,_titles[4]),
            buildJumpButton(context,_titles[5]),
            buildJumpButton(context,_titles[6]),
            buildJumpButton(context,_titles[7]),
          ],
        ),
      ),
    );
  }



  Container buildJumpButton(BuildContext context,String title) {
    return Container(
      width: 300,
      padding: EdgeInsets.only(top: 30),
      child: CupertinoButton(
        child: Text(title),
        color: Color.fromARGB(255, Random.secure().nextInt(255), Random.secure().nextInt(255), Random.secure().nextInt(255)),
        onPressed:()=>_jumpToPage(context,title),
      ),
    );
  }




  void _jumpToPage(BuildContext context,String title) {


    if(title == _titles[0]){
      Navigator.push(context, MaterialPageRoute(builder: (BuildContext context) => Page1()));
//      Navigator.push(context, CupertinoPageRoute(builder: (BuildContext context) => Page1()));
//      Navigator.push(context, PageRouteBuilder(builder: (BuildContext context) => Page1()));
      return;
    }

    if(title == _titles[1]){
      Navigator.push(context,
          MaterialPageRoute(
              builder: (BuildContext context) => Page2(),
              settings: RouteSettings(name: "路由名",arguments: "这是页面2传递过来的参数")
          ));
      return;
    }

    if(title == _titles[2]){
      Navigator.push(context, MaterialPageRoute(builder: (BuildContext context) => Page3("这是传递过来的参数")));
      return;
    }

    if(title == _titles[3]){
      Future result = Navigator.of(context).push(MaterialPageRoute(
          builder: (ctx) {
            return Page3("传进来的参数，点击返回，携带参数返回");
          }
      ));

      result.then((res) {
        setState(() {
          _handleMessage = res;
        });
      });
      return;
    }

    if(title == _titles[4]){
      Navigator.of(context).pushNamed(WGRouter.pathPage1);
      return;
    }

    if(title == _titles[5]){
      Navigator.of(context).pushNamed(WGRouter.pathPage2,arguments:"命名路由携带的参数");
      return;
    }

    if(title == _titles[6]){
      Navigator.of(context).pushNamed(WGRouter.pathPage3,arguments:"generate路由跳转");
      return;
    }

    if(title == _titles[7]){
      Navigator.of(context).pushNamed("天知道这是啥路径");
      return;
    }

  }
}

作者：二岁倒立走
链接：https://juejin.cn/post/6844904195573678088
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。