flutter中的路由,根据是否有数据传递可以分成静态路由和动态路由;
静态路由:可以实现简单的页面之间的跳转,所能传递的数据都是给定的值。
具体的做法如下:
1 创建路由表:

//创建路由表
      routes:{
        "new_page":(context)=>NewRoute(),
        "new_page2":(context)=>NewRoute2(),
      } ,

2 给具体的按键添加点击事件:

RaisedButton(
              onPressed: () {
               Navigator.pushNamed(context, "new_page");
              },
              child: new Text('按键1'),
              color: Colors.yellow,
            ),
            RaisedButton(
              onPressed: () {
                Navigator.pushNamed(context, "new_page2");
              },
              child: new Text('按键2'),
              color: Colors.yellow,
            ),

通过以上两步即可完成路由的设置,这种做法在无参数传递的时候可以方便的在各个不同页面之间切换。
动态路由:可以通过参数将需要传递的数据传递到下一跳的路由中进一步处理。
如下实例中,将输入框中的用户名称和密码通过动态路由传递到下一跳的路由中。
核心编码如下:
1 创建文本输入框:

 TextField(
                controller: _userNameController,
                keyboardType: TextInputType.number,
                decoration: new InputDecoration(
                    contentPadding: EdgeInsets.only(top: 20.0),
                    icon: new Icon(
                      Icons.phone,
                      size: 34,
                    ),
                    labelText: "请输入您的手机号"),
              ),
              TextField(
                controller: _PassWordController,
                keyboardType: TextInputType.number,
                decoration: new InputDecoration(
                    contentPadding: EdgeInsets.only(top: 20.0),
                    icon: new Icon(Icons.alarm, size: 34),
                    labelText: "请输入您的密码"),
              )

2 创建按键并给按键设置点击事件:

new Builder(builder: (BuildContext context) {
                    return new RaisedButton(
                      //按键  点击之后先做校验  如果没有问题 跳转到指定界面
                      onPressed: () {
                        List<String> lists = new List();                     
                        var name = _userNameController.text.toString().trim();
                        var password = _PassWordController.text.toString().trim();
                        lists.add(name);
                        lists.add(password);
                        if (name == "123" && password == "123") {
                          Scaffold.of(context).showSnackBar(
                              new SnackBar(content: Text("登录成功")));
                              //携带指定的数据跳转到指定的路由
                          Navigator.of(context).push(new PageRouteBuilder(
                              pageBuilder: (BuildContext context,
                                  Animation<double> animation,
                                  Animation<double> secondaryAnimation) {
                            return new ListPage(lists: lists);
                          }));
                        } else {
                        //提示框
                          Scaffold.of(context).showSnackBar(
                              new SnackBar(content: Text("输入有误")));
                        }
                      },
                      textColor: Colors.red,
                      color: Colors.amber,
                      child: Text('登录'),
                    );
                  }),

(其中跳转的核心代码如下:其中list中保存了用户名和密码的信息)

Navigator.of(context).push(new PageRouteBuilder(
                              pageBuilder: (BuildContext context,
                                  Animation<double> animation,
                                  Animation<double> secondaryAnimation) {
                            return new ListPage(lists: lists);
                          }));

3 创建新的路由页面(通过构造函数确定本路由可以接收的参数列表),通过build方法绘制具体的布局:

class ListPage extends StatelessWidget {
  final username;
  final List lists;
  //构造函数  加入需要传递的参数列表
 ListPage({this.username,this.lists});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("New route"),
        ),
        body: Center(child: Text("姓名是:"+lists[0]+"密码是:"+lists[1]),),
    );}
}

总的代码如下:
登录页面:

class LoginWidget extends StatelessWidget {
  //实例化俩个texteditingcontroller对象  用于回去输入框的状态
  TextEditingController _userNameController = new TextEditingController();
  TextEditingController _PassWordController = new TextEditingController();
  @override
  //绘制具体的布局  以及给指定的控件添加事件
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("New route"),
        ),
        body: Container(
          margin: EdgeInsets.only(top: 50.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[
              TextField(
                controller: _userNameController,
                keyboardType: TextInputType.number,
                decoration: new InputDecoration(
                    contentPadding: EdgeInsets.only(top: 20.0),
                    icon: new Icon(
                      Icons.phone,
                      size: 34,
                    ),
                    labelText: "请输入您的手机号"),
              ),
              TextField(  //输入框
                controller: _PassWordController,
                keyboardType: TextInputType.number,
                decoration: new InputDecoration(
                    contentPadding: EdgeInsets.only(top: 20.0),
                    icon: new Icon(Icons.alarm, size: 34),
                    labelText: "请输入您的密码"),
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: <Widget>[
                  //添加按键 并增加点击事件
                  new Builder(builder: (BuildContext context) {
                    return new RaisedButton(
                      //按键  点击之后先做校验  如果没有问题 跳转到指定界面
                      onPressed: () {
                        List<String> lists = new List();
                        var name = _userNameController.text.toString().trim();
                        var password = _PassWordController.text.toString().trim();
                        lists.add(name);
                        lists.add(password);
                        if (name == "123" && password == "123") {
                          //提示框(下方弹出)
                          Scaffold.of(context).showSnackBar(
                              new SnackBar(content: Text("登录成功")));
                          //导航到指定的路由位置  并携带指定的数据
                          Navigator.of(context).push(new PageRouteBuilder(
                              pageBuilder: (BuildContext context,
                                  Animation<double> animation,
                                  Animation<double> secondaryAnimation) {
                            return new ListPage(lists: lists);
                          }));
                        } else {
                          Scaffold.of(context).showSnackBar(
                              new SnackBar(content: Text("输入有误")));
                        }
                      },
                      textColor: Colors.red,
                      color: Colors.amber,
                      child: Text('登录'),
                    );
                  }),
                  new Builder(builder: (BuildContext context) {
                    return new RaisedButton(
                      onPressed: () {
                        Navigator.pushNamed(context, "register");
                      },
                      color: Colors.blue,
                      child: Text("注册"),
                    );
                  })
                ],
              )
            ],
          ),
        ));
  }
}

跳转后的界面如下:

class ListPage extends StatelessWidget {
  final username;
  final List lists;

  //构造函数  确定本路由可以接收的参数列表
  ListPage({this.username, this.lists});

  @override
  //绘制具体的布局
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("New route"),
      ),
      body: Center(
        child: Text("姓名是:" + lists[0] + "密码是:" + lists[1]),
      ),
    );
  }
}

Logo

开源鸿蒙跨平台开发社区汇聚开发者与厂商,共建“一次开发,多端部署”的开源生态,致力于降低跨端开发门槛,推动万物智联创新。

更多推荐