Flutter 路由传参配置

本文介绍了在Flutter中配置路由传参的方法,通过Routers.dart文件展示了如何定义路由映射,并在具体页面间进行参数传递。在列表页,利用`Navigator.pushNamed`方法将数据作为参数传递到详情页。在详情页,通过`widget.arguments`获取传递的数据。这是一个关于Flutter前端开发中路由管理和数据传递的实例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Flutter 路由传参配置

  • 在项目目录routers有一个Routers.dart文件(代码如下)
import 'package:cai_customer/pages/orderDetail/Detail.dart';

final Map<String, Object> routes = {
  '/': (context) => TabContainer.Tab(),
  '/orderDetail': (context, {arguments}) => OrderDetail(arguments: arguments),
};

//固定写法
var onGenerateRoute = (RouteSettings settings) {
  // 统一处理
  final String name = settings.name;
  final Function pageContentBuilder = routes[name];
  if (pageContentBuilder != null) {
    if (settings.arguments != null) {
      final Route route = MaterialPageRoute(
          builder: (context) =>
              pageContentBuilder(context, arguments: settings.arguments));
      return route;
    } else {
      final Route route =
          MaterialPageRoute(builder: (context) => pageContentBuilder(context));
      return route;
    }
  }
};

以上就是路由配置得部分,接下来贴出如何使用,例子,列表跳转详情

  • 列表传值输入
child: InkWell(
  onTap: () {
    _toggleFavorite();
  },
  child: Text("查看",
      style: TextStyle(
          color: Colors.orange,
          fontSize: 12)),
),

void _toggleFavorite() {
    Navigator.pushNamed(context, '/orderDetail', arguments: data); //data为我们传递参数
  }
  • 详情取值
class OrderDetail extends StatefulWidget {
  Map arguments;
  OrderDetail({Key key, this.arguments}) : super(key: key);

  @override
  _OrderDetailState createState() => _OrderDetailState();
}

class _OrderDetailState extends State<OrderDetail> {
  Map data;
  @override
  void initState() {
    data = widget.arguments;  //data就是拿到的传输数据
    // TODO: implement initState
    super.initState();
    getDetail();
  }
}  
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值