网站建设app是什么,大连关键词,dede网站制作,wordpress怎么换头像不显示不出来转载请注明出处: https://learnandfish.com/概述 每个应用都有很多个页面#xff0c;在flutter中同样也有很多页面#xff0c;被称之为路由(Router)#xff0c;页面之间的跳转通过导航器(Navigator)进行管理。其中 Navigator.push 和 Navigator.pop 是最简单的跳转到新页面和…转载请注明出处: https://learnandfish.com/概述 每个应用都有很多个页面在flutter中同样也有很多页面被称之为路由(Router)页面之间的跳转通过导航器(Navigator)进行管理。其中 Navigator.push 和 Navigator.pop 是最简单的跳转到新页面和返回到上一级界面的方式。路由分为静态路由(即命名路由)和动态路由。页面之间跳转时往往需要传递参数这称之为路由传值。下面我们会一一带领大家学习。通过本篇文章的学习我们的目标是熟练掌握路由及传值以后进行应用开发时对页面跳转方面不再疑惑。静态路由(即命名路由) flutter中万物皆widget我们的页面(route)也是widget的子类所以我们定义一个界面也是通过继承widget实现。前面的博客我们已经定义过界面了比如计数器实例就是一个简单的页面也就是一个路由。下面我们来详细实现一个界面。首先我需要一个入口函数这个相信大家已经很熟悉了就是在main方法中调用runApp函数进入应用我们就不做详细介绍了直接给出代码。import package:flutter/material.dart;void main() runApp(MyApp());class MyApp extends StatelessWidget {overrideWidget build(BuildContext context) {// 常用固定写法生成Material风格的Appreturn MaterialApp(title: 路由使用,theme: ThemeData(// 默认为亮色主题可以设置[Brightness.dark]变成黑暗模式brightness: Brightness.light,),home: HomePage(), // 首页面);}
}class HomePage extends StatelessWidget {overrideWidget build(BuildContext context) {// 通过Scaffold可以方便的生成一个Material风格的页面return Scaffold(// 顶部导航栏appBar: AppBar(title: Text(主页面),),body: Center(child: RaisedButton(child: Text(我是第一个界面点击我进入第二个界面),onPressed: () {print(我是第一个界面点击我进入第二个界面);},),),);}
}
上面的代码是我们最常规的包含一个主页面的应用。后续我们写应用时候的基本框架也是在此基础上进行扩展。现在我们的想法是点击这个页面上的按钮跳转的第二个界面首先我们需要构造第二个界面。构造第二个界面其实和我们构造第一个界面HomePage一样继承widget重写自己想要的样式即可。实现了页面就要开始跳转逻辑。静态路由即命名路由在通过Navigator进行跳转之前需要在MaterialApp组件内显式声明路由的名称一旦声明路由的跳转方式就固定了所以称之为静态路由有唯一的名称所以也称之为命令路由。显式声明路由通过在MaterialApp内的routes属性进行定义。如果我们有很多个页面和很多个其他类型的组件都放在lib下对于后期维护简直是一大折磨所以分包是大多数平台的常规操作就是对有同一种特性的东西放置在同一个包下比如页面类的组件都放在pages包工具类的组件放在utils包下等。接下来我们就新建一个pages包把第二个界面SecondPage放进去把第一个界面HomePage也提取出来放到这个包下。我们分为一下三步进行静态路由的跳转首先在lib目录右键新建pages包接着在pages包下新建SecondPage.dart文件然后把HomePage提取到pages下成为单独的类。在RouteDemo类中的MaterialApp内声明routes属性为了显示声明路由的名称。使用Navigator进行页面的跳转和返回。import package:flutter/material.dart;// 引入页面路径
import pages/HomePage.dart;
import pages/SecondPage.dart;void main() runApp(MyApp());class MyApp extends StatelessWidget {overrideWidget build(BuildContext context) {// 常用固定写法生成Material风格的Appreturn MaterialApp(title: 路由使用,theme: ThemeData(// 默认为亮色主题可以设置[Brightness.dark]变成黑暗模式brightness: Brightness.light,),// 默认加载的页面initialRoute: /, // 首页面// 显式声明界面列表routes: {/: (context) HomePage(),/secondPage: (context) SecondPage(),},);}
}
首页面单独提取出来之后的代码如下。import package:flutter/material.dart;class HomePage extends StatelessWidget {overrideWidget build(BuildContext context) {// 通过Scaffold可以方便的生成一个Material风格的页面return Scaffold(// 顶部导航栏appBar: AppBar(title: Text(主页面),),body: Center(child: RaisedButton(child: Text(我是第一个界面点击我进入第二个界面),onPressed: () {print(我是第一个界面点击我进入第二个界面);// 跳转到第二个界面Navigator.pushNamed(context, /secondPage);},),),);}
}
第二个页面提取之后的代码。import package:flutter/material.dart;class SecondPage extends StatelessWidget {overrideWidget build(BuildContext context) {// 通过Scaffold可以方便的生成一个Material风格的页面return Scaffold(// 顶部导航栏appBar: AppBar(title: Text(第二个界面),),body: Center(child: RaisedButton(child: Text(我是第二个界面点击我进入第二个界面),onPressed: () {print(我是第二个界面点击我返回到第一个界面);// 返回上一个界面Navigator.pop(context);},),),);}
}
对于命名路由的跳转通过Navigator.pushNamed方法调用通过Navigator.pop方法返回上一级界面。动态路由 动态路由不需要显示声明直接通过代码实现。class MyApp extends StatelessWidget {overrideWidget build(BuildContext context) {// 常用固定写法生成Material风格的Appreturn MaterialApp(title: 路由使用,theme: ThemeData(// 默认为亮色主题可以设置[Brightness.dark]变成黑暗模式brightness: Brightness.light,),home: HomePage(),);}
}
在HomePage界面通过调用Navigator.push方法实现跳转。第二个页面的返回逻辑不变。Navigator.push(context,MaterialPageRoute(builder: (context) SecondPage(),));
动态路由的相互传参 有时候我们不仅需要跳转到对应界面还需要传递一些参数给下一个界面同时下一个界面返回时把某些参数再次传递给该界面。我们修改SecondPage组件的构造方法为了接收需要传递的参数。这时候我们第二个页面结构如下class SecondPage extends StatelessWidget {// 定义一个需要变量, 接收传递的参数final String title;// 为title设置一个默认参数这样的跳转该界面时可以不传值。SecondPage({Key key, this.title 第二个界面});overrideWidget build(BuildContext context) {// 通过Scaffold可以方便的生成一个Material风格的页面return Scaffold(// 顶部导航栏appBar: AppBar(title: Text(title),),body: Center(child: RaisedButton(child: Text(我是第二个界面点击我进入第二个界面),onPressed: () {print(我是第二个界面点击我返回到第一个界面);// 返回上一个界面Navigator.pop(context);},),),);}
}
第一个界面跳转的地方代码是这样的。Navigator.push(context,MaterialPageRoute(// 传递title为SecondPage跳转到第二个界面就会把标题设置为SecondPagebuilder: (context) SecondPage(title: SecondPage),));},
说完了从第一个页面往第二个页面传递了参数如果第二个页面返回时传递一句话然后第一个页面接收到这句话然后打印出来代码修改如下// HomePage页面代码
Navigator.push(context,MaterialPageRoute(// 传递title为SecondPage跳转到第二个界面就会把标题设置为SecondPagebuilder: (context) SecondPage(title: SecondPage),// 调用then等待接收返回数据)).then((value) print(value));// SecondPage页面代码Navigator.pop(context, 返回传递数据);
静态路由(即命名路由)的相互传参 讲完了动态路由及动态路由传参之后我们来讲一下静态路由传参参数的传递方式是flutter为我们定义好的我们只需要把固定代码拷贝回来稍微修改即可。为了更具有普遍性我们再定义一个页面ThirdPage。在我们显示声明了routes之后还需要在MaterialApp组件内添加onGenerateRoute属性内容进行参数传递的处理。完整代码如下import package:flutter/material.dart;import pages/HomePage.dart;
import pages/SecondPage.dart;
import pages/ThirdPage.dart;void main() runApp(MyApp());class MyApp extends StatelessWidget {// 声明所有的页面final routes {/: (context, {arguments}) HomePage(),/secondPage: (context, {arguments}) SecondPage(),/thirdPage: (context, {arguments}) ThirdPage(arguments: arguments),};overrideWidget build(BuildContext context) {// 常用固定写法生成Material风格的Appreturn MaterialApp(title: 路由使用,theme: ThemeData(// 默认为亮色主题可以设置[Brightness.dark]变成黑暗模式brightness: Brightness.light,),
// home: HomePage(),initialRoute: /, // 默认界面// 当页面跳转时进行参数处理onGenerateRoute: (RouteSettings settings) {// 获取声明的路由页面函数var pageBuilder routes[settings.name];if (pageBuilder ! null) {if (settings.arguments ! null) {// 创建路由页面并携带参数return MaterialPageRoute(builder: (context) pageBuilder(context, arguments: settings.arguments));} else {return MaterialPageRoute(builder: (context) pageBuilder(context));}}return MaterialPageRoute(builder: (context) HomePage());},);}
}
第二个页面传递参数时使用Navigator.pushNamed方法具体代码如下import package:flutter/material.dart;class SecondPage extends StatelessWidget {// 定义一个需要变量, 接收传递的参数final String title;// 为title设置一个默认参数这样的跳转该界面时可以不传值。SecondPage({Key key, this.title 第二个界面});overrideWidget build(BuildContext context) {// 通过Scaffold可以方便的生成一个Material风格的页面return Scaffold(// 顶部导航栏appBar: AppBar(title: Text(title),),body: Center(child: RaisedButton(child: Text(我是第二个界面点击我进入第二个界面),onPressed: () {print(我是第二个界面点击我进入第三个界面);// 通过arguments指定参数Navigator.pushNamed(context, /thirdPage,arguments: {title: 命令路由传递过来的title});},),),);}
}
第三个页面获取参数完整代码如下import package:flutter/material.dart;class ThirdPage extends StatelessWidget {final Map arguments;// 为title设置一个默认参数这样的跳转该界面时可以不传值。ThirdPage({Key key, this.arguments});overrideWidget build(BuildContext context) {// 通过Scaffold可以方便的生成一个Material风格的页面return Scaffold(// 顶部导航栏appBar: AppBar(title: Text(${arguments ! null ? arguments[title] : ThirdPage}),),body: Center(child: RaisedButton(child: Text(我是第三个界面点击我进入第二个界面),onPressed: () {print(我是第三个界面点击我返回到第二个界面);// 返回上一个界面Navigator.pop(context, 返回传递数据Page3);},),),);}
}
命名路由传参优化 上面我们已经实现了参数的传递但是routes页面列表和onGenerateRoute比较固定我们能够把这两个单独提取出来成为一个单独的类这样后期再创建页面或者维护的时候只需要修改这一个类就行了。我们新建一个PageConstants类进行提取修改后的代码如下import package:flutter/material.dart;// 引入页面路径
import ../pages/HomePage.dart;
import ../pages/SecondPage.dart;
import ../pages/ThirdPage.dart;// 声明所有页面
final routes {/: (context, {arguments}) HomePage(),/secondPage: (context, {arguments}) SecondPage(),/thirdPage: (context, {arguments}) ThirdPage(arguments: arguments),
};// 处理参数传递
// ignore: top_level_function_literal_block
var onGenerateRoute (RouteSettings settings) {// 获取声明的路由页面函数var pageBuilder routes[settings.name];if (pageBuilder ! null) {if (settings.arguments ! null) {// 创建路由页面并携带参数return MaterialPageRoute(builder: (context) pageBuilder(context, arguments: settings.arguments));} else {return MaterialPageRoute(builder: (context) pageBuilder(context));}}return MaterialPageRoute(builder: (context) HomePage());
};
这时候我们只需要简单修改MyApp组件即可import package:flutter/material.dart;
import package:hello_flutter/pages/PageConstants.dart;void main() runApp(MyApp());class MyApp extends StatelessWidget {overrideWidget build(BuildContext context) {// 常用固定写法生成Material风格的Appreturn MaterialApp(title: 路由使用,theme: ThemeData(// 默认为亮色主题可以设置[Brightness.dark]变成黑暗模式brightness: Brightness.light,),initialRoute: /, // 默认界面// 通过PageConstants引入onGenerateRoute: onGenerateRoute,);}
}
这样来看就会清爽很多。篇幅所限这次的内容就先讲到这里下篇文章继续讲往后的内容应该会单独讲一讲实现仿闲鱼底部tab页面切换和仿头条多tab页切换。为了第一时间获取最新文章请关注公众号 -- 程序员指北每一个关注都能让作者多搬一块砖。
