Flutter 仿iOS側滑返回案例實現

xq9527--發表於2020-10-16
FlutteriOS

前言

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

準備工作

需要安裝flutter的開發環境：大家可以去看看之前的教程：
1 win系統flutter開發環境安裝教程: https://www.jianshu.com/p/152447bc8718
2 mac系統flutter開發環境安裝教程：https://www.jianshu.com/p/bad2c35b41e3

效果圖：

側滑返回.gif

具體實現：

我們需要到匯入

import 'package:flutter/cupertino.dart';

這邊我們要實現側滑返回我們要用到 CupertinoPageScaffold 這個腳手架框架元件

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return CupertinoPageScaffold(
      child: Center(
        child: CupertinoButton(
          child: Text("跳轉詳情頁",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相關的 CupertinoButton ，然後就是具體路由跳轉部分邏輯 我們看onPressed 方法體的邏輯

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

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

最後總結：

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

專案地址:

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

相關文章