fluro

fluro导航示例程序:

分了4个文件:

1:main.dart: 主入口文件;

2:routes.dart 路径文件;

3:pageone.dart

4:pagetwo.dart

 

 

main.dart

import 'package:flutter/material.dart';
import 'package:fluro/fluro.dart';
import 'routes.dart';

///启动
void main() {
///初始化并配置路由
final router = Router();
Routes.configureRoutes(router);
runApp(
MaterialApp(
onGenerateRoute: Routes.router.generator
)
);
}




routes.dart
import 'package:fluro/fluro.dart';
import 'pagetwo.dart';
import 'pageone.dart';

class Routes {
static Router router;

static void configureRoutes(Router router) {
router.define(
'/', handler: Handler(handlerFunc: (context, params) => Page1()));
router.define(
'/page2', handler: Handler(handlerFunc: (context, params) {
return Page2(params['data'][0]);
}));
Routes.router = router;
}
}



pageone.dart
import 'package:fluro/fluro.dart';
import 'package:flutter/material.dart';
import 'routes.dart';
import 'dart:convert';

///第一个界面
class Page1 extends StatefulWidget {
@override
State<StatefulWidget> createState() => Page1State();
}

class Page1State extends State<Page1> {
String fuck = '一';

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('第一个页面'),
actions: <Widget>[
IconButton(
icon: Icon(Icons.chevron_right),
onPressed: () => intentTo(context)
)
],
),
body: Center(
child: Text(fuck)
),
);
}

///跳转到第二个界面
intentTo(BuildContext context) {
///字符串编码
var json = jsonEncode(Utf8Encoder().convert('来自第一个界面'));
Routes.router.navigateTo(
context, '/page2?data=$json',//跳转路径
transition: TransitionType.inFromRight//过场效果
).then((result) {//回传值
if (result != null) {
fuck = result;
}
});
}
}



pagetwo.dart
import 'package:flutter/material.dart';
import 'dart:convert';

///第二个界面
class Page2 extends StatelessWidget {
final String datas;

const Page2(this.datas);

@override
Widget build(BuildContext context) {
var list = List<int>();
///字符串解码
jsonDecode(datas).forEach(list.add);
final String value = Utf8Decoder().convert(list);
return Scaffold(
appBar: AppBar(
title: Text('第二个页面'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(value),
RaisedButton(
onPressed: () => Navigator.pop(context, '来自第二个界面'),
child: Text('返回上一个界面')
)
],
)
)
);
}
}


转载于:https://www.cnblogs.com/braveheart007/p/10968217.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Flutter中,使用Fluro库实现带参数的路由非常简单。首先,你需要在route_handlers.dart文件中定义一个处理函数,该函数接收参数并返回相应的界面。在这个函数中,你可以使用路由参数来获取传递的参数值。例如,在你的代码中,settingHandler是一个处理函数,它接收一个BuildContext对象和一个Map<String, List<String>>类型的参数params,并从params中获取'id'参数的值args。然后,你可以使用该参数值来创建一个Setting界面的实例,并返回该实例。这样,当Fluro路由系统匹配到"/setting"路由时,它会调用settingHandler处理函数并传递参数。 接着,在route.dart文件中,你需要配置路由并将路由与对应的处理函数关联起来。你可以使用FluroRouter的define方法来注册路由,并使用handler参数指定对应的处理函数。在你的代码中,Routes类的configureRoutes方法中使用了router.define方法注册了"/setting"路由,并将settingHandler作为其处理函数。这样,当导航器导航到"/setting"路由时,Fluro路由系统会调用settingHandler处理函数来处理该路由。 总结起来,要实现Flutter Fluro带参数的路由,你需要在route_handlers.dart中定义处理函数,接收参数并返回相应的界面实例。然后,在route.dart中配置路由并将路由与对应的处理函数关联起来。这样,当导航器匹配到相应的路由时,Fluro路由系统会调用处理函数并传递参数,从而实现带参数的路由导航。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值