Flutter 路由传参配置

原创已于 2022-06-09 10:56:55 修改 · 502 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #路由传参

于 2021-11-06 15:43:22 首次发布

Flutter 同时被 2 个专栏收录

10 篇文章

订阅专栏

Dart

7 篇文章

订阅专栏

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

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();
  }
}