界面之间的简单切换(Navigator跳转界面)
- flutter界面显示是用一个栈来存储的,栈顶为当前显示的界面。
Navigator
类中, push
相关的方法就是跳转到指定界面的方法,pop
相关的方法就是返回上一个界面的方法。
-
MaterialApp
类中定义了各个界面的key值,方便跳转。
import 'package:flutter/material.dart';
import 'package:todo_list/view/logo.dart';
import 'package:todo_list/view/main_list.dart';
void main() => runApp(MaterialApp(
initialRoute: 'logo',//定义初始界面为logo界面
routes: {//定义key值对应的界面
'logo': (context)=>Logo(),
'main_list':(context)=>MainList(),
},
));
import 'package:flutter/material.dart';
class Logo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: RaisedButton(
onPressed: () {
Navigator.pushNamed(
context,
'main_list'
);//跳转到指定界面
},
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text(
'BOX',
textDirection: TextDirection.ltr,
style: TextStyle(
fontSize: 60,
color: Color(0xffffffff)
),
),
Text(
'Todo List',
textDirection: TextDirection.ltr,
)
],
),
)
),
);
}
}
import 'package:flutter/material.dart';
class MainList extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: RaisedButton(
onPressed: ()=>{
Navigator.pop(context)//返回上一个界面
},
child: Text(
'this is main list page',
textDirection: TextDirection.ltr,
),
),
),
);
}
}
网友评论