Flutter GetX使用---簡潔的魅力！

前言

使用Bloc的時候，有一個讓我至今為止十分在意的問題，無法真正的跨頁面互動！在反覆的查閱官方文件後，使用一個全域性Bloc的方式，實現了“偽”跨頁面互動，詳細可檢視：flutter_bloc使用解析；fish_redux的廣播機制是可以比較完美的實現跨頁面互動的，我也寫了一篇近萬字介紹如何使用該框架：fish_redux使用詳解，對於中小型專案使用fish_redux，這會一定程度上降低開發效率，最近嘗試了GetX相關功能，解決了我的相當一部分痛點

把整篇文章寫完後，我馬上把自己的一個demo裡面所有Bloc程式碼全用GetX替換，且去掉了Fluro框架；感覺用Getx雖然會省掉大量的模板程式碼，但還是有些重複工作：建立資料夾，建立幾個必備檔案，寫那些必須要寫的初始化程式碼和類；略微繁瑣，為了對得起GetX給我開發帶來的巨大便利，我就花了一些時間，給它寫了一個外掛！ 上面這重複的程式碼，檔案，資料夾統統能一鍵生成！

GetX相關優勢

• build重新整理方法極度簡單！
  • getx：Obx(() => Text())
  • 這是我非常非常在意的一個方面，因為bloc的build重新整理元件方法要傳倆個泛型，加上build方法裡面的倆個引數，導致一個build方法如果不使用箭頭方法簡寫，幾乎佔四五行，用起來實在蛋筒，導致我平時開發直接把BlocBuilder方法直接寫在頁面頂層（不提倡寫頂層），一個頁面只用寫一次了，不用定點到處寫BlocBuilder了，手動滑稽.jpg
• 跨頁面互動
  • 這絕對是GetX的一個優點！對於複雜的生產環境，跨頁面互動的場景，實在太常見了，GetX的跨頁面互動，幾乎和fish_redux一樣簡單，愛了愛了
• 路由管理
  • 是的，getx內部實現了路由管理，而且用起來，那叫一個簡單！bloc沒實現路由管理，這讓我不得不去找一個star量高的路由管理框架，就選擇了fluro，但是讓我不得不說，這個fluro用起來真的叫一個折磨人，每次新建一個頁面，最讓我抗拒的就是去寫fluro路由程式碼，橫跨幾個檔案來回寫，真是肝疼
  • GetX實現了動態路由傳參，也就是說直接在命名路由上拼引數，然後能拿到這些拼在路由上的引數，也就是說用flutter寫H5，直接能通過Url傳值（fluro也能做到），OMG！可以無腦捨棄複雜的fluro了
• 實現了全域性BuildContext
• 國際化，主題實現

上面單單是build簡寫的優勢，就會讓我考慮是否去使用了，而且還能實現跨頁面的功能，這還考慮啥，開搞！

下來將全面的介紹GetX的使用，文章也不分篇水閱讀量了，力求一文寫清楚，方便大家隨時查閱

準備

引入

• 首先匯入GetX的外掛

# getx 狀態管理框架 https://pub.flutter-io.cn/packages/get
get: ^3.24.0

GetX地址

• Github：jonataslaw/getx
• Pub：get

主入口配置

• 只需要將MaterialApp改成GetMaterialApp即可

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      home: CounterGetPage(),
    );
  }
}

• 各模組導包，均使用下面包即可

import 'package:get/get.dart';

外掛

吐槽下寫外掛的過程，實際寫這種模板程式碼生成外掛，其實也不難，網上有很多人寫了範例，參考參考思路，能較快的整出來，就是有些配置比較蛋筒。

一開始選擇Plugin DevKit模式整的，都已經寫好，但是看官網文件的時候，官方文件開頭就說了：建議使用Gradle模式開發外掛，又巴拉巴拉列了一堆好處；考慮良久，決定用Gradle模式重寫。

這個Gradle模式，最煩的還是開頭新建專案的時候，那個Gradle死活下載不下來，科學全域性上網都不行，然後手動下載了Gradle，指定本地Gradle，開全域性再次同步時，會下載一個較大的社群版IDEA，但是使用本地Gradle載入完，存在一個很大的BUG！main資料夾下，不會自動生成Java資料夾！我真是佛了，點選其它的資料夾，右擊：New -> Plugin DevKit 居然不會沒有Action選項，差點把我勸退了，換了了七八個版本IDEA試了都不行！Action選項出不來，過了倆天后，晚上無意嘗試在main資料夾下面新建了一個Java檔案，然後在這個java檔案上右擊：New -> Plugin DevKit，Action選項出現了！真幾把佛了。。。

還有個巨坑的問題，在Gradle模式下開發外掛，把模板程式碼檔案放在main檔案下、放在src下、放在根目錄下，都獲取不到檔案裡面的內容，這個真是坑了我不少時間，搜了很多部落格，都發現沒寫這個問題，官方文件範例看了幾遍也沒發現有啥說明，後來找到了一個三年前的專案，翻了翻程式碼發現，所有的資原始檔都必須放在resources資料夾下，才能讀取到檔案內容。。。我勒個去。。。

說明

• 外掛地址
  • Github：getx_template
  • Jetbrains：getx_template
• 外掛效果
  • 看下外掛使用的效果圖吧，樣式參考了fish_redux外掛樣式
  • 有一些可選擇的功能，所以做成多按鈕的樣式，大家可以按照自己的需求進行操作
• 說下外掛的功能含義
  • Model：生成GetX的模式，
    • Default：預設模式，生成三個檔案：state，logic，view
    • Easy：簡單模式，生成三個檔案：logic，view
  • Function：功能選擇
    • useFolder：使用檔案，選擇後會生成資料夾，大駝峰命名自動轉換為：小寫+下劃線
    • usePrefix：使用字首，生成的檔案前加上字首，字首為：大駝峰命名自動轉換為：小寫+下劃線
  • Module Name：模組的名稱，請使用大駝峰命名

效果圖

• 來看下使用的效果圖

安裝

• 在設定裡面選擇：Plugins ---> 輸入“getx”搜尋 ---> 選擇名字為：“GeX” ---> 然後安裝 ---> 最後記得點選下“Apply”
• 如果在使用該外掛的過程中有什麼問題，請在該專案的github上給我提issue，我看到後，會盡快處理

計數器

效果圖

• 體驗一下

實現

首頁，當然是實現一個簡單的計數器，來看GetX怎麼將邏輯層和介面層解耦的

• 來使用外掛生成下簡單檔案
  • 模式選擇：Easy
  • 功能選擇：useFolder

來看下生成的預設程式碼，預設程式碼十分簡單，詳細解釋放在倆種狀態管理裡

• logic

import 'package:get/get.dart';

class CounterGetLogic extends GetxController {

}

• view

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

import 'logic.dart';

class CounterGetPage extends StatelessWidget {
  final CounterGetLogic logic = Get.put(CounterGetLogic());

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

響應式狀態管理

當資料來源變化時，將自動執行重新整理元件的方法

• logic層
  • 因為是處理頁面邏輯的，加上Controller單詞過長，也防止和Flutter自帶的一些控制元件控制器弄混，所以該層用logic結尾，這裡就定為了logic層，當然這點隨個人意向，寫Event，Controller均可
  • 這裡變數數值後寫.obs操作，是說明定義了該變數為響應式變數，當該變數數值變化時，頁面的重新整理方法將自動重新整理；基礎型別，List，類都可以加.obs，使其變成響應式變數

class CounterGetLogic extends GetxController {
  var count = 0.obs;

  ///自增
  void increase() => ++count;
}

• view層

  • 這地方獲取到Logic層的例項後，就可進行操作了，大家可能會想：WTF，為什麼例項的操作放在build方法裡？逗我呢？--------- 實際不然，stl是無狀態元件，說明了他就不會被二次重組，所以例項操作只會被執行一次，而且Obx()方法是可以重新整理元件的，完美解決重新整理元件問題了

    class CounterGetPage extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        CounterGetLogic logic = Get.put(CounterGetLogic());
    
        return Scaffold(
          appBar: AppBar(title: const Text('GetX計數器')),
          body: Center(
            child: Obx(
              () => Text('點選了 ${logic.count.value} 次',
                  style: TextStyle(fontSize: 30.0)),
            ),
          ),
          floatingActionButton: FloatingActionButton(
            onPressed: () => logic.increase(),
            child: const Icon(Icons.add),
          ),
        );
      }
    }
    

  • 當然，也可以這樣寫

    class CounterGetPage extends StatelessWidget {
      final CounterGetLogic logic = Get.put(CounterGetLogic());
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(title: const Text('GetX計數器')),
          body: Center(
            child: Obx(
              () => Text('點選了 ${logic.count.value} 次',
                  style: TextStyle(fontSize: 30.0)),
            ),
          ),
          floatingActionButton: FloatingActionButton(
            onPressed: () => logic.increase(),
            child: const Icon(Icons.add),
          ),
        );
      }
    }
    

  • 可以發現重新整理元件的方法極其簡單：Obx()，這樣可以愉快的到處寫定點重新整理操作了

• Obx()方法重新整理的條件

  • 只有當響應式變數的值發生變化時，才會會執行重新整理操作，當某個變數初始值為：“test”，再賦值為：“test”，並不會執行重新整理操作
  • 當你定義了一個響應式變數，該響應式變數改變時，包裹該響應式變數的Obx()方法才會執行重新整理操作，其它的未包裹該響應式變數的Obx()方法並不會執行重新整理操作，Cool！

• 來看下如果把整個類物件設定成響應型別，如何實現更新操作呢？

  • 下面解釋來自官方README文件
  • 這裡嘗試了下，將整個類物件設定為響應型別，當你改變了類其中一個變數，然後執行更新操作，只要包裹了該響應類變數的Obx()，都會實行重新整理操作，將整個類設定響應型別，需要結合實際場景使用

// model
// 我們將使整個類成為可觀察的，而不是每個屬性。
class User() {
    User({this.name = '', this.age = 0});
    String name;
    int age;
}

// controller
final user = User().obs;
//當你需要更新user變數時。
user.update( (user) { // 這個引數是你要更新的類本身。
    user.name = 'Jonny';
    user.age = 18;
});
// 更新user變數的另一種方式。
user(User(name: 'João', age: 35));

// view
Obx(()=> Text("Name ${user.value.name}: Age: ${user.value.age}"))
    // 你也可以不使用.value來訪問模型值。
    user().name; // 注意是user變數，而不是類變數（首字母是小寫的）。

簡單狀態管理

GetBuilder：這是一個極其輕巧的狀態管理器，佔用資源極少！

• logic：先來看看logic層

class CounterEasyGetLogic extends GetxController {
  var count = 0;

  void increase() {
    ++count;
    update();
  }
}

• view

class CounterEasyGetPage extends StatelessWidget {
  final CounterEasyGetLogic logic = Get.put(CounterEasyGetLogic());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('計數器-簡單式')),
      body: Center(
        child: GetBuilder<CounterEasyGetLogic>(
          builder: (logicGet) => Text(
            '點選了 ${logicGet.count} 次',
            style: TextStyle(fontSize: 30.0),
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => logic.increase(),
        child: const Icon(Icons.add),
      ),
    );
  }
}

• 分析下：GetBuilder這個方法
  • init：雖然上述程式碼沒用到，但是，這個引數是存在在GetBuilder中的，因為在載入變數的時候就使用Get.put()生成了CounterEasyGetLogic物件，GetBuilder會自動查詢該物件，所以，就可以不使用init引數
  • builder：方法引數，擁有一個入參，型別便是GetBuilder所傳入泛型的型別
  • initState，dispose等：GetBuilder擁有StatefulWidget所有周期回撥，可以在相應回撥內做一些操作

總結

分析

• GetBuilder內部實際上是對StatefulWidget的封裝，所以佔用資源極小
• 響應式變數，因為使用的是StreamBuilder，會消耗一定資源

使用場景

• 一般來說，對於大多數場景都是可以使用響應式變數的
• 但是，在一個包含了大量物件的List，都使用響應式變數，將生成大量的StreamBuilder，必將對記憶體造成較大的壓力，該情況下，就要考慮使用簡單狀態管理了

跨頁面互動

跨頁面互動，在複雜的場景中，是非常重要的功能，來看看GetX怎麼實現跨頁面事件互動的

效果圖

• 體驗一下
• Cool，這才是真正的跨頁面互動！下級頁面能隨意呼叫上級頁面事件，且關閉頁面後，下次重進，資料也很自然重置了（全域性Bloc不會重置，需要手動重置）

實現

頁面一

常規程式碼

• logic
  • 這裡的自增事件，是供其它頁面呼叫的，該頁面本身沒使用

class JumpOneLogic extends GetxController {
  var count = 0.obs;

  ///跳轉到跨頁面
  void toJumpTwo() {
    Get.toNamed(RouteConfig.jumpTwo);
  }

  ///跳轉到跨頁面
  void increase() => count++;
}

• view
  • 此處就一個顯示文字和跳轉功能

class JumpOnePage extends StatelessWidget {
  /// 使用Get.put()例項化你的類，使其對當下的所有子路由可用。
  final JumpOneLogic logic = Get.put(JumpOneLogic());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(title: Text('跨頁面-One')),
      floatingActionButton: FloatingActionButton(
        onPressed: () => logic.toJumpTwo(),
        child: const Icon(Icons.arrow_forward_outlined),
      ),
      body: Center(
        child: Obx(
          () => Text('跨頁面-Two點選了 ${logic.count.value} 次',
              style: TextStyle(fontSize: 30.0)),
        ),
      ),
    );
  }
}

頁面二

這個頁面就是重點了，將演示怎麼呼叫前一個頁面的事件

• logic

class JumpTwoLogic extends GetxController {
  var count = 0.obs;

  ///跳轉到跨頁面
  void increase() => count++;
}

• view
  • 加號的點選事件，點選時，能實現倆個頁面資料的變換
  • 重點來了，這裡通過Get.find()，獲取到了之前例項化GetXController，獲取某個模組的GetXController後就很好做了，可以通過這個GetXController去呼叫相應的事件，也可以通過它，拿到該模組的資料！

class JumpTwoPage extends StatelessWidget {
  final JumpOneLogic oneLogic = Get.find();
  final JumpTwoLogic twoLogic = Get.put(JumpTwoLogic());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(title: Text('跨頁面-Two')),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          oneLogic.increase();
          twoLogic.increase();
        },
        child: const Icon(Icons.add),
      ),
      body: Center(
        child: Obx(
          () => Text('跨頁面-Two點選了 ${twoLogic.count.value} 次',
              style: TextStyle(fontSize: 30.0)),
        ),
      ),
    );
  }
}

總結

GetX這種的跨頁面互動事件，真的是非常簡單了，侵入性也非常的低，不需要在主入口配置什麼，在複雜的業務場景下，這樣簡單的跨頁面互動方式，就能實現很多事了

進階吧！計數器

我們可能會遇到過很多複雜的業務場景，在複雜的業務場景下，單單某個模組關於變數的初始化操作可能就非常多，在這個時候，如果還將state（狀態層）和logic（邏輯層）寫在一起，維護起來可能看的比較暈，這裡將狀態層和邏輯層進行一個拆分，這樣在稍微大一點的專案裡使用GetX，也能保證結構足夠清晰了！

在這裡就繼續用計數器舉例吧！

實現

此處需要劃分三個結構了：state（狀態層），logic（邏輯層），view（介面層）

• 這裡使用外掛生成下模板程式碼
  • Model：選擇Default（預設）
  • Function：useFolder（預設中）

來看下生成的模板程式碼

• state

class CounterHighGetState {
  CounterHighGetState() {
    ///Initialize variables
  }
}

• logic

import 'package:get/get.dart';

import 'state.dart';

class CounterHighGetLogic extends GetxController {
  final state = CounterHighGetState();
}

• view

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

import 'logic.dart';
import 'state.dart';

class CounterHighGetPage extends StatelessWidget {
  final CounterHighGetLogic logic = Get.put(CounterHighGetLogic());
  final CounterHighGetState state = Get.find<CounterHighGetLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

為什麼寫成這樣三個模組，需要把State單獨提出來，請速速瀏覽下方

改造

• state
  • 這裡可以發現，count型別使用的是RxInt，沒有使用var，使用該變數型別的原因，此處是將所有的操作都放在建構函式裡面初始化，如果直接使用var沒有立馬賦值，是無法推導為Rx型別，所以這裡直接定義為RxInt，實際很簡單，基礎型別將開頭字母大寫，然後加上Rx字首即可
  • 實際上直接使用var也是可以的，但是，使用該響應變數的時候.value無法提示，需要自己手寫，所以還是老老實實的寫明Rx具體型別吧
  • 詳細可檢視：宣告響應式變數

class CounterHighGetState {
  RxInt count;

  CounterHighGetState() {
    count = 0.obs;
  }
}

• logic
  • 邏輯層就比較簡單，需要注意的是：開始時需要例項化狀態類

class CounterHighGetLogic extends GetxController {
  final state = CounterHighGetState();

  ///自增
  void increase() => ++state.count;
}

• view
  • 實際上view層，和之前的幾乎沒區別，區別的是把狀態層給獨立出來了
  • 因為CounterHighGetLogic被例項化，所以直接使用Get.find<CounterHighGetLogic>()就能拿到剛剛例項化的邏輯層，然後拿到state，使用單獨的變數接收下
  • ok，此時：logic只專注於觸發事件互動，state只專注資料

class CounterHighGetPage extends StatelessWidget {
  final CounterHighGetLogic logic = Get.put(CounterHighGetLogic());
  final CounterHighGetState state = Get.find<CounterHighGetLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('計數器-響應式')),
      body: Center(
        child: Obx(
              () => Text('點選了 ${state.count.value} 次',
              style: TextStyle(fontSize: 30.0)),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => logic.increase(),
        child: const Icon(Icons.add),
      ),
    );
  }
}

對比

看了上面的改造，螢幕前的你可能想吐槽了：坑比啊，之前簡簡單單的邏輯層，被拆成倆個，還搞得這麼麻煩，你是猴子請來的逗比嗎？

大家先別急著吐槽，當業務過於複雜，state層，也是會維護很多東西的，讓我看看下面的一個小栗子，下面例項程式碼是不能直接執行的，想看詳細執行程式碼，請檢視專案：flutter_use

• state

class MainState {
  ///選擇index - 響應式
  RxInt selectedIndex;

  ///控制是否展開 - 響應式
  RxBool isUnfold;

  ///分類按鈕資料來源
  List<BtnInfo> list;

  ///Navigation的item資訊
  List<BtnInfo> itemList;

  ///PageView頁面
  List<Widget> pageList;
  PageController pageController;

  MainState() {
    //初始化index
    selectedIndex = 0.obs;
    //預設不展開
    isUnfold = false.obs;
    //PageView頁面
    pageList = [
      keepAliveWrapper(FunctionPage()),
      keepAliveWrapper(ExamplePage()),
      keepAliveWrapper(Center(child: Container())),
    ];
    //item欄目
    itemList = [
      BtnInfo(
        title: "功能",
        icon: Icon(Icons.bubble_chart),
      ),
      BtnInfo(
        title: "範例",
        icon: Icon(Icons.opacity),
      ),
      BtnInfo(
        title: "設定",
        icon: Icon(Icons.settings),
      ),
    ];
    //頁面控制器
    pageController = PageController();
  }
}

• logic

class MainLogic extends GetxController {
  final state = MainState();

  ///切換tab
  void switchTap(int index) {
    state.selectedIndex.value = index;
  }

  ///是否展開側邊欄
  void onUnfold(bool unfold) {
    state.isUnfold.value = !state.isUnfold.value;
  }
}

• view

class MainPage extends StatelessWidget {
  final MainLogic logic = Get.put(MainLogic());
  final MainState state = Get.find<MainLogic>().state;

  @override
  Widget build(BuildContext context) {
    return BaseScaffold(
      backgroundColor: Colors.white,
      body: Row(children: [
        ///側邊欄區域
        Obx(
          () => SideNavigation(
            selectedIndex: state.selectedIndex.value,
            sideItems: state.itemList,
            onItem: (index) {
              logic.switchTap(index);
              state.pageController.jumpToPage(index);
            },
            isUnfold: state.isUnfold.value,
            onUnfold: (unfold) {
              logic.onUnfold(unfold);
            },
          ),
        ),

        ///Expanded佔滿剩下的空間
        Expanded(
          child: PageView.builder(
            physics: NeverScrollableScrollPhysics(),
            itemCount: state.pageList.length,
            itemBuilder: (context, index) => state.pageList[index],
            controller: state.pageController,
          ),
        )
      ]),
    );
  }
}

從上面可以看出，state層裡面的狀態已經較多了，當某些模組涉及到大量的：提交表單資料，跳轉資料，展示資料等等，state層的程式碼會相當的多，相信我，真的是非常多，一旦業務發生變更，還要經常維護修改，就蛋筒了

在複雜的業務下，將狀態層（state）和業務邏輯層（logic）分開，絕對是個明智的舉動

最後

• 該模組的效果圖就不放了，和上面計數器效果一模一樣，想體驗一下，可點選：體驗一下
• 簡單的業務模組，可以使用倆層結構：logic，view；複雜的業務模組，推薦使用三層結構：state，logic，view

路由管理

GetX實現了一套用起來十分簡單的路由管理，可以使用一種極其簡單的方式導航，也可以使用命名路由導航

簡單路由

• 主入口配置

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      home: MainPage(),
    );
  }
}

• 路由的相關使用
  • 使用是非常簡單，使用Get.to()之類api即可，此處簡單演示，詳細api說明，放在本節結尾

//跳轉新頁面
Get.to(SomePage());

命名路由導航

這裡是推薦使用命名路由導航的方式

• 統一管理起了所有頁面
• 在app中可能感受不到，但是在web端，載入頁面的url地址就是命名路由你所設定字串，也就是說，在web中，可以直接通過url導航到相關頁面

下面說明下，如何使用

• 首先，在主入口出配置下

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      initialRoute: RouteConfig.main,
      getPages: RouteConfig.getPages,
    );
  }
}

• RouteConfig類
  • 下面是我的相關頁面，和其對映的頁面，請根據自己的頁面進行相關編寫

class RouteConfig{
  ///主頁面
  static final String main = "/";

  ///dialog頁面
  static final String dialog = "/dialog";

  ///bloc計數器模組
  static final String counter = "/counter";

  ///測試佈局頁面
  static final String testLayout = "/testLayout";

  ///演示SmartDialog控制元件
  static final String smartDialog = "/smartDialog";

  ///Bloc跨頁面傳遞事件
  static final String spanOne = "/spanOne";
  static final String spanTwo = "/spanOne/spanTwo";

  ///GetX 計數器  跨頁面互動
  static final String counterGet = "/counterGet";
  static final String jumpOne = "/jumpOne";
  static final String jumpTwo = "/jumpOne/jumpTwo";

  ///別名對映頁面
  static final List<GetPage> getPages = [
    GetPage(name: main, page: () => MainPage()),
    GetPage(name: dialog, page: () => Dialog()),
    GetPage(name: counter, page: () => CounterPage()),
    GetPage(name: testLayout, page: () => TestLayoutPage()),
    GetPage(name: smartDialog, page: () => SmartDialogPage()),
    GetPage(name: spanOne, page: () => SpanOnePage()),
    GetPage(name: spanTwo, page: () => SpanTwoPage()),
    GetPage(name: counterGet, page: () => CounterGetPage()),
    GetPage(name: jumpOne, page: () => JumpOnePage()),
    GetPage(name: jumpTwo, page: () => JumpTwoPage()),
  ];
}

路由API

請注意命名路由，只需要在api結尾加上Named即可，舉例：

• 預設：Get.to(SomePage());
• 命名路由：Get.toNamed(“/somePage”);

詳細Api介紹，下面內容來自GetX的README文件，進行了相關整理

• 導航到新的頁面

Get.to(NextScreen());
Get.toNamed("/NextScreen");

• 關閉SnackBars、Dialogs、BottomSheets或任何你通常會用Navigator.pop(context)關閉的東西

Get.back();

• 進入下一個頁面，但沒有返回上一個頁面的選項（用於SplashScreens，登入頁面等）

Get.off(NextScreen());
Get.offNamed("/NextScreen");

• 進入下一個介面並取消之前的所有路由（在購物車、投票和測試中很有用）

Get.offAll(NextScreen());
Get.offAllNamed("/NextScreen");

• 傳送資料到其它頁面

只要傳送你想要的引數即可。Get在這裡接受任何東西，無論是一個字串，一個Map，一個List，甚至一個類的例項。

Get.to(NextScreen(), arguments: 'Get is the best');
Get.toNamed("/NextScreen", arguments: 'Get is the best');

在你的類或控制器上：

print(Get.arguments);
//print out: Get is the best

• 要導航到下一條路由，並在返回後立即接收或更新資料

var data = await Get.to(Payment());
var data = await Get.toNamed("/payment");

• 在另一個頁面上，傳送前一個路由的資料

Get.back(result: 'success');
// 並使用它，例：
if(data == 'success') madeAnything();

• 如果你不想使用GetX語法，只要把 Navigator（大寫）改成 navigator（小寫），你就可以擁有標準導航的所有功能，而不需要使用context，例如：

// 預設的Flutter導航
Navigator.of(context).push(
  context,
  MaterialPageRoute(
    builder: (BuildContext context) {
      return HomePage();
    },
  ),
);

// 使用Flutter語法獲得，而不需要context。
navigator.push(
  MaterialPageRoute(
    builder: (_) {
      return HomePage();
    },
  ),
);

// get語法
Get.to(HomePage());

動態網頁連結

• 這是一個非常重要的功能，在web端，可以保證通過url傳引數到頁面裡

Get提供高階動態URL，就像在Web上一樣。Web開發者可能已經在Flutter上想要這個功能了，Get也解決了這個問題。

Get.offAllNamed("/NextScreen?device=phone&id=354&name=Enzo");

在你的controller/bloc/stateful/stateless類上：

print(Get.parameters['id']);
// out: 354
print(Get.parameters['name']);
// out: Enzo

你也可以用Get輕鬆接收NamedParameters。

void main() {
  runApp(
    GetMaterialApp(
      initialRoute: '/',
      getPages: [
      GetPage(
        name: '/',
        page: () => MyHomePage(),
      ),
      GetPage(
        name: '/profile/',
        page: () => MyProfile(),
      ),
       //你可以為有引數的路由定義一個不同的頁面，也可以為沒有引數的路由定義一個不同的頁面，但是你必須在不接收引數的路由上使用斜槓"/"，就像上面說的那樣。
       GetPage(
        name: '/profile/:user',
        page: () => UserProfile(),
      ),
      GetPage(
        name: '/third',
        page: () => Third(),
        transition: Transition.cupertino  
      ),
     ],
    )
  );
}

傳送命名路由資料

Get.toNamed("/profile/34954");

在第二個頁面上，通過引數獲取資料

print(Get.parameters['user']);
// out: 34954

現在，你需要做的就是使用Get.toNamed()來導航你的命名路由，不需要任何context(你可以直接從你的BLoC或Controller類中呼叫你的路由)，當你的應用程式被編譯到web時，你的路由將出現在URL中。

最後

相關地址

• 文中DEMO地址：flutter_use
• GetX外掛地址：getx_template

系列文章

引流了，手動滑稽.jpg

• Dialog解決方案，牆裂推薦

一種更優雅的Flutter Dialog解決方案

• 狀態管理篇

fish_redux使用詳解---看完就會用！

flutter_bloc使用解析---騷年，你還在手搭bloc嗎！