前言

各位同學大家好，有一段時間沒有給大家更新文章了。最近玩了一些iOS原生的應用，覺得iOS原生的側(cè)滑返回上一級目錄很好用。我就想著做一個flutter的版本出來 今天就給大家分享 (Flutter 仿iOS側(cè)滑返回案例實現(xiàn)) 案例，廢話不多說，我們正式開始

準備工作

需要安裝flutter的開發(fā)環(huán)境：大家可以去看看之前的教程：
1 win系統(tǒng)flutter開發(fā)環(huán)境安裝教程: http://www.itdecent.cn/p/152447bc8718
2 mac系統(tǒng)flutter開發(fā)環(huán)境安裝教程：http://www.itdecent.cn/p/bad2c35b41e3

效果圖：

側(cè)滑返回.gif

具體實現(xiàn)：

我們需要到導入

import 'package:flutter/cupertino.dart';

這邊我們要實現(xiàn)側(cè)滑返回我們要用到 CupertinoPageScaffold 這個腳手架框架組件

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return CupertinoPageScaffold(
      child: Center(
        child: CupertinoButton(
          child: Text("跳轉(zhuǎn)詳情頁",style: TextStyle(
              fontSize: 20,color: Colors.white
          ),),
          color: CupertinoColors.destructiveRed,
          onPressed: (){
            Navigator.of(context).push(CupertinoPageRoute(builder: (BuildContext context){
              return Details();
            }));
          },
        ),
      ),
    );
  }

這邊我們在Widget build 方法里面直接返回一個 CupertinoPageScaffold 組件 然后在 CupertinoPageScaffold 組件中嵌套一個Center 讓我們演示的button居中顯示 這邊點擊的button我們也要用
Cupertino相關(guān)的 CupertinoButton ，然后就是具體路由跳轉(zhuǎn)部分邏輯 我們看onPressed 方法體的邏輯

    Navigator.of(context).push(CupertinoPageRoute(builder: (BuildContext context){
              return Details();
            }));

我們在 Navigator.of(context).push() 方法中傳入的 是CupertinoPageRoute 而不是通常用到的 MaterialPageRoute ，來實現(xiàn)我們的路由跳轉(zhuǎn) 通過CupertinoPageRoute 路由跳轉(zhuǎn)我們就可以實現(xiàn)在我們跳轉(zhuǎn)到新的widget 可以用過側(cè)滑手勢返回上一級。

最后總結(jié)：

flutter中提供了 cupertino iOS風格 和material 原生安卓風格（材料設(shè)計） 所以我們引入flutter sdk中提供的
cupertino.dart 里面提供了很多iOS風格的組件和效果 ，這樣我們就很快實現(xiàn)仿iOS側(cè)滑返回的效果，
有興趣的同學可以多嘗試，最后希望我的文章能幫助到各位解決問題 ，以后我還會貢獻更多有用的代碼分享給大家。各位同學如果覺得文章還不錯 ，麻煩給關(guān)注和star，小弟在這里謝過啦

項目地址:

碼云: https://gitee.com/qiuyu123/flutter_rightback