Flutter 路由及传值、替换路由、返回根路由

2,207 阅读1分钟

1、基本路由及传值

//跳转传值
Navigator.of(context).push(
    MaterialPageRoute(
        builder: (context)=>GoodsDetailsWidget(title:'这是我的传值')
    )
);

//接收传值  先在widget里定义变量
class FormPage extends StatelessWidget {
    String title;
    GoodsDetailsWidget({this.title="默认值"}); //{}表示可选
    @override
    Widget build(BuildContext context) {
    .............
}

//返回上一级页面
Navigator.of(context).pop();

2、命名路由及传值

//首先在main.dart的MaterialApp下定义routes
routes: {
    '/goodDetals':(context)=>GoodDetals(), //goodDetals为自定义
    '/geachDetals':(context)=>TeachDetals(),
}

//命名路由跳转
 Navigator.pushNamed(context, '/goodDetals');
 Navigator.pushNamed(context, '/geachDetals');
 

自定义路由传值

首先自定义路由Routes.dart

import 'package:flutter/material.dart';

import '../pages/Tabs.dart';
import '../pages/GoodDetails.dart';
import '../pages/TeachDetails.dart';

//配置路由
final routes={
      '/':(context)=>Tabs(), //初始化底部tab栏使用
      '/goodDetails':(context)=>GoodDetails(), //没有传值
      '/teachDetails':(context,{arguments})=>TeachDetails(arguments: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';
import 'routes/Routes.dart';

void main() => runApp(MyApp());
class MyApp extends StatelessWidget {  

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // home:Tabs(),   
      initialRoute: '/',     //初始化的时候加载的路由
      onGenerateRoute: onGenerateRoute
    );
  }
}

使用

//不带值路由跳转
Navigator.pushNamed(context, '/goodDetails');

//带传值路由跳转
Navigator.pushNamed(context, '/goodDetails',arguments: {                    "id":123
});

//接收传值 StatelessWidget组件
class GoodDetails extends StatelessWidget {
  final arguments;
  SearchPage({this.arguments});
  
  @override
  ............
  body: Text("商品详情页id值${arguments != null ? arguments['id'] : '0'}"),
}

----------------------------------

//接收传值 StatefulWidget组件
class GoodDetails extends StatefulWidget {
  final Map arguments;
  GoodDetails({Key key,this.arguments}) : super(key: key);

  _GoodDetailsState createState() => _GoodDetailsState(arguments:this.arguments);
}

class _GoodDetailsState extends State<GoodDetails> {
  Map arguments;
  _GoodDetailsState({this.arguments});
  @override
  ........
  body: Container(
        child: Text("pid=${arguments["id"]}"),
    ),
}

3、替换路由、返回根路由

//替换路由
如:A、B、C 三个页面,点击A页面的按钮跳转至B页面,在B页面跳转代码改为替换路由
Navigator.of(context).pushReplacementNamed('/c');
当在C页面返回时 直接会返回到A页面

//返回根路由  需在Tabs页面定义index值
Navigator.of(context).pushAndRemoveUntil(
    new MaterialPageRoute(builder: (context) => new Tabs(index:2)),                
    (route) => route == null
);

//Tabs.dart
int _currentIndex;
  _TabsState(index){
    this._currentIndex=index;
  }