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']}"),
        ),
      ),
    );
  }
}