Flutter学习记录——13.路由详解

文章目录

  • 1.Flutter路由基础
  • 2.Navagator和Route基本用法详解
  • 3.页面跳转及传递参数
  • 4.总结

1.Flutter路由基础

在 Flutter 中路由也是主要用来处理页面跳转、页面数据传递等操作。Flutter 的路由主要通过路由(Route)和导航器(Navigator)配合使用。Navigator 主要负责路由页面的堆栈管理和操作,例如添加跳转页面、移除页面等。

在 Flutter 中路由用法主要有两种用法:一种是在 MaterialApp 里的 routes 参数里配置定义好路由列表,也就是提前定义好要跳转的页面和名称。

Map<String, WidgetBuilder> routes;

先定义路由跳转路径:

return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.teal,
      ),
      home: ShowAppPage(),
      // 定义路由表
      routes: <String, WidgetBuilder>{
     
        '/buttonpage': (BuildContext context) {
     
          return ButtonSamples();
        },
        '/routepage': (BuildContext context) {
     
          return RouteSamples();
        },
      },
    );

// 当然,为了简洁,我们可以用lambda简写路由注册
routes: <String, WidgetBuilder>{
     
        '/buttonpage': (BuildContext context) => ButtonSamples(),
        '/routepage': (BuildContext context) => RouteSamples(),
      },

主要规则就是前面定义一个路由页面名称,后面定义路径。

接下来就是通过这个名称来执行跳转,这里就要用到 Navigator 了。

body: Center(
          child: FlatButton(
            child: Text("路由跳转"),
            onPressed: () {
     
              // 通过之前定义的名字来执行跳转
              Navigator.of(context).pushNamed("buttonpage");
            },
          ),
        )

Navigator 继承自 StatefulWidget,构造如下:

const Navigator({
     
    Key key,
    // 默认路由
    this.initialRoute,
    // 通用路由跳转规则
    @required this.onGenerateRoute,
    // 未知路由
    this.onUnknownRoute,
    // 路由的观察者,监听
    this.observers = const <NavigatorObserver>[]
  })

Navigator 的主要方法如下。

  • push:可以自定义使用Route子类进行个性化跳转,如MaterialPageRoute,实现页面跳转。
  • of:实例化Navigator。
  • pop:从路由堆栈里移除,退出页面。
  • canPop:判断当前页面能否进行pop操作,并返回bool值。
  • maybePop:会进行判断能否弹出,如弹出到首页仅剩一个页面,则不进行弹出操作。
  • popAndPushNamed:指将当前页面pop,然后跳转到指定页面。
  • popUntil:返回跳转,直到返回到指定页面停止。
  • pushAndRemoveUntil:移除所有页面,然后跳转到指定页面。
  • pushNamed:通过命名好的路由进行跳转。
  • pushNamedAndRemoveUntil:指将指定命名的页面加入到路由中,然后将之前的路径移除直到指定的页面为止。
  • pushReplacement:指把当前页面在栈中的位置替换成跳转的页面。
  • pushReplacementNamed:指把当前页面在栈中的位置替换成命名的跳转的页面。
  • removeRoute:移除路由。
  • replace:替换路由。

2.Navagator和Route基本用法详解

接下来我们来看 Flutter 中 Navigator 和 Route 基本用法。

Navigator 之前介绍了,Route 在 Flutter 中主要有两种实现方法:一个是使用 MaterialPageRoute;另一个是使用 PageRouteBuilder 来构建。

MaterialPageRoute 构造方法:

MaterialPageRoute({
     
    // 构建页面
    @required this.builder,
    // 路由设置
    RouteSettings settings,
    // 是否保存页面状态、内容
    this.maintainState = true,
    bool fullscreenDialog = false,
  })

PageRouteBuilder 构造方法:

PageRouteBuilder({
     
    // 路由设置
    RouteSettings settings,
    // 目标页面
    @required this.pageBuilder,
    // 跳转过度动画设置
    this.transitionsBuilder = _defaultTransitionsBuilder,
    this.transitionDuration = const Duration(milliseconds: 300),
    this.opaque = true,
    this.barrierDismissible = false,
    this.barrierColor,
    this.barrierLabel,
    this.maintainState = true,
  })

PageRouteBuilder 构建的路由可以设置跳转动画效果。

我们通过代码实例来看下这两种基本用法:

FlatButton(
      child: Text("路由跳转"),
      onPressed: () {
     
        Navigator.of(context)
            .push(MaterialPageRoute(builder: (BuildContext context) {
     
          return ButtonSamples();
        }));
      },
    );

MaterialPageRoute 无须预先配置好路由目标页面和名称,比较的灵活,也可以传递参数。

 Navigator.push(context, PageRouteBuilder(
   opaque: false,
   pageBuilder: (BuildContext context, Animation<double> animation,
                Animation<double> secondaryAnimation) {
     
     return ButtonSamples();
   },
   transitionsBuilder: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child) {
     
     return FadeTransition(
       opacity: animation,
       child: RotationTransition(
         turns: Tween<double>(begin: 0.5, end: 1.0).animate(animation),
         child: child,// 这里的child是pageBuilder里返回的目标页面
       ),
     );
   }
 ));

PageRouteBuilder 可以创建一个更加丰富复杂的页面路由跳转,可以设置跳转动画。

好,最后在看一个复杂一些的情况处理。例如我们有一个首页 Tab 页面,内部有自己的路由跳转,当我们跳转到个人中心时候,需要判断是否登录,没有登录就跳到登录页,登录过就直接显示个人中心信息。这种就是路由里面的内部还有一个自己的路由。这就需要我们用 Navigator 里的 RouteSettings 了,我们看下实现方法:

 class MyApp extends StatelessWidget {
     
   @override
   Widget build(BuildContext context) {
     
     return MaterialApp(
       initialRoute: '/',
       routes: {
     
         '/': (BuildContext context) => HomePage(),
         // 登录页
         '/signup': (BuildContext context) => SignUpPage(),
       },
     );
   }
 }

 class SignUpPage extends StatelessWidget {
     
  @override
  Widget build(BuildContext context) {
     
    // SignUpPage有自己的内部路由
    return Navigator(
      // 默认路由页面
      initialRoute: 'signup/personal_info',
      // 内部路由的跳转处理
      onGenerateRoute: (RouteSettings settings) {
     
        WidgetBuilder builder;
        switch (settings.name) {
     
          case 'signup/personal_info':
            builder = (BuildContext _) => CollectPersonalInfoPage();
            break;
          case 'signup/choose_credentials':
            builder = (BuildContext _) => ChooseCredentialsPage();
            break;
          default:
            throw Exception('Invalid route: ${
       settings.name}');
        }
        return MaterialPageRoute(builder: builder, settings: settings);
      },
    );
  }
 }

3.页面跳转及传递参数

接下来我们学习路由页面跳转并且传递参数的实现方法。

页面跳转传递参数,这里建议使用动态路由,而不是使用在 MaterialApp 的 routes 属性里静态定义的这种。

我们先看静态定义的传参用法:

// 通过key,value传参
Navigator.pushNamed(
      context,
      '/weather',
      arguments: <String, String>{
     
        'city': 'Berlin',
        'country': 'Germany',
      },
    );
// 通过Object来传递参数
class WeatherRouteArguments {
     
  WeatherRouteArguments({
     this.city, this.country});
  final String city;
  final String country;
}

Navigator.pushNamed(
    context,
    '/weather',
    arguments: WeatherRouteArguments(city: 'Berlin', country: 'Germany'),
  );

// 接收页面通过RouteSettings进行接收参数,比较不灵活和麻烦
MaterialApp(
        onGenerateRoute: (RouteSettings settings){
     
            ...
            settings.arguments
            ...
},

通常我们通过动态路由传参方式来实现:

Navigator.push(context, new MaterialPageRoute(builder: (BuildContext context){
     
  return new ButtonSamples(
    title:'标题',
    name:'名称'
  );
}))

...
// 第二个页面构造方法里接收参数
class ButtonSamples extends StatefulWidget {
     
  String title;
  String name;
  ButtonSamples({
     Key key, this.title, this.name}) : super(key: key);

  @override
  State<StatefulWidget> createState() {
     
    return ButtonSamplesState();
  }
}

或者,也可以传递一个 Object 对象:

class Book{
     
  String title;
  String name;

  Book({
     this.title, this.name});
}

Navigator.push(context, new MaterialPageRoute(builder: (BuildContext context){
     
  return new ButtonSamples(Book
    title:'标题',
    name:'名称'
  );
}))

// 第二个页面构造方法里接收参数
class ButtonSamples extends StatefulWidget {
     
  Book book;

  ButtonSamples({
     Key key, this.book}) : super(key: key);

  @override
  State<StatefulWidget> createState() {
     
    return ButtonSamplesState();
  }
}

接下来是关闭页面返回数据和上一个页面接收返回数据的用法:

// 关闭页面返回数据
Navigator.pop(context, '返回数据');

// 接收返回数据
Navigator.push<String>(context,
        MaterialPageRoute(builder: (BuildContext context) {
     
      return ButtonSamples(title: '标题', name: '名称');
    })).then((String result) {
     
      //处理代码
    });

路由效果如图:

路由跳转Flutter学习记录——13.路由详解_第1张图片

4.总结

本节博客主要是给大家讲解了 Flutter 的路由基础知识和页面跳转传参用法和特点。

  • 重点掌握 MaterialPageRoute 和 Navigator 的用法,做到熟练。
  • 练习一下页面传递参数的用法和接收返回参数的用法。

你可能感兴趣的:(Flutter,Flutter)