Flutter 右滑返回上一頁

在蘋果手機上有一種才操作叫做右滑返回上一頁，一些不錯的應用都有類似的操作，隨着蘋果手機越來越多，這種操作開始普遍開來，在安卓手機上也開始使用。

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(
          width: 100.0,
          height:100.0,
          color: CupertinoColors.activeBlue,
          child: CupertinoButton(
            child: Icon(CupertinoIcons.add,color: Colors.white),
            onPressed: (){
              Navigator.of(context).push(
                CupertinoPageRoute(builder: (BuildContext context){
                  return RightBackDemo(); //新打開的還是本控件,可無限重復打開
                })
              );
            },
          ),
        ),
      ),
    );

在Cupertino下也有很多Widget控件，他們都是以Cupertino開頭的，這就讓我們很好區分，當然兩種皮膚是可以進行混用的。

這個案例就兩個主要文件，main.dart和right_back_demo.dart

main.dart代碼：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title:'Flutter Demo',
      theme: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: 100.0,
          height:100.0,
          color: CupertinoColors.activeBlue,
          child: CupertinoButton(
            child: Icon(CupertinoIcons.add,color: Colors.white),
            onPressed: (){
              Navigator.of(context).push(
                CupertinoPageRoute(builder: (BuildContext context){
                  return RightBackDemo(); //新打開的還是本控件,可無限重復打開
                })
              );
            },
          ),
        ),
      ),
    );
  }
}

其實只要使用CupertinoPageRoute打開的子頁面，就可以實現右滑返回上一級。所以整個案例並不難。大家也可以自己新建個頁面跳轉，能更好的看出效果。