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

一、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:"命名路由携带的参数");

复制代码

三、完整代码和展示图

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;

}

}

}

复制代码

关于找一找教程网

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

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

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