flutter 命名路由、命名路由传值

如何获取上一个页面的返回参数

// 使用Navigator的pop方法来返回参数到上一个页面
Navigator.pop(context, {'title': '123789'});

// 在页面跳转时接收返回的参数
onTap: () async{
  // 使用Navigator的pushNamed方法跳转到指定的路由,并等待返回值
  var result = await Navigator.pushNamed(context, '/avatar');
  // 打印返回的结果
  print(result);
},

项目重启提示

// 修改完成后,为了确保所有更改都生效,最好重新运行项目
flutter run

route.dart的配置

import 'package:flutter/material.dart';
import '../home.dart';
import '../other/searchPage.dart';

// 配置项目的路由
var routes = {
  '/': (context) => Home(),
  '/search': (context, { arguments }) => SearchPage(arguments: arguments),
};

// 当调用Navigator.pushNamed时触发的方法,用于动态创建路由
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;
    }
  }
};

main.dart的配置

import 'package:flutter/material.dart';
import 'app/routers/route.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 返回MaterialApp并配置路由
    return MaterialApp(
        initialRoute: '/',
        onGenerateRoute: onGenerateRoute
    );
  }
}

如何发送和接收参数

// 在需要跳转的地方,使用Navigator.pushNamed方法并传递参数
Navigator.pushNamed(context, '/search', arguments: {
  'title': '13213'
});

// 对于无状态的组件,使用下面的方式接收参数
class SearchPage extends StatelessWidget {
  var arguments; // 通过构造函数传入的参数
  SearchPage({arguments});

  @override
  Widget build(BuildContext context) {
    // 返回一个包含文本的容器,并根据参数动态显示文本
    return Container(
      child: Text('12321321大大${arguments != null ? arguments["title"] : ""}'),
    );
  }
}

// 对于有状态的组件,使用下面的方式接收参数
class ProductInfoPage extends StatefulWidget {
  final Map arguments;
  ProductInfoPage({Key key, arguments}) : super(key: key);

  _ProductInfoPageState createState() => _ProductInfoPageState(arguments: arguments);
}

class _ProductInfoPageState extends State<ProductInfoPage> {
  Map arguments;
  _ProductInfoPageState({arguments});

  @override
  Widget build(BuildContext context) {
    // 此处为示例,返回值为null,但在真实环境中需要返回相应的widget
    return null;
  }
}

posted on 2020-02-21 00:01  完美前端  阅读(608)  评论(0)    收藏  举报

导航