如何使用 Flutter GetX 侧边栏

Question

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

Answer 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: ...
      );
   }
}

结果如下：