美文网首页Flutter开发圈Flutter
『Flutter』路由正向逆向传值

『Flutter』路由正向逆向传值

作者: butterflyer | 来源:发表于2019-01-15 15:08 被阅读52次

    flutter路由跳转,在看过ios的路由,vue的路由,其实对于路由已经有了一些了解。

    这里需要学习的是flutter中路由正向传值逆向传值
    首先需要先注册路由

    void main(){
       runApp(flutterApp());
    }
    
    class flutterApp extends StatelessWidget{
      flutterApp({Key key}):super(key:key);
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return new MaterialApp(
          title: 'fluttertest',
          home: flutterWidget(),
          routes: <String,WidgetBuilder>{
            // ignore: not_enough_required_arguments, not_enough_required_arguments
            '/routerOne':(BuildContext context) => new RouterOne('')
          },
        );
      }
    }
    

    push跳转

    然后是跳转 静态跳转

    Navigator.of(context).pushNamed('/routerOne');
    

    动态跳转 正向传参

      Navigator.of(context).push(new MaterialPageRoute(builder: (context){
        return new RouterOne('xinhao test');
      }));
    

    动态跳转 逆向传参

      Navigator.push(
            context,
            new MaterialPageRoute(
                builder: (BuildContext context) =>
                    new RouterOne('xinhao test'))).then((data) {
                  setState(() {
                    _backData = data;
                  });
        });
    当执行pop的时候,pop中的参数就是then中的data
       Navigator.of(context).pop('xinhao');
    

    pop跳转

    Navigator.of(context).maybePop();
    

    maybePop 会自动进行判断,如果当前页面pop后,会显示其他页面,不会出现问题,则将执行当前页面的pop操作 否则将不执行。

    Navigator.of(context).canPop();
    

    canPop 判断当前页面能否进行pop操作,并返回bool值

    Navigator.of(context).pop()
    

    直接退出到上级页面

    因为这里需要做到传递参数,所以我们这里给routerone重新写了构造函数

    import 'package:flutter/material.dart';
    
    class RouterOne extends StatefulWidget {
    
      RouterOne(this.title);
      String title;
      @override
      _RouterOneState createState() => new _RouterOneState();
    }
    
    class _RouterOneState extends State<RouterOne> {
      @override
      Widget build(BuildContext context) {
        return new Scaffold(
          appBar: new AppBar(
            backgroundColor: Colors.red,
            title: new Text("demo1"),
          ),
          body: new Center(child: new Text(widget.title),),
        );
      }
    }
    

    这里需要注意,新建的dart文件要用脚手架把appbar布局出来,就跟ios一样,如果navbar没有,是不会有系统的navbar存在的。系统自带的返回按钮默认带pop事件。

    https://github.com/Butteryflyyer/FlutterStudyDemo这是我学习flutter的代码地址,平时写的demo都会放到这里面。

    相关文章

      网友评论

        本文标题:『Flutter』路由正向逆向传值

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