前言
Flutter是谷歌的移動UI框架,可以快速在iOS和Android上構建高質量的原生用戶界面。
IT界著名的尼古拉斯·高爾包曾說:輪子是IT進步的階梯!熱門的框架千篇一律,好用輪子萬里挑一!Flutter作為這兩年開始崛起的跨平臺開發框架,其第三方生態相比其他成熟框架還略有不足,但輪子的數量也已經很多了。本系列文章挑選日常app開發常用的輪子分享出來,給大家提高搬磚效率,同時也希望flutter的生態越來越完善,輪子越來越多。
本系列文章準備了超過50個輪子推薦,工作原因,儘量每1-2天出一篇文章。
tip:本系列文章合適已有部分flutter基礎的開發者,入門請戳:flutter官網
正文
輪子
- 輪子名稱:hidden_drawer_menu
- 輪子概述:flutter一個全屏動效的抽屜組件.
- 輪子作者:[email protected]
- 推薦指數:★★★★
- 常用指數:★★★
- 效果預覽:
安裝
dependencies: hidden_drawer_menu: ^1.1.2
import 'package:hidden_drawer_menu/hidden_drawer/hidden_drawer_menu.dart';
使用方法
Widget build(BuildContext context) { return SimpleHiddenDrawer( menu:Menu(), //抽屜區域佈局 screenSelectedBuilder: (position,controller) { return Scaffold( //頁面主體區域 appBar: AppBar( title: Text("hidden_drawer_menu"), ), body: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Center( child: Text("當前頁面$position"), ), Center( child: FlatButton( child: Text("打開抽屜"), onPressed: (){ controller.toggle(); }, ), ) ], ), ); } ); }
抽屜區域佈局內容:
class Menu extends StatefulWidget { @override _MenuState createState() => _MenuState(); } class _MenuState extends State { @override Widget build(BuildContext context) { return Container( width: double.maxFinite, height: double.maxFinite, color: Colors.cyan, padding: const EdgeInsets.all(8.0), child: Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.start, children: [ FlatButton( child: Text("菜單一",style: TextStyle(color: Colors.white,fontSize: 20)), onPressed: (){ SimpleHiddenDrawerProvider.of(context).setSelectedMenuPosition(0); }, ), FlatButton( child: Text("菜單二",style: TextStyle(color: Colors.white,fontSize: 20)), onPressed: (){ SimpleHiddenDrawerProvider.of(context).setSelectedMenuPosition(1); }, ) ], ), ); } }
控制抽屜開關:
SimpleHiddenDrawerProvider.of(context).toggle();
監聽抽屜按鈕postion:
SimpleHiddenDrawerProvider.of(context).getPositionSelectedListener().listen((position){ print(position); });
監聽當前抽屜狀態:
SimpleHiddenDrawerProvider.of(context).getMenuStateListener().listen((state){ print(state); //closed,opening,open,closing });
如果只是作為抽屜使用,就這麼簡單了。更多用法請查看倉庫文檔。