一:理解导航、页面切换
导航在手机应用中指的就是以页面为单位的切换。
语言 | 页面 | 切换方法 |
---|---|---|
iOS | ViewController | pushViewController/popViewController |
Android | Activity | startActivity()/finish() |
Flutter | StatelessWidget | Navigator.push()/Navigator.pop() |
当然iOS中还有presentViewController/dismissViewController,这种只是视图控制器的覆盖。假设每个App都是个大画板,navigation是将当前画板上的纸挪别的地方存起来,present是拿到另一张纸盖住。

二:Flutter中导航的问题
- 问:想要实现导航,就得知道flutter的页面是什么,如何创建页面?
- 答:右键在lib文件夹下新建与main.dart同级的dart文件,取名navigation。.dart类似iOS中的.m文件,Android中的.java。我理解的执行文件,在此文件中,我可以创建控件,执行方法等。其语法就是自己独有的Dart语言,后续慢慢学习。
- 问:类似iOS中的controller,Android的Activity,Flutter的页面是什么?
- 答:目前我只看到了StatelessWidget,继承他,就能将他的类认定为个页面。
- 问:跳转肯定需要触发事件,最简单的
- 答:目前我只看到了StatelessWidget,继承他,就能将他的类认定为个页面。
三:基础的导航切换
- 新建navigation.dart,在其中敲入如下代码,一个页面就有了
// 导入相关头文件
import 'package:flutter/material.dart';
class FirstPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('First Page'),
)
);
}
}
2.在main.dart 导入文件,找到工程初始化时生成的Text代码,在其下新生成个按钮
import 'navigation.dart';
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
new MaterialButton(
color: Colors.blueGrey, //背景颜色
textColor: Colors.white, //字体颜色
child: new Text("Navigation"), //字体名称
onPressed: (){ //点击事件
Navigator.push( //导航控件使用
context,
new MaterialPageRoute(builder: (context) => new FirstPage()),
);
})
]
3.我可以继续在navigation.dart中 添加页面,并加入相应的逻辑
class FirstPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('First Page'),
),
body: new Center(
child: new MaterialButton(child: new Text("下一页"), onPressed: () {
Navigator.push(context, new MaterialPageRoute(builder: (context) => new SecondPage()));
}),
),
);
}
}
class SecondPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('Second Screen')
),
body: new Center(
child: new RaisedButton(
child: new Text('Go back!'),
onPressed: (){
Navigator.pop(context); // 导航返回
},
),
),
);
}
}
四:另外一种方式
1:在main.dart中提前生成需要跳转的页面(路由名构成的 Map)
import 'navigation.dart';
import 'home.dart';
class MyApp extends StatelessWidget {
// This widget is the root of your application.-
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
routes: <String, WidgetBuilder> {
'/first': (BuildContext context) => FirstPage(),
'/second': (BuildContext context) => SecondPage(),
'/third': (BuildContext context) => ThirdPage(),
'/home': (BuildContext context) => HomePage(), // 新建个home.dart 是真正的主页,作为其它控件学习的入口
},
);
}
}
2:跳转
new MaterialButton(child: new Text("routes"), onPressed: (){
Navigator.of(context).pushNamed('/first');
})
// 真的主页 为了跳转入各个控件学习的过程
new MaterialButton(color: Colors.blueGrey, child: new Text("真正的主页"), onPressed: (){
Navigator.of(context).pushNamed('/home');
}),
五:传值(待续)
现在只是学习基础知识,有问题或新的学习心得会继续补充......
网友评论