flutter 路由

时间 2019-11-07

原文原文链接

Navigator

参数

push 将设置的router信息推送到Navigator上，实现页面跳转。
of 主要是获取 Navigator最近实例的好状态。
pop 导航到新页面，或者返回到上个页面。
canPop 判断是否能够导航到新页面
maybePop 可能会导航到新页面
popAndPushNamed 指定一个路由路径，并导航到新页面。
popUntil 反复执行pop 直到该函数的参数predicate返回true为止。
pushAndRemoveUntil 将给定路由推送到Navigator，删除先前的路由，直到该函数的参数predicate返回true为止。
pushNamed 将命名路由推送到Navigator。
pushNamedAndRemoveUntil 将命名路由推送到Navigator，删除先前的路由，直到该函数的参数predicate返回true为止。
pushReplacement 路由替换。
pushReplacementNamed 这个也是替换路由操做。推送一个命名路由到Navigator，新路由完成动画以后处理上一个路由。
removeRoute 从Navigator中删除路由，同时执行Route.dispose操做。
removeRouteBelow 从Navigator中删除路由，同时执行Route.dispose操做，要替换的路由是传入参数anchorRouter里面的路由。
replace 将Navigator中的路由替换成一个新路由。
replaceRouteBelow 将Navigator中的路由替换成一个新路由，要替换的路由是是传入参数anchorRouter里面的路由。

push

// 不传参
Navigator.push(
    context,
    new MaterialPageRoute(builder: (context) => new SecondScreen()),
);

//传参
Navigator.push(
  context,
  new MaterialPageRoute(
    builder: (context) => new ContentScreen(articles[index]),
  ),
);
// 不一样写法
Navigator.push<String>(context, new MaterialPageRoute(
  builder: (BuildContext context) {
    return new Add(title: i.toString());
  },
));
// 接收
final Article article;
ContentScreen(this.article);

final String title;   // 储存传递过来的参数
Add({this.title});
复制代码

pop

// 不传参
Navigator.pop(context);
// 传参
Navigator.pop(context, 'Like');
// 接收
void add() async{
    String result = await Navigator.push(context, MaterialPageRoute(
      builder: (BuildContext context) {
        return new Add();
      },
    ));
    
    print(result);
}
复制代码

定制路由动画

onTap: () async {
  String result = await Navigator.push(
      context,
      new PageRouteBuilder(
        transitionDuration: const Duration(milliseconds: 1000),
        pageBuilder: (context, _, __) =>
            new ContentScreen(articles[index]),
        transitionsBuilder:
            (_, Animation<double> animation, __, Widget child) =>
                new FadeTransition(
                  opacity: animation,
                  child: new RotationTransition(
                    turns: new Tween<double>(begin: 0.0, end: 1.0)
                        .animate(animation),
                    child: child,
                  ),
                ),
      ));

  if (result != null) {
    Scaffold.of(context).showSnackBar(
      new SnackBar(
        content: new Text("$result"),
        duration: const Duration(seconds: 1),
      ),
    );
  }
},
复制代码

命名导航器路由(MaterialApp)

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Navigation',
      initialRoute: '/',
      routes: <String, WidgetBuilder>{
        '/': (BuildContext context) => new ArticleListScreen(),
        '/new': (BuildContext context) => new NewArticle(),
      },
    );
  }
}

// 跳转
Navigator.of(context).pushNamed('/new');
Navigator.pushNamed(context, '/b');
复制代码

pushNamed

普通跳转bash

pushReplacementNamed

跳转新页面而且替换原页面，好比登陆页跳转主页, 当新的页面进入后，以前的页面将执行dispose方法less

Navigator.of(context).pushReplacementNamed('/home');
复制代码

pushReplacement

同pushReplacementNamed 写法不一样可传递参数async

Navigator.of(context).pushReplacement(new MaterialPageRoute(builder: (context) => new Home()));
复制代码

popAndPushNamed

销毁当前页面并跳转指向新的页面动画不太友好ide

pushNamedAndRemoveUntil

跳转到新的路由，而且关闭给定路由的以前的全部页面函数

指将制定的页面加入到路由中，而后将其余全部的页面所有pop, (Route route) => false将确保删除推送路线以前的全部路线。这时候将打开一个新的screen4页面动画

Navigator.of(context).pushNamedAndRemoveUntil('/home', (route) => route == null);

// 到red为止
Navigator.of(context).pushNamedAndRemoveUntil('/home', ModalRoute.withName('/red'));
复制代码

pushAndRemoveUntil

同pushNamedAndRemoveUntil 写法不一样可传递参数ui

Navigator.of(context).pushAndRemoveUntil(MaterialPageRoute(builder: (context) => new Home()), ModalRoute.withName('/home'));
复制代码

popUntil

pop直到...为止this

Navigator.of(context).popUntil(ModalRoute.withName('/red'));
复制代码

传参onGenerateRoute

onGenerateRoute ：生成路由的回调函数，当导航的命名路由的时候，会使用这个来生成界面spa

// 跳转
Navigator.of(context).pushNamed('/add/' + i.toString());

// 定义
class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'TODO',
      theme: new ThemeData(
        primaryColor: Colors.purple,
      ),
      home: new Home(),
      routes: <String, WidgetBuilder>{
        '/add': (context) => new Add()
      },
      onGenerateRoute: (RouteSettings settings) {
        print(settings);
        WidgetBuilder builder;
        if (settings.name == '/') {
          builder = (BuildContext context) => new Add();
        } else {
          String param = settings.name.split('/')[2];
          builder = (BuildContext context) => new Add();
        }

        return new MaterialPageRoute(builder: builder, settings: settings);
      }
    );
  }
}
复制代码

MaterialPageRoute

属于MaterialApp下面的一个路由方法code