专栏首页前端开发随笔Flutter配置路由组件抽离及页面传参

Flutter配置路由组件抽离及页面传参

在lib目录下新建个routes文件夹,里面新建个Routes.dart文件来统一管理我们的路由跳转及传参, 在这里我们就以Home.dart文件跳转到Search.dart文件并传参为例

Routes.dart

import 'package:flutter/material.dart';
import '../pages/Tabs.dart';
import '../pages/Search.dart'; //需要引入跳转页面地址

// 配置路由
final routes = {
  // 前面是自己的命名 后面是加载的方法
  '/': (context) => Tabs(), //不用传参的写法
  '/search': (context, {arguments}) =>
      SearchPage(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;
    }
  }
};

还需要在main.dart入口文件进行配置

import 'package:flutter/material.dart'; //快捷方式:fim
import 'routes/Routes.dart'; //引入配置的路由文件

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

//自定义组件
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
        initialRoute: '/', //初始化加载的路由
        onGenerateRoute: onGenerateRoute
    );
  }
}

Home.dart

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  HomePage({Key key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        RaisedButton(
            child: Text("跳转到搜索页面"),
            onPressed: () {
              Navigator.pushNamed(context, '/search',
                 //在arguments里面带上我们需要传参值
                  arguments: {"id": 123, "name": "zz"});
            },
            color: Theme.of(context).accentColor,
            textTheme: ButtonTextTheme.primary),
      ],
    );
  }
}

Search.dart

import 'package:flutter/material.dart';
class SearchPage extends StatefulWidget {
  // 接收上个页面的参数
  Map arguments;
  SearchPage({Key key, this.arguments}) : super(key: key);
  @override
 //参数传递给下面的类
  _SearchPageState createState() => _SearchPageState(arguments: this.arguments);
}

class _SearchPageState extends State<SearchPage> {
  Map arguments;
  _SearchPageState({this.arguments});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        floatingActionButton: FloatingActionButton(
          child: Text('返回'),
          onPressed: () {
            Navigator.of(context).pop();
          },
        ),
        appBar: AppBar(
          title: Text("搜索"),
        ),
        //页面上就显示我们获取上个页面的参数
        body: Text("${arguments['id']}${arguments['name']}"));
  }
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Dart环境配置和运行

    第一步,去官网下载Dart的SDK https://gekorm.com/dart-windows/

    wePanda
  • Flutter定义tabbar底部导航路由跳转

    第一步 把三个页面放到tabs里 Category.dart || Home.dart || Setting.dart 在这里我只展示Home.dart ...

    wePanda
  • vue-cropper裁剪图片

    wePanda
  • 3分钟短文:十年窖藏,Laravel告诉你表单验证的“正确姿势”

    上一章我讲到了使用FormBuilder让后端开发者快速构建前端表单页面,而为了示例,

    程序员小助手
  • 深入理解Golang之Context

    这篇文章将介绍Golang并发编程中常用到一种编程模式:context。本文将从为什么需要context出发,深入了解context的实现原理,以及了解如何使用...

    KevinYan
  • [- Flutter基础篇 -] 聊聊那些弹框

    张风捷特烈
  • useContext更佳实践

    这么说的人可能忽视了state(状态)—— 不同于组件是以树的形式组合,我们经常会在不同层级的组件间公用同一个state。

    公众号@魔术师卡颂
  • 药物开发的社交图谱

    通过提供更好的清晰度和对异构数据集的访问,构建社交图谱(知识图谱)以改善临床试验的流程并降低成本。

    DrugAI
  • HDU 5675 ztr loves math

    ztr loves math Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65...

    ShenduCC
  • javascript入门笔记7-计时器

    计时器 语法: setInterval(代码,交互时间) 参数说明: 代码:要调用的函数或要执行的代码串。 交互时间:周期性执行或调用表达式之间的时间间隔,以...

    方志朋

扫码关注云+社区

领取腾讯云代金券