Flutter学习之路由管理

简介

路由管理其实就类似于原生开发中两个界面的跳转

简单跳转

先创建一个新的界面NewRoute

class NewRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("New route"),
      ),
      body: Center (
        child: Text("This is new route"),
      ),
  }
}

在首页添加一个按钮,点击事件跳转到新界面

      FlatButton(
              child: Text("Open New Route"),
              textColor: Colors.red,
              onPressed: () {
                Navigator.push( context, 
                  MaterialPageRoute(builder: (context) {
                    return NewRoute();
                  }));
              },
            ),

路由传值

新界面添加一个接收参数的text,显示在界面上,同时添加一个完成按钮,执行返回操作,并回调数据

class NewRoute extends StatelessWidget {
  NewRoute({
      Key key,
      this.text,  // 接收一个text参数
    }) : super(key: key);
    final String text;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("New route"),
      ),
      body: Center (
        // child: Text("This is new route"),
         child: Column(
            mainAxisAlignment: MainAxisAlignment.center,

            children: <Widget>[
              Text(text ?? "error"),
                RaisedButton(
                onPressed: () => Navigator.pop(context, "我是返回值"),
                child: Text("完成"),
              )
            ],
        ),
      ),
    );

  }
}

在首页中修改点击按钮,接收返回后的回调数据result,使用async和await组合.

    FlatButton(
              child: Text("Open New Route"),
              textColor: Colors.red,
              onPressed: () async {
                var result = await Navigator.push( context, 
                  MaterialPageRoute(builder: (context) {
                    return NewRoute(text: "hello world");
                  }));
                 print(result);
              },
            ),

注册路由表

在MyApp中注册路由routes

return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      routes: {
        "new_page": (context) => NewRoute(),
       // 省略其它路由注册信息...
      },
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );

首页也可以注册在routes中, 进行改造

 return MaterialApp(
      title: 'Flutter Demo',
      initialRoute: "/", // "/"路由作为首页
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      routes: {
        "new_page": (context) => NewRoute(),
        "/": (context) => MyHomePage(title: 'Flutter Demo Home Page'),
      },
      // home: MyHomePage(title: 'Flutter Demo Home Page'),
    );

在首页点击按钮事件进行修改

FlatButton(
  child: Text("Open New Route"),
  textColor: Colors.red,
  onPressed: () async {
    // var result = await Navigator.push( context, 
    //   MaterialPageRoute(builder: (context) {
    //     return NewRoute(text: "hello world");
    //   }));
    var result = await Navigator.pushNamed(context, "new_page");
      print(result);
  },
),

命名路由传递参数

跳转

FlatButton(
              child: Text("Open New Route"),
              textColor: Colors.red,
              onPressed: () async {
                // var result = await Navigator.push( context, 
                //   MaterialPageRoute(builder: (context) {
                //     return NewRoute(text: "hello world");
                //   }));
                var result = await Navigator.pushNamed(context, "new_page", arguments: "hello world");
                  print(result);
              },
            ),

接收

@override
  Widget build(BuildContext context) {
    var args = ModalRoute.of(context).settings.arguments;
}