美文网首页
flutter 路由

flutter 路由

作者: 沐沐小火柴 | 来源:发表于2019-04-10 15:35 被阅读0次

    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

    普通跳转

    pushReplacementNamed

    跳转新页面并且替换原页面,比如登录页跳转主页, 当新的页面进入后,之前的页面将执行dispose方法

    Navigator.of(context).pushReplacementNamed('/home');
    

    pushReplacement

    同pushReplacementNamed 写法不同 可传递参数

    Navigator.of(context).pushReplacement(new MaterialPageRoute(builder: (context) => new Home()));
    

    popAndPushNamed

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

    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 写法不同 可传递参数

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

    popUntil

    pop直到...为止

    Navigator.of(context).popUntil(ModalRoute.withName('/red'));
    

    传参onGenerateRoute

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

    // 跳转
    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下面的一个路由方法

    相关文章

      网友评论

          本文标题:flutter 路由

          本文链接:https://www.haomeiwen.com/subject/mazniqtx.html