flutter——命名路由跳转传值

    Flutter中给我们提供了两种配置路由跳转的方法：

        - 基本路由：需要在跳转的模块导入需要跳转的路由

        - 命名路由：直接在main.dart中配置，其他组件可以直接调用

1.命名路由的使用

（1）main.dart的MaterialApp中添加参数

  import 'pages/Form.dart';

  import 'pages/Search.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Tabs(),
      // 配置命名路由
      routes: {
        "/form": (context) => FormPage(),
        "/search": (context) => SearchPage(),
      },
    );
  }
}

• routes参数中的键值对就是路由对应的组件，需要在文件顶部引入对应的组件

（2）使用路由跳转

示例：在一个按钮点击事件中跳转路由：

        RaisedButton(
          child: Text("跳转搜索页面"),
          onPressed: () {
            // 普通路由跳转到搜索页面
            Navigator.pushNamed(context, '/search');
          },
        ),

 2.命名路由的传参

（1）main.dart配置

import 'package:flutter/material.dart';
import 'package:learn_demo/pages/Search.dart';
import './pages/Tabs.dart';
import 'pages/Form.dart';
import 'pages/Search.dart';

void main() {
  runApp(MyApp());
}

// 自定义组件
class MyApp extends StatelessWidget {
  final routes = { "/form": (context) => FormPage(),
    "/search": (context, {arguments}) => SearchPage( arguments: arguments, ), };

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Tabs(),
      // 配置命名路由
      // ignore: missing_return
      onGenerateRoute: (RouteSettings settings) {
        final String name = settings.name;
        print(name);
        final Function pageContentBuilder = this.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; } } },
    );
  }
}

 

• 主要代码是红色部分

（2）跳转页面配置

按钮点击跳转事件：

          onPressed: () {
            // 普通路由跳转到搜索页面
            Navigator.pushNamed(context, '/search',
                arguments: {"kw": "123456"});
          },

 arguments这个关键字需要固定

（3）被跳转页面配置

① StatelessWidget配置

class SearchPage extends StatelessWidget {
  final arguments;
  // args表示可能传入的参数列表
  SearchPage({this.arguments});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("我是搜索页面"),
      ),
      body: Text("搜索区域，搜索内容：${arguments != null ? arguments['kw'] : '默认搜索内容'}"),
    );
  }
}

 ②StatefulWidget配置

import 'package:flutter/material.dart';

class Product extends StatefulWidget {
  Map arguments;
  Product({this.arguments});
  @override
  _ProductState createState() => _ProductState(arguments: this.arguments);
}

class _ProductState extends State<Product> {
  Map arguments;
  _ProductState({this.arguments});
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Scaffold(
        appBar: AppBar(
          title: Text("商品详情"),
        ),
        body: Container(
          child: Text("商品ID：${arguments['id']}"),
        ),
      ),
    );
  }
}