Flutter学习路由传值的四种代码写法

最新推荐文章于 2024-05-27 08:00:00 发布

原创最新推荐文章于 2024-05-27 08:00:00 发布 · 350 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#dart #路由传值

Flutter学习专栏收录该内容

4 篇文章

订阅专栏

这篇博客详细介绍了在Flutter中进行路由传值的四种方法，包括直接在routes中书写、使用onGenerateRoute方法、综合使用routes和onGenerateRoute，以及通过ModelRoute传递值。并提供了具体的取值代码示例。

第一种：直接在routes中书写

@override
  Widget build(BuildContext context) {
    return MaterialApp(
      home:AppScaffoldFul(),
       routes: {
        // "/proudctlist":(context,{arguments})=>ProductList(arguments: arguments),
        "/cateory":(context)=>CateoryPage(),
      },

       // 处理Named页面跳转 传递参数
      onGenerateRoute: (RouteSettings setting) {
        if(setting.name == '/proudctlist') {
          return MaterialPageRoute(builder: (context) => ProductList(arguments: setting.arguments));
        }
      },
     
      // onGenerateRoute: generateRoute,
    );
  }
}

第二种:抽取方法onGenerateRoute

class MyApp2 extends StatelessWidget {
  const MyApp2({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home:AppScaffoldFul(),
       routes: {
        // "/proudctlist":(context,{arguments})=>ProductList(arguments: arguments),
        "/cateory":(context)=>CateoryPage(),
      },
      onGenerateRoute: generateRoute,
    );
  }
}

var generateRoute = (RouteSettings settings){

  String name = settings.name;
  print(name);
  if ("/proudctlist" == name) {
    return MaterialPageRoute(
      builder: (context)=> ProductList(arguments:settings.arguments)
      );
  }
};

第三种：（大家推荐）抽取 routes 和 onGenerateRoute

final routes = {
        "/proudctlist":(context,{arguments})=>ProductList(arguments: arguments),
        "/cateory":(context)=>CateoryPage(),
};

var generateRoute = (RouteSettings settings){

  //方式三
  final String name = settings.name;
  // final Function pageContentBuilder = (context,{arguments})=>ProductList(arguments: arguments);
  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;
    }
  }
};

取值代码如下


import 'package:flutter/material.dart';

class ProductList extends StatelessWidget {

  Map arguments;

   ProductList({Key key, this.arguments}) : super(key: key);


  @override
  Widget build(BuildContext context) {
     Map map = this.arguments;
    return Scaffold(
      appBar: AppBar(
        title:Text("列表标题")
      ),
      body: Text(
        "完成===${this.arguments['id']}"
        // "商品列表${(map == null )?map['id']:"222"}"
      ),
    );
  }
}

// "完成===${this.arguments['id']}"

"商品列表：${(map == null )?"没有获取参数":map['id']}"

四种：

官方新增加一种modelrout传值