使用 Flutter 给公司开发项目,有个需求要给 App 添加抽屉菜单 Drawer(滑动侧边栏)。这个需求不难,而且官方也有案例 在屏幕上添加一个 Drawer。
但不够好用,如果不用 AppBar
,那打开抽屉只能采用滑动,手指从屏幕左边向右滑动,没办法用自己定义的按钮去控制开关。而且,像我使用 GetX 管理路由,开关抽屉就很不方便,官网只提供原生代码,这肯定不符合我需求,我希望全部由 GetX 管理。
Navigator.pop(context);
找了一圈,其实我不止我一个人碰到这问题。很早就有人在 GetX 提出这个需求 Open Drawer via Get.drawer (like Get.snackbar etc.)。
本来我以为 GetX 会将 Drawer 集成进去,这样使用抽屉控件就方便了,但作者不决定添加,而是换了种方式,曲线实现,并且还提供案例代码。
Create a globalKey in your controller, and attach it to your Scaffold. You can open and close the drawer directly from your globalKey
我使用后,效果还行,就是我需要的。
import 'package:flutter/material.dart';
import 'package:get/get.dart';
void main() {
Get.put(Controller());
runApp(GetMaterialApp(home: Home()));
}
class Controller extends GetxController {
var scaffoldKey = GlobalKey<ScaffoldState>();
void openDrawer() {
scaffoldKey.currentState.openDrawer();
}
void closeDrawer() {
scaffoldKey.currentState.openEndDrawer();
}
}
class Home extends GetView<Controller> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
key: controller.scaffoldKey,
drawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
DrawerHeader(
child: Text('Drawer Header'),
decoration: BoxDecoration(
color: Colors.blue,
),
),
ListTile(
title: Text('Item 1'),
onTap: controller.closeDrawer,
)
],
),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
onPressed: controller.openDrawer,
child: Text('open drawer'),
)
],
)),
);
}
}
上面代码很简单,没啥要注意的,按需修改,初始化时将 GetxController
依赖注入就行。比如我就将逻辑代码放到 BaseGetController
,然后初始化注入 BaseGetController
。
class BaseGetController extends GetxController{
var scaffoldKey = GlobalKey<ScaffoldState>();
void openDrawer() {
scaffoldKey.currentState?.openDrawer();
}
void closeDrawer() {
scaffoldKey.currentState?.openEndDrawer();
}
}
class Injection{
static Future<void> init() async{
Get.put(BaseGetController());
}
}
await Injection.init();
本文由老郭种树原创,转载请注明:https://guozh.net/flutter-getx-adds-drawer-menu-drawer/