美文网首页Flutter
Flutter页面导航

Flutter页面导航

作者: jeremyplus | 来源:发表于2019-04-28 16:08 被阅读0次

    总结一下flutter内部页面关于导航的几种用法:

    一. 使用Navigator的push方法,并实现MaterialPageRoute的build方法,打开新页面:

    Navigator.push(context, MaterialPageRoute(builder: (_) {
      return DetailScreen()
    }
    

    返回用navigator的pop方法

    Navigator.pop(context);
    

    二.用页面的名字导航到不同页面:

    void main() {
      runApp(MaterialApp(
        title: 'navi base',
        //1.设置初始页面的名字.
        initialRoute: '/',
        //2.在runApp里初始化路由数组routes
        routes: {
          '/': (context) => FirstRoute(),
          '/second': (context) => SecondRoute()
        },
      ));
    }
    

    使用navigator的pushNamed方法push到对应的页面

    Navigator.pushNamed(context, '/second');
    

    三.导航时带参数:

    1.用navigator的pushNamed方法push页面,在arguments里加入参数:

    Navigator.pushNamed(context, ExtractArgumentsScreen.routeName, 
      arguments: ScreenArguments(  'Extract Arguments Screen',  'This message is extracted in the build method.', ), 
    );
    

    在导航的目的页面的build方法里用ModalRoute.of(context)方法获取需要的参数:

    final ScreenArguments args = ModalRoute.of(context).settings.arguments;
    

    2.或者使用onGenerateRoute方法:

    MaterialApp(
      onGenerateRoute: (settings) {
          // 从这里拿到数据并解析
        if (settings.name == PassArgumentsScreen.routeName) {
          final ScreenArguments args = settings.arguments;
        //解析成功之后再创建目的页面,传递参数
          return MaterialPageRoute(
            builder: (context) {
              return PassArgumentsScreen(
                title: args.title,
                message: args.message,
              );
            },
          );
        }
      },
    );
    

    四.返回的时候带参数:

    第二个页面返回到第一个页面的时候如果要带参数,可以使用async异步方法来实现

    //......略.......
    onPressed: () {
      //button的点击事件是一个异步方法:
      _navigateAndDisplaySelection(context);
    },
    //......略.......
    //实现这个异步方法
    _navigateAndDisplaySelection(BuildContext context) async {
       final result = await Navigator.push(
        context,
        MaterialPageRoute(builder: (context) => SecondScreen()),
       );
    }
    //获取到返回值result之后进行相应的操作:
    Scaffold.of(context)
      ..removeCurrentSnackBar()
       ..showSnackBar(SnackBar(content: Text("$result")));
    .............
    

    五.用页面的初始化方法传递参数:

    class DetailScreen extends StatelessWidget {
      //属性
      final Todo todo;
      //声明初始化方法的时候加上参数this.todo
      DetailScreen({Key key, @required this.todo}) : super(key: key);
      @override
      Widget build(BuildContext context) {
        // 生成UI
        return Scaffold(
          appBar: AppBar(
            title: Text(todo.title),
          ),
          body: Padding(
            padding: EdgeInsets.all(16.0),
            child: Text(todo.description),
          ),
        );
      }
    }
    

    用navigator的push方法,在页面的初始化方法中传递参数:

     onTap: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => DetailScreen(todo: todos[index]),//用页面的初始化方法传递参数
              ),
            );
          },
    

    相关文章

      网友评论

        本文标题:Flutter页面导航

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