Flutter进阶实战 16-20 右滑返回上一页CupertinoPageRoute案例

前言：

在苹果手机上有一种才操作叫做右滑返回上一页，一些不错的应用都有类似的操作，随着苹果手机越来越多，这种操作开始普遍开来，在安卓手机上也开始使用。这里实现这种右滑返回上一页的操作。

实现效果：

知识点：

一、Cupertino UI

其实早都知道Flutter有两套UI模板，一套是material,另一套就是Cupertino。Cupertino主要针对的的就是IOS系统的UI，所以用的右滑返回上一级就是在这个Cupertino里。

Cupertino的引入方法

直接使用import引入就可以了，代码如下:

import 'package:flutter/cupertino.dart';

引入了cupertino的包之后，就可以使用皮肤和交互效果的特性了。要用的右滑返回上一页也是皮肤的交互特性，直接使用就可以了。

二、CupertinoPageScaffold

这个和以前使用material的Scaffold类似，不过他里边的参数是child，例如下面的代码.

return CupertinoPageScaffold(
  child: Center(
    child: Container(
      height: 100.0,
      width:100.0,
      color: CupertinoColors.activeBlue,
      child: CupertinoButton(
        child: Icon(CupertinoIcons.add),
        onPressed: (){
          Navigator.of(context).push(
            CupertinoPageRoute(builder: (BuildContext context){
              return RightBackDemo();
            })
          );
        },
      ),
    ),
  ),
);

在Cupertino下也有很多Widget控件，他们都是以Cupertino开头的，这就让我们很好区分，当然两种皮肤是可以进行混用的。

实现代码：

main.dart文件代码:

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

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: RightBackDemo(),
    );
  }
}

right_back_demo.dart文件代码：

import 'package:flutter/cupertino.dart';

class RightBackDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      child: Center(
        child: Container(
          width: 200.0,
          height: 200.0,
          color: CupertinoColors.activeBlue,
          child: CupertinoButton(
            child:Icon(CupertinoIcons.add,size: 70.0,),
            onPressed: (){
              Navigator.of(context).push(
                CupertinoPageRoute(builder: (BuildContext context){
                     return RightBackDemo();    //重复跳转其本身界面
                })
              );
            },
          ),
        ),
      ),
    );
  }
}

其实只要使用CupertinoPageRoute打开的子页面，就可以实现右滑返回上一级。所以整个案例并不难。