flutter路由 Navigator.pushNamed传参

觉得有用点个赞

Routers.dart 这个文件用于配置路由

import 'package:flutter/material.dart';
import 'package:flutterapp/searchPage.dart';
import 'package:flutterapp/tabs.dart';

import 'form.dart';

//配置路由
final routes = {
  "/": (context, {arguments}) => Tabs(),
  "/form": (context, {arguments}) => formPage(title: arguments),
  "/search": (context) => searchPage()
};

//固定写法
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

void main() => runApp(My_APP());

class My_APP extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
        body: Tabs(),
      ),
      theme: ThemeData(primarySwatch: Colors.yellow),
      initialRoute: '/',		//初始化加载路由
      onGenerateRoute: onGenerateRoute,
    );
  }
}

这个是个布局页面
Tabs.dart

import 'package:flutter/material.dart';
import 'setting.dart';
import 'category.dart';
import 'home.dart';

class Tabs extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _TabState();
  }
}

class _TabState extends State<Tabs> {
  int _currentIndex = 0;

  List _pageList=[
    homePage(),
    categoryPage(),
    settingPage()
  ];

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter Demo"),
      ),
      body: this._pageList[this._currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: this._currentIndex,
        onTap: (int index) {
          setState(() {
            this._currentIndex = index;
          });
        },
//        iconSize: 50,
        fixedColor: Colors.cyan,    //选中时候的颜色
        type: BottomNavigationBarType.fixed,    //配置地步tabs可以有多个按钮自适应
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home), title: Text("首页")),
          BottomNavigationBarItem(icon: Icon(Icons.category), title: Text("分类")),
          BottomNavigationBarItem(icon: Icon(Icons.settings), title: Text("设置")),
        ],
      ),
    );
  }
}

从category.dart 跳转到 form.dart

category.dart

import 'package:flutter/material.dart';
import 'form.dart';

class categoryPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _categoryPageState();
  }
}

class _categoryPageState extends State<categoryPage> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        RaisedButton(
            child: Text("跳转到表单页面"),
            onPressed: () {
              Navigator.pushNamed(context, "/form",arguments: {
                "title":"123"		//参数map
              });
            })
      ],
    );
  }
}

form.dart

import 'package:flutter/material.dart';

class formPage extends StatelessWidget {
  final title;		

  formPage({this.title});   //用构造函数接受参数map

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text(title["title"]),		//取map中对应key的值
      ),
      body: ListView(
        children: <Widget>[
          ListTile(
            title: Text("我是表单页面"),
          ),
          ListTile(
            title:
                Text("我是表单页面"),
          ),
          ListTile(
            title: Text("我是表单页面"),
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
          child: Text("返回"),
          onPressed: () {
            Navigator.of(context).pop();
          }),
    );
  }
}

这样就可以通过传参自定义form的标题了
亲测可用
route可以都在第一个文件里面配置，非常好用

有问题可以评论区留言