用户登录

在 main.dart 里面 .. App 小部件是应用的 Root 小部件 .. 它里面用了一个 MaterialApp .. 这个小部件里的 home 属性的值,就相当于是路由堆里面最底下的那个路由 .. 也就是一开始显示的屏幕,或者叫页面 .. 把新的路由 push 到这个路由堆的上面,屏幕上就会显示新 push 上来的这个页面了 ..

先去创建一个演示用的小部件 .. 把 home 属性的值,暂时换成一个 NavigatorDemo .. 在文件的上面,导入一个 demo .. navigator_demo.dart ... 打开资源管理器,在 lib .. demo 的下面,新建一个文件 .. 名字是 navigator_demo.dart ..

文字顶部导入 flutter 包里面的 material.dart ..

下面再创建一个 Stateless 类型的 Widget .. 名字可以是 NavigatorDemo .. 类里面的 build 方法 return 的东西可以是一个 Scaffold .. 设置一下 body ,界面的主体 .. 暂时先用一个 Center ... 它的 child 是个 Row .. 添加一组并排显示的内容 .. 里面先把 mainAxisAlignment 设置成 MainAxisAlignment.center ..

这个 Row 的 children 是一组 widget ... 里面先添加一个 FlatButton .. 一个没什么样式的按钮 .. 它的 child 是个 Text .. 要显示的文字是 Home .. 按钮需要一个 onPressed 属性,先把它设置成 null ..

复制一份,再添加一个按钮 .. 按钮上的文字是 About ..

Page

现在我想在用户点了这个 About 按钮以后,打开一个新的页面 .. 下面可以再创建一个 Widget .. 类型是 StatelessWidget .. 名字是 Page ..

小部件里面添加一个 String 类型的属性,名字叫 title ... 一个构造函数 ... 里面添加一个 this.title .. 这样在使用这个小部件的时候我们需要设置它的这个 title 属性的值 .. 这个属性的值可以在小部件的内部用到 ..

让 build 方法 return 的是一个 Scaffold .. 里面先添加一个 appBar .. 值是一个 AppBar 小部件 .. 添加一个 title 属性,设置一下工具栏的标题 .. 要显示的文字是小部件里的 title 属性的值 ..

再把 elevation 的值设置成 0.0 ..

打开新页面并返回(push 与 pop):准备《 Flutter 移动应用:路由 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点