flutter中的路由(通过使用路由创建登录界面列表并将信息传递到指定路由)
flutter中的路由,根据是否有数据传递可以分成静态路由和动态路由;静态路由:可以实现简单的页面之间的跳转,所能传递的数据都是给定的值。具体的做法如下:1 创建路由表://创建路由表routes:{"new_page":(context)=>NewRoute(),"new_page2":(context)=>NewRoute2...
·
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]),
),
);
}
}
更多推荐


所有评论(0)