title: Text(item[“title”],style: TextStyle(fontSize: 18.0) ),
subtitle: Text(item[“subtitle”]),
leading: Icon( Icons.fastfood, color:Colors.orange ),
trailing: Icon(Icons.keyboard_arrow_right)
));
}
//返回整个页面
return Scaffold(
appBar: AppBar(
title: Text(“List Page”),
),
body: Center(
child: ListView(
children: list,
)
),
);
}
}
在main.dart增加list页面的引入
import ‘list.dart’;
修改Home页的按钮事件,增加Navigator.push跳转
FlatButton(
color: Colors.blue,textColor: Colors.white,
onPressed: () {
Navigator.push(context, MaterialPageRoute(builder:(context) {
return ListPage();
}));
},
child: Text(“Click ME”,style: TextStyle(fontSize: 20.0) ),
)
核心方法就是:Navigator.push(context,MaterialPageRoute)
跳转示例:
6.2 更多页面跳转使用路由表
在MaterialApp中,有一个属性是routes,我们可以对路由进行命名,这样跳转的时候,只需要使用对应的路由名字即可,如:Navigator.pushNamed(context, RouterName)。点击两个不同的按钮,分别跳转到ListPage,和Page2去。
Main.dart修改一下如下:
import ‘package:flutter/material.dart’;
import ‘list.dart’;
import ‘page2.dart’;
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: ‘Flutter Demo’,
//路由表定义
routes:{
“ListPage”:(context)=> ListPage(),
“Page2”:(context)=> Page2(),
},
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget{
@override
MyHomePageState createState() => MyHomePageState();
}
class MyHomePageState extends State{
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(“我是Title”),
),
body: Center(
child:Column(
children:[
RaisedButton(
child: Text(“Clikc to ListPage” ),
onPressed: () {
//根据命名路由做跳转
Navigator.pushNamed(context, “ListPage”);
},
),
RaisedButton(
child: Text(“Click to Page2” ),
onPressed: () {
//根据命名路由做跳转
Navigator.pushNamed(context, “Page2”);
},
)
]
)
)
);
}
}
示例:
当我们有了路由以后,就可以开始在一个项目里用不同的页面,去学习不同的功能了。