如何使用 Flutter GetX 侧边栏

问题描述

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

解决方法

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

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

结果如下：