如何使用 Flutter GetX 侧边栏答案

【问题标题】：How to use Flutter GetX Sidebar如何使用 Flutter GetX 侧边栏
【发布时间】：2021-04-06 17:47:43
【问题描述】：

如何在 Flutter 中使用 GetX 实现图像（侧边栏和导航菜单）中的设计？类似于网络上的标签。

【问题讨论】：

【解决方案1】：

这是一个例子，也许它可以帮助你：

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

class SideBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: Column(
        children: <Widget>[
          DrawerHeader(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Center(
                  child: Icon(
                    Icons.person,
                    color: Colors.white,
                    size: 50.0,
                  ),
                ),
                Center(
                  child: Text(
                    "Vakup",
                    textAlign: TextAlign.center,
                    style: TextStyle(color: Colors.white, fontSize: 25),
                  ),
                ),
              ],
            ),
            decoration: BoxDecoration(
              color: Colors.blueAccent,
            ),
          ),
          ListTile(
            leading: Icon(Icons.read_more),
            title: Text('Leer datos'),
            onTap: () {
              if (Get.currentRoute == Routes.HOME) {
                Get.back();
              } else {
                Get.toNamed(Routes.HOME);
              }
            },
          ),
          ListTile(
            leading: Icon(Icons.pets),
            title: Text('Registrar animal'),
            onTap: () {
              if (Get.currentRoute == Routes.NEWANIMAL) {
                Get.back();
              } else {
                Get.toNamed(Routes.NEWANIMAL);
              }
            },
          ),
          ListTile(
            leading: Icon(Icons.list_alt),
            title: Text('Lista movimientos'),
            onTap: () {
              if (Get.currentRoute == Routes.MOVEMENTS) {
                Get.back();
              } else {
                //Get.to
                Get.toNamed(Routes.MOVEMENTS);
              }
            },
          ),
          ListTile(
            leading: Icon(Icons.list),
            title: Text('Lista animales'),
            onTap: () {
              if (Get.currentRoute == Routes.LISTOFANIMALS) {
                Get.back();
              } else {
                Get.toNamed(Routes.LISTOFANIMALS);
              }
            },
          ),
          ListTile(
            leading: Icon(Icons.edit),
            title: Text('Grabar datos'),
            onTap: () {
              if (Get.currentRoute == Routes.GRABADO) {
                Get.back();
              } else {
                Get.toNamed(Routes.GRABADO);
              }
            },
          ),
          ListTile(
            leading: Icon(Icons.bluetooth),
            title: Text('Conexion BT'),
            onTap: () {
              if (Get.currentRoute == Routes.CONEXIONBT) {
                Get.back();
              } else {
                Get.toNamed(Routes.CONEXIONBT);
              }
            },
          ),
          ListTile(
            leading: Icon(Icons.picture_as_pdf),
            title: Text('Exportar Datos'),
            onTap: () {
              if (Get.currentRoute == Routes.EXPORT) {
                Get.back();
              } else {
                Get.toNamed(Routes.EXPORT);
              }
            },
          ),
          ListTile(
            leading: Icon(Icons.recent_actors_rounded),
            title: Text('Acerca de'),
            onTap: () {
              if (Get.currentRoute == Routes.ACERCA) {
                Get.back();
              } else {
                Get.toNamed(Routes.ACERCA);
              }
            },
          ),
        ],
      ),
    );
  }
}

首页部分是：

import 'package:vakuprfid/app/modules/widgets/side_bar.dart';//import widget

class HomeView extends GetView<HomeController> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        drawer: SideBar(),
        body: ...
      );
   }
}

这是结果：

【讨论】：

【解决方案2】：

很简单，只要让你的右侧内容使用GetMaterialApp 并且路由改变是渲染右侧的内容，然后left sidler是一个组件warp你的menuslider，最后控制您离开滑块菜单更改索引。显示我的代码

 Widget build(BuildContext context) {
    return ScreenUtilInit(
        designSize: const Size(dessignWidth, dessignHeight),
        builder: () => BarcodeKeyboardListener(
            onBarcodeScanned: (String codeValue) {},
            child: Material(
              child: MaterialApp(
                  localizationsDelegates: const [
                    GlobalMaterialLocalizations.delegate,
                    GlobalWidgetsLocalizations.delegate,
                  ],
                  supportedLocales: const [
                    Locale('zh', 'CH'),
                    Locale('en', 'US'),
                  ],
                  home: Row(
                    children: [
                      Material(
                        child: SliderMenu(),
                      ),
                      Expanded(
                          child: GetMaterialApp(
                              debugShowCheckedModeBanner: false,
                              enableLog: true,
                              navigatorKey: Get.key,
                              routingCallback: RouteChangeMiddleWare.observer,
                              logWriterCallback: Logger.write,
                              initialRoute: AppPages.INITIAL,
                              getPages: AppPages.routes,
                              unknownRoute: AppPages.unknownRoute,
                              builder: EasyLoading.init(),
                              onInit: () =>
                                  {logger.v('Global.CONFIG', AppConfig)}))
                    ],
                  )),
            )));
  }```
hope to help you;

【讨论】：