Flutter 添加抽屉菜单 Drawer,使用 GetX 呢?

使用 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/

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注