flutter路由

1,153 阅读1分钟

匿名式路由

它只能实现跳转到一个页面和返回前一个页面

onPressed(){
    Navigator.of(context).push(
        MaterialPageRoute(builder:(BuildContext context){
            return AddressList();
        })
    )
}

返回

onPressed(){
    Navigator.of(context).pop();
}

如果返回时 带数据可以放到pop里面

命名式路由

1.新建一个routes文件夹 在这个文件夹中新建Routes.dart

在这个里面可以配置路由

import 'package:flutter/material.dart';
//引入组件
import '../widgest/Home.dart';
import '../widgest/Address.dart';
import '../widgest/AddressList.dart';
//定义路由
final routes = {
  '/':(context)=>Home(),
  //不带参数
  '/address':(context)=>Address(),
  //带参数
  '/addressList':(context,{arguments})=>AddressList(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;
        }
      }
};

2.在mian.dart中引入路由 并进配置

import './routes/Routes.dart';
//配置路由
 return MaterialApp(
  // home: Button(),
  initialRoute: '/',
  onGenerateRoute: onGenerateRoute,
  
);

带参数和不带参数的区别在routes.dart和触发跳转时的组件 带参数时需要接收数据

跳转时不带参数

在routes.dart

'/address':(context)=>Address(),

在触发跳转的组件

 RaisedButton(
      child: Text('获取地址'),
      onPressed: (){
        Navigator.pushNamed(context, '/address');
      },
)

跳转时带参数

在routes.dart

'/addressList':(context,{arguments})=>AddressList(arguments:arguments)

在触发跳转的组件

RaisedButton(
      child: Text('获取地址列表'),
      onPressed: (){
        Navigator.pushNamed(context, '/addressList',arguments: {
          'id':'0',
        });
      },
)

需要在AddressList.dart中接收数据 就是对这个类进行重写

import 'package:flutter/material.dart';

class AddressList extends StatelessWidget {

  final arguments;
  AddressList({this.arguments});
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('addressList'),
      ),
      body: Center(
        child: Text('${arguments["id"]}'),
      ),
    );
  }
}