在Flutter中,导航器管理应用程序的路由栈。将路由推入(push)到导航器的栈中,将会显示更新为该路由页面。 从导航器的栈中弹出(pop)路由,将显示返回到前一个路由。
在main.dart中一般home属性设置的部件为路由的根。如果不通过home属性设置,可以通过initialRoute来设置根路由,initialRoute设置的页面就是app默认显示的页面。
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'TestApp',
debugShowCheckedModeBanner: false, // 是否显示debug状态标签
theme: ThemeData(
primarySwatch: Colors.yellow, // 设置主题颜色
highlightColor: Color.fromRGBO(255, 255, 255, 0.5), // 设置主题高亮颜色
splashColor: Colors.white70, // 设置按钮点击水波纹颜色
accentColor: Colors.blue,
),
// home: Home(), // home属性设置的部件为路由的根
// 如果不用home设置可以直接设置根路由,然后在routes里面定义根路由
initialRoute: '/form', // 如果这里initialRoute设置初始路由为'/form',那么默认就显示form页面
// 事先定义好带名字带路由,然后在push的时候可以使用Navigator.pushNamed方法进行跳转
routes: {
// '/'表示路由的根,即初始路由,默认要显示的页面
'/' : (context) => Home(),
'/form' : (context) => FormDemo(),
},
);
}
}
页面跳转的方法:
class ListViewDemo extends StatelessWidget {
// 定义列表项
Widget _listItemBuilder(BuildContext context, int index) {
return Container(
color: Colors.white,
margin: EdgeInsets.all(8.0),
child: Stack(
children: <Widget>[
Column(
children: <Widget>[
AspectRatio(aspectRatio: 1/1, child: Image.network(items[index].imageUrl, fit: BoxFit.cover,),),
SizedBox(height: 16.0,),
Text(
items[index].title,
style: Theme.of(context).textTheme.title,
),
Text(
items[index].subTitle,
style: Theme.of(context).textTheme.subhead,
),
SizedBox(height: 16.0,)
],
),
// 添加溅墨渐变效果
Positioned.fill(
child: Material(
color: Colors.transparent,
child: InkWell(
splashColor: Colors.white.withOpacity(0.3),
highlightColor: Colors.white.withOpacity(0.1),
onTap: () {
// 使用Navigator.pushNamed方法跳转页面,需要提前在路由中定义好
// Navigator.pushNamed(context, '/home_list_detail');
Navigator.of(context).push(
MaterialPageRoute(builder: (context) => ListItemDetail(item: items[index]))
);
},
),
),
),
],
),
);
}
@override
Widget build(BuildContext context) {
// 构造list View
return ListView.builder(itemCount: items.length, itemBuilder: _listItemBuilder);
}
}