flutter get 插件介紹

get 插件官方文檔
get gitbook
get 插件里面有很多有用的功能,大概有下面幾個(gè):

snackbar 消息通知的彈框

dialog 對(duì)話框

bootomsheet

navigation 導(dǎo)航路由
obx 響應(yīng)式狀態(tài)管理(類(lèi)似 vue, 不用寫(xiě) setState 了)

通過(guò) get cli 來(lái)創(chuàng)建項(xiàng)目
https://github.com/jonataslaw/get_cli

get cli 文檔

get cli

安裝:

pub global activate get_cli 

get cli 創(chuàng)建項(xiàng)目

get  create  project:xxx
會(huì)同時(shí)執(zhí)行新建項(xiàng)目和 get  init
如果上面的 卡住,用下面的代替

flutter create project_name
cd project_name
get init

get 快速開(kāi)始

編輯:pubspec.yaml

dependencies:
  get: ^4.1.1

狀態(tài)管理

簡(jiǎn)單的狀態(tài)管理器(GetBuilder)和響應(yīng)式狀態(tài)管理器(GetX)

官方計(jì)時(shí)器例子

  • 變量控制器controller (繼承 GetxController)
class Controller extends GetxController{
  var count = 0.obs;
  increment() => count++;
}
  • 頁(yè)面
    使用Getx你可能不再需要使用StatefulWidget, 直接 StatelessWidget 可以節(jié)省內(nèi)存
// 第一個(gè)頁(yè)面
class Home extends StatelessWidget {

  @override
  Widget build(context) {

    // 使用Get.put()實(shí)例化你的類(lèi),使其對(duì)當(dāng)下的所有子路由可用。
    final Controller c = Get.put(Controller());

    return Scaffold(
      // 使用Obx(()=>每當(dāng)改變計(jì)數(shù)時(shí),就更新Text()。
      appBar: AppBar(title: Obx(() => Text("Clicks: ${c.count}"))),

      // 用一個(gè)簡(jiǎn)單的Get.to()即可代替Navigator.push那8行,無(wú)需上下文!
      body: Center(child: ElevatedButton(
              child: Text("Go to Other"), onPressed: () => Get.to(Other()))),
      floatingActionButton:
          FloatingActionButton(child: Icon(Icons.add), onPressed: c.increment));
  }
}

// 第二個(gè)頁(yè)面
class Other extends StatelessWidget {
  // 你可以讓Get找到一個(gè)正在被其他頁(yè)面使用的Controller,并將它返回給你。
  final Controller c = Get.find();

  @override
  Widget build(context){
     // 訪問(wèn)更新后的計(jì)數(shù)變量
     return Scaffold(body: Center(child: Text("${c.count}")));
  }
}

定義響應(yīng)式變量

Controller 類(lèi)里面定義變量的時(shí)候,如果聲明一個(gè)可響應(yīng)式的變量有下面幾種方式

  • Rx{Type}
final name = RxString('');
final isLogged = RxBool(false);
final count = RxInt(0);
final balance = RxDouble(0.0);
final items = RxList<String>([]);
final myMap = RxMap<String, int>({});
  • Rx<Type>
final number = Rx<Num>(0)
final items = Rx<List<String>>([]);
final myMap = Rx<Map<String, int>>({});

// 自定義類(lèi) - 可以是任何類(lèi)
final user = Rx<User>();
  • 添加 .obs 作為value的后綴
final number = 0.obs;
final items = <String>[].obs;
final myMap = <String, int>{}.obs;

// 自定義類(lèi) - 可以是任何類(lèi)
final user = User().obs;

如果是 類(lèi)為 obs, 更新里面的屬性需要 顯式 調(diào)用 refresh 或者 update 方法:

final user = User(name: 'John', last: 'Doe', age: 33).obs;

// `user`是 "響應(yīng)式 "的,但里面的屬性卻不是!
// 所以,如果我們改變其中的一些變量:
user.value.name = 'Roi';
// 小部件不會(huì)重建! 
// 對(duì)于自定義類(lèi),我們需要手動(dòng) "通知 "改變。
user.refresh();

// 或者我們可以使用`update()`方法!
user.update((value){
  value.name='Roi';
});

路由導(dǎo)航

普通導(dǎo)航

  • 導(dǎo)航到新頁(yè)面
Get.to(NextScreen());
  • 關(guān)閉頁(yè)面
    SnackBars、Dialogs、BottomSheets, 和任何可以 Navigator.pop(context) 關(guān)閉的東西
Get.back();
  • 新頁(yè)面,沒(méi)有返回按鈕 (登錄頁(yè)面, 歡迎頁(yè)面等 不準(zhǔn)用戶返回上個(gè)頁(yè)面的)
Get.off(NextScreen());
  • 進(jìn)入下一個(gè)界面并取消之前的所有路由
    在購(gòu)物車(chē)、投票和測(cè)試中很有用 ?
    Get.offAll(NextScreen());

  • 導(dǎo)航到下一條路由,并在返回后立即接收數(shù)據(jù)

// Payment
Get.back(result: 'success');
var data = await Get.to(Payment());
// data    result: 'success'

和 原生打開(kāi)頁(yè)面對(duì)比

// 默認(rèn)的Flutter導(dǎo)航
Navigator.of(context).push(
  context,
  MaterialPageRoute(
    builder: (BuildContext context) {
      return HomePage();
    },
  ),
);
// get 的導(dǎo)航
Get.to(HomePage());

別名導(dǎo)航

普通導(dǎo)航后面加 Named 就可以啦
需要在 GetMaterialApp 定義 getPages 路由列表(其實(shí)和 MaterialApp 定義的路由差不多)

void main() {
  runApp(
    GetMaterialApp(
      initialRoute: '/',
      getPages: [
        GetPage(name: '/', page: () => MyHomePage()),
        GetPage(name: '/second', page: () => Second()),
        GetPage(
          name: '/third',
          page: () => Third(),
          transition: Transition.zoom  
        ),
      ],
    )
  );
  • 導(dǎo)航到下一個(gè)頁(yè)面
Get.toNamed("/NextScreen");
  • 打開(kāi)并刪除前一個(gè)頁(yè)面
Get.offNamed("/NextScreen");
  • 瀏覽并刪除之前所有的頁(yè)面
Get.offAllNamed("/NextScreen");

路由傳參

  • 直接是查詢參數(shù):
Get.offAllNamed("/NextScreen?device=phone&id=354&name=Enzo");

另一個(gè)頁(yè)面獲取參數(shù):

print(Get.parameters['id']);
// out: 354
print(Get.parameters['name']);
// out: Enzo
  • 傳遞 uri 參數(shù)
    (uri 里面 用 : 分割 , 類(lèi)似 gin 里面uri 里面的)
    如果有兩個(gè) 比如 /profile//profile/:user 短的profile 必須 用 / 結(jié)尾
GetPage(
        name: '/profile/',
        page: () => MyProfile(),
      ),
       //你可以為有參數(shù)的路由定義一個(gè)不同的頁(yè)面,也可以為
沒(méi)有參數(shù)的路由定義一個(gè)不同的頁(yè)面,但是你必須在不接收參數(shù)的路由上使用斜杠"/",就像上面說(shuō)的那樣。
       GetPage(
        name: '/profile/:user',
        page: () => UserProfile(),
      ),

上面路由可以下面?zhèn)鲄⒑瞳@取

Get.toNamed("/profile/34954?flag=true");
print(Get.parameters['user']);
print(Get.parameters['flag']);
// out: 34954 true

中間件

中間件通過(guò)監(jiān)聽(tīng)Get事件來(lái)觸發(fā)動(dòng)作,你可以使用routingCallback來(lái)實(shí)現(xiàn)

GetMaterialApp(
  routingCallback: (routing) {
    if(routing.current == '/second'){
      openAds();
    }
  }
)

一些彈框

  • SnackBar
    函數(shù)簽名
Get.snackbar(
  "Hey i'm a Get SnackBar!", // title
  "It's unbelievable! I'm using SnackBar without context, without boilerplate, without Scaffold, it is something truly amazing!", // message
  icon: Icon(Icons.alarm),
  shouldIconPulse: true,
  onTap:(){},
  barBlur: 20,
  isDismissible: true,
  duration: Duration(seconds: 3),
);
final snackBar = SnackBar(
  content: Text('Hi!'),
  action: SnackBarAction(
    label: 'I am a old and ugly snackbar :(',
    onPressed: (){}
  ),
);

// 在小組件樹(shù)中找到腳手架并使用它顯示一個(gè)SnackBars。
Scaffold.of(context).showSnackBar(snackBar);

上面等價(jià)于

Get.snackbar('Hi', 'i am a modern snackbar');
  • Dialogs
Get.dialog(YourDialogWidget());
  • BottomSheets

GetView

如果只依賴一個(gè)控制器 GetView 會(huì)簡(jiǎn)化開(kāi)發(fā),如果多個(gè)還是按照原來(lái)的寫(xiě)法吧。
可以直接寫(xiě)這樣,然后就會(huì)有一個(gè) 默認(rèn)的 controller 控制器實(shí)例可以用了
Get.put(Controller());
直接 繼承 GetView<AwesomeController> (要把 自己定義的 controller 寫(xiě)到模板類(lèi)型里)
里面直接使用 controller 代指 controller 實(shí)例

class AwesomeController extends GetxController {
   final String title = 'My Awesome View';
 }

  // 一定要記住傳遞你用來(lái)注冊(cè)控制器的`Type`!
 class AwesomeView extends GetView<AwesomeController> {
   @override
   Widget build(BuildContext context) {
     return Container(
       padding: EdgeInsets.all(20),
       child: Text( controller.title ), // 只需調(diào)用 "controller.something"。
     );
   }
 }

Bindings

Bindings 主要是配合路由進(jìn)行使用,當(dāng)通過(guò) GetX 路由進(jìn)入頁(yè)面時(shí),會(huì)自動(dòng)調(diào)用 dependencies 方法。 可以方便的幫我們做一些 接口 請(qǐng)求初始化的操作, 然后在 controller 里面就非常方便的使用 請(qǐng)求了。重點(diǎn)是 代碼結(jié)構(gòu)清晰。

Page 中就能正常使用 Get.find ( GetView 的可以直接 controller 也可以 find )獲取到注入的 Controller 對(duì)象
就不用寫(xiě) get.put() 了
binding 多個(gè) Controller ,可以依次通過(guò) find 獲取實(shí)例

final HomeController1 c = Get.find();
final HomeController c = Get.find();
或者
Get.find<HomeController1 >().

可以看到只要傳指定的類(lèi)型,find 就可以獲對(duì)應(yīng)的 實(shí)例

關(guān)于 get cli 進(jìn)階使用

https://1467602180.github.io/flutter-getx-doc/engineer/advanced#%E4%BD%BF%E7%94%A8

遇到的問(wèn)題

就是我需要修改某個(gè) obs 屬性,一開(kāi)始沒(méi)有 用 Obx 來(lái)包裝,導(dǎo)致樣式不對(duì),后來(lái)用Obx 包裝一下就好了。就是說(shuō),如果一個(gè)組件和 obs 屬性關(guān)聯(lián),那要用 Obx 包裝才能起到響應(yīng)式改變

Scaffold(
//bottomNavigationBar 雖然沒(méi)用到 controller.select_index ,但是要重新渲染就要用 Obx 修改, 因?yàn)閎ottomNavigationBar  用到了 currentIndex, 也就是Obx 的屬性。
      bottomNavigationBar: Obx(() => BottomNavigationBar(
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(icon: Icon(Icons.home), label: '首頁(yè)'),
          BottomNavigationBarItem(icon: Icon(Icons.business), label: '發(fā)現(xiàn)'),
          BottomNavigationBarItem(icon: Icon(Icons.school), label: '個(gè)人中心'),
        ],
        currentIndex:  controller.select_index.value,
        selectedItemColor: Colors.teal,
        onTap: (int index){ controller.select_index.value = index; },
      )),
      body: Obx(() => tab_widget[controller.select_index.value])
    );

響應(yīng)式屬性:

設(shè)置屬性和獲取屬性,如果是響應(yīng)式的都要 .value 不然可能不會(huì)做到響應(yīng)和屬性綁定。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 227,572評(píng)論 6 531
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 98,071評(píng)論 3 414
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人,你說(shuō)我怎么就攤上這事。” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 175,409評(píng)論 0 373
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我,道長(zhǎng),這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 62,569評(píng)論 1 307
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 71,360評(píng)論 6 404
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 54,895評(píng)論 1 321
  • 那天,我揣著相機(jī)與錄音,去河邊找鬼。 笑死,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 42,979評(píng)論 3 440
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 42,123評(píng)論 0 286
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 48,643評(píng)論 1 333
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 40,559評(píng)論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 42,742評(píng)論 1 369
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,250評(píng)論 5 356
  • 正文 年R本政府宣布,位于F島的核電站,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 43,981評(píng)論 3 346
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 34,363評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 35,622評(píng)論 1 280
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 51,354評(píng)論 3 390
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 47,707評(píng)論 2 370

推薦閱讀更多精彩內(nèi)容