当前位置:   article > 正文

android跳转flutter 主题,flutter页面跳转 Route 使用汇总

android 跳转flutter具体的页面

一、push方式直接跳转

普通跳转

Navigator.push(context, MaterialPageRoute(builder: (BuildContext context) => Page1()));

复制代码

带参数跳转和接收参数

Navigator.push(context,

MaterialPageRoute(

builder: (BuildContext context) => Page2(),

settings: RouteSettings(name: "路由名",arguments: "这是页面2传递过来的参数")

));

复制代码final String message = ModalRoute.of(context).settings.arguments as String;

复制代码

构造函数直接传参

Navigator.push(context, MaterialPageRoute(builder: (BuildContext context) => Page3("这是传递过来的参数")));

//目标页面接收数据同上

final String message = ModalRoute.of(context).settings.arguments as String;

复制代码

跳转后携带参数返回

Future result = Navigator.of(context).push(MaterialPageRoute(

builder: (ctx) {

return Page3("传进来的参数,点击返回,携带参数返回");

}

));

//接收返回的参数

result.then((res) {

setState(() {

_handleMessage = res;

});

});

复制代码//返回页面传递的参数

Navigator.of(context).pop("这是返回携带的参数");

复制代码

二、命名路由跳转

先在入口页面配置路由

void main() {

runApp(MyApp());

}

class MyApp extends StatelessWidget {

@override

Widget build(BuildContext context) {

return MaterialApp(

title: 'Flutter Demo',

routes: WGRouter.routes,

initialRoute: WGRouter.main,//初始页面路由可代替home

onGenerateRoute: WGRouter.generateRoute,

onUnknownRoute: WGRouter.unknownRoute,

// home: MainPage(),

);

}

}

复制代码class WGRouter {

static final main = 'main';

static final pathPage1 = 'page_1';

static final pathPage2 = 'page_2';

static final pathPage3 = 'page_3';

static final Map routes = {

main: (ctx) => MainPage(),

pathPage1: (ctx){

return Page1();

},

pathPage2: (ctx) => Page2(),

};

static final RouteFactory generateRoute = (settings) {

if (settings.name == pathPage3) {

return MaterialPageRoute(

builder: (ctx) {

return Page3(settings.arguments);

}

);

}

return null;

};

static final RouteFactory unknownRoute = (settings) {

return MaterialPageRoute(

builder: (ctx) {

return WGUnknownPage();

}

);

};

}

复制代码

命名路由跳转

Navigator.of(context).pushNamed(WGRouter.pathPage1);

复制代码

命名路由携带参数跳转

Navigator.of(context).pushNamed(WGRouter.pathPage2,arguments:"命名路由携带的参数");

复制代码

三、完整代码和展示图

ec6a81eb1dd89025230edaf05e1298ab.png

class MainPage extends StatefulWidget {

@override

_MainPageState createState() => _MainPageState();

}

class _MainPageState extends State {

final _titles = ['普通跳转','带参数普通跳转','构造函数直接传参数','携带参数返回','命名路由',"命名路由带参数",'generate路由','未定义的页面'];

var _handleMessage = "";

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(title: Text('首页'),),

body: Container(

height: double.infinity,

width: double.infinity,

child: Column(

crossAxisAlignment: CrossAxisAlignment.center,

children: [

Text(_handleMessage),

buildJumpButton(context,_titles[0]),

buildJumpButton(context,_titles[1]),

buildJumpButton(context,_titles[2]),

buildJumpButton(context,_titles[3]),

buildJumpButton(context,_titles[4]),

buildJumpButton(context,_titles[5]),

buildJumpButton(context,_titles[6]),

buildJumpButton(context,_titles[7]),

],

),

),

);

}

Container buildJumpButton(BuildContext context,String title) {

return Container(

width: 300,

padding: EdgeInsets.only(top: 30),

child: CupertinoButton(

child: Text(title),

color: Color.fromARGB(255, Random.secure().nextInt(255), Random.secure().nextInt(255), Random.secure().nextInt(255)),

onPressed:()=>_jumpToPage(context,title),

),

);

}

void _jumpToPage(BuildContext context,String title) {

if(title == _titles[0]){

Navigator.push(context, MaterialPageRoute(builder: (BuildContext context) => Page1()));

// Navigator.push(context, CupertinoPageRoute(builder: (BuildContext context) => Page1()));

// Navigator.push(context, PageRouteBuilder(builder: (BuildContext context) => Page1()));

return;

}

if(title == _titles[1]){

Navigator.push(context,

MaterialPageRoute(

builder: (BuildContext context) => Page2(),

settings: RouteSettings(name: "路由名",arguments: "这是页面2传递过来的参数")

));

return;

}

if(title == _titles[2]){

Navigator.push(context, MaterialPageRoute(builder: (BuildContext context) => Page3("这是传递过来的参数")));

return;

}

if(title == _titles[3]){

Future result = Navigator.of(context).push(MaterialPageRoute(

builder: (ctx) {

return Page3("传进来的参数,点击返回,携带参数返回");

}

));

result.then((res) {

setState(() {

_handleMessage = res;

});

});

return;

}

if(title == _titles[4]){

Navigator.of(context).pushNamed(WGRouter.pathPage1);

return;

}

if(title == _titles[5]){

Navigator.of(context).pushNamed(WGRouter.pathPage2,arguments:"命名路由携带的参数");

return;

}

if(title == _titles[6]){

Navigator.of(context).pushNamed(WGRouter.pathPage3,arguments:"generate路由跳转");

return;

}

if(title == _titles[7]){

Navigator.of(context).pushNamed("天知道这是啥路径");

return;

}

}

}

复制代码

b739ec46bb5c46d9c0aa4ce35ba1ea56.png

关于找一找教程网

本站文章仅代表作者观点,不代表本站立场,所有文章非营利性免费分享。

本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章,希望广大程序员努力学习,让我们用科技改变世界。

[flutter页面跳转 Route 使用汇总]http://www.zyiz.net/tech/detail-140369.html

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/运维做开发/article/detail/810250
推荐阅读
相关标签
  

闽ICP备14008679号