路由管理

 一、直接启动方式(类似class显示启动)

1、Navigator.push(BuildContext context, Route<T> route) 

启动新页面,通过新页面构造方法进行传参

class HomePager extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("这是首页"),
      ),
      body: Center(
        child: MaterialButton(
          child: Text("跳转新页面"),
          onPressed: () async{
            var result = await Navigator.push(context, MaterialPageRoute(builder: (context) {
              return Pager1(text:"这是传递的参数");
            }));
            print("返回的结果:$result");
          },
        ),
      ),
    );
  }
}

2、Navigator.pop(BuildContext context, [result])

返回上个页面,通过[result]回传参数

class Pager1 extends StatelessWidget {
  final String text;

  Pager1({Key key, this.text}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("这个pager_1"),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            Text(text),
            MaterialButton(
              child: Text("返回"),
              onPressed: () {
                Navigator.pop(context, "这是返回值");
              },
            )
          ],
        ),
      ),
    );
  }
}

二、别名启动方式(类似隐式启动)

1、注册路由表

在入口Widget的routes中注册路由

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      initialRoute: "home",//第一个路由页面
      routes: {
        "home": (context) {
          return HomePager();
        },
        "pager_1": (context) {
          //兼容构造函数传参
          return Pager1(text: ModalRoute.of(context).settings.arguments,);
        },
        "pager_2": (context) {
          return Pager2();
        }
      },
    );
  }
}

2、页面跳转

class HomePager extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("这是首页"),
      ),
      body: Center(
        child: MaterialButton(
          child: Text("跳转新页面"),
          onPressed: () async{
            var result = await Navigator.pushNamed(context, "pager_1", arguments: "这是传递的参数");
            print("返回的结果:$result");
          },
        ),
      ),
    );
  }
}

(1)在构造方法获取传递参数

class Pager1 extends StatelessWidget {
  final String text;

  Pager1({Key key, this.text}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("这个pager_1"),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            Text(text),
            MaterialButton(
              child: Text("下一步"),
              onPressed: (){
                Navigator.pushNamed(context, "pager_2", arguments: "这是传递的参数");
              },
            ),
            MaterialButton(
              child: Text("返回"),
              onPressed: () {
                Navigator.pop(context, "这是返回值");
              },
            )
          ],
        ),
      ),
    );
  }
}

(2)在build方法中获取传递参数

class Pager2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final String text = ModalRoute.of(context).settings.arguments;//获取传参

    return Scaffold(
      appBar: AppBar(
        title: Text("这是pager_2"),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            Text(text),
            MaterialButton(
              child: Text("返回"),
              onPressed: () {
                Navigator.pop(context);
              },
            )
          ],
        ),
      ),
    );
  }
}

3、路由拦截

将routes中注册代码移至onGenerateRoute中

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      initialRoute: "home",
      onGenerateRoute: (RouteSettings settings) {
        return MaterialPageRoute(builder: (context) {
          if (Contants.IS_LOGINED) {//已经登录
            switch (settings.name) {
              case "home":
                return HomePager();
              case "pager_1":
                return Pager1(
                  text: ModalRoute.of(context).settings.arguments,
                );
              case "pager_2":
                return Pager2();
              default:
                return HomePager();
            }
          } else {
            return HomePager();
          }
        });
      },
    );
  }
}

猜你喜欢

转载自blog.csdn.net/yufumatou/article/details/111876620