当抽屉仍然显示在我导航到的任何页面上时,如何使用 GetX 进行导航

问题描述 投票:0回答:1

我有这个抽屉,我正在尝试在页面之间导航,而抽屉仍然使用 GetX 显示在所有页面中,但我不知道该怎么做,有人可以帮忙吗?

class ComplexDrawer extends GetView <HomeScreenControllerImp> {
  ComplexDrawer({Key? key}) : super(key: key);


  @override
  Widget build(BuildContext context) {
    double width = MediaQuery.of(context).size.width;
    return Container(
      width: width,
      color: Colorz.compexDrawerCanvasColor,
      child: row(),
    );
  }

  Widget row() {
    return Row(children: [
      Expanded(child: controller.isExpanded ? blackIconTiles() : blackIconMenu()),
      invisibleSubMenus(),
    ]);
  }

  Widget blackIconTiles() {
    return Container(
      width: 200,
      color: Colorz.complexDrawerBlack,
      child: Column(
        children: [
          controlTile(),
          Expanded(
            child: ListView.builder(
              itemCount: cdms.length,
              itemBuilder: (BuildContext context, int index) {
                //  if(index==0) return controlTile();

                CDM cdm = cdms[index];
                bool selected = controller.currentPage == index;
                return ExpansionTile(
                    onExpansionChanged: (z) {
                      // controller.currentPage = z ? index : -1;
                      controller.currentPage = z ? index : 0;

                    },
                    leading: Icon(cdm.icon, color: Colors.white),
                    title: Txt(
                      text: cdm.title,
                      color: Colors.white,
                    ),
                    trailing: cdm.submenus.isEmpty
                        ? null
                        : Icon(
                      selected ? Icons.keyboard_arrow_up : Icons.keyboard_arrow_down,
                      color: Colors.white,
                    ),
                    children: cdm.submenus.map((subMenu) {
                      return sMenuButton(subMenu, false);
                    }).toList());
              },
            ),
          ),
          accountTile(),
        ],
      ),
    );
  }

  Widget controlTile() {
    return Padding(
      padding: const EdgeInsets.only(top: 20, bottom: 30),
      child: ListTile(
        leading: const FlutterLogo(),
        title: const Txt(
          text: "FlutterShip",
          fontSize: 18,
          color: Colors.white,
          fontWeight: FontWeight.bold,
        ),
        onTap: controller.expandOrShrinkDrawer,
      ),
    );
  }

  Widget blackIconMenu() {
    return AnimatedContainer(
      duration: const Duration(seconds: 1),
      width: 100,
      color: Colorz.complexDrawerBlack,
      child: Column(
        children: [
          controlButton(),
          Expanded(
            child: ListView.builder(
              itemCount: cdms.length,
              itemBuilder: (contex, index) {
                // if(index==0) return controlButton();
                return InkWell(
                  onTap: () {
                    // if (index ==0?) return controller.changePage(val);
                    //  if (index ==0){ return controller.changePage(cdms[index] as int);}
                  },
                  child: Container(
                    height: 45,
                    alignment: Alignment.center,
                    child: Icon(cdms[index].icon, color: Colors.white),
                  ),
                );
              },),
          ),
          accountButton(),
        ],
      ),
    );
  }

  Widget invisibleSubMenus() {
    // List<CDM> _cmds = cdms..removeAt(0);
    return AnimatedContainer(
      duration: const Duration(milliseconds: 500),
      width: controller.isExpanded ? 0 :  144,
      color:Colors.white,
      // Colorz.compexDrawerCanvasColor,
      child: Column(
        children: [
          Container(height: 95),
          Expanded(
            child: ListView.builder(
                itemCount: cdms.length,
                itemBuilder: (context, index) {
                  CDM cmd = cdms[index];
                  // if(index==0) return Container(height:95);
                  //controll button has 45 h + 20 top + 30 bottom = 95

                  bool selected = controller.currentPage == index;
                  bool isValidSubMenu = selected && cmd.submenus.isNotEmpty;
                  return subMenuWidget([cmd.title, ...cmd.submenus], isValidSubMenu);
                }),
          ),
        ],
      ),
    );
  }

  Widget controlButton() {
    return Padding(
      padding: const EdgeInsets.only(top: 20, bottom: 30),
      child: InkWell(
        onTap: controller.expandOrShrinkDrawer,
        child: Container(
          height: 45,
          alignment: Alignment.center,
          child: const FlutterLogo(
            size: 40,
          ),
        ),
      ),
    );
  }

  Widget subMenuWidget(List<String> submenus, bool isValidSubMenu) {
    return AnimatedContainer(
      duration: const Duration(milliseconds: 500),
      height: isValidSubMenu ? submenus.length.toDouble() * 37.5 : 45,
      alignment: Alignment.center,
      decoration: BoxDecoration(
          color: isValidSubMenu ? Colorz.complexDrawerBlueGrey : Colors.transparent,
          borderRadius: const BorderRadius.only(
            topRight: Radius.circular(8),
            bottomRight: Radius.circular(8),
          )),
      child: ListView.builder(
          padding: const EdgeInsets.all(6),
          itemCount: isValidSubMenu ? submenus.length : 0,
          itemBuilder: (context, index) {
            String subMenu = submenus[index];
            return sMenuButton(subMenu, index == 0);
          }),
    );
  }

  Widget sMenuButton(String subMenu, bool isTitle) {
    return InkWell(
      onTap: () {
        //handle the function
        //if index==0? donothing: do your logic here
        // controller.changePage(val);
        // if (index ==0){ return controller.changePage(cdms[index] as int);}
        // controller.changePage;
      },
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Txt(
          text: subMenu,
          fontSize: isTitle ? 17 : 14,
          color: isTitle ? Colors.white : Colors.grey,
          fontWeight: FontWeight.bold,
        ),
      ),
    );
  }

  Widget accountButton({bool usePadding = true}) {
    return Padding(
      padding: EdgeInsets.all(usePadding ? 8 : 0),
      child: AnimatedContainer(
        duration: const Duration(seconds: 1),
        height: 45,
        width: 45,
        decoration: BoxDecoration(
          color: Colors.white70,
          // image: const DecorationImage(
          //   image: NetworkImage(Urls.avatar2),
          //   fit: BoxFit.cover,
          // ),
          borderRadius: BorderRadius.circular(6),
        ),
      ),
    );
  }

  Widget accountTile() {
    return Container(
      color: Colorz.complexDrawerBlueGrey,
      child: ListTile(
        leading: accountButton(usePadding: false),
        title: const Txt(
          text: "Sally Gharbiah",
          color: Colors.white,
        ),
        subtitle: const Txt(
          text: "Developer",
          color: Colors.white70,
        ),
      ),
    );
  }

  static List<CDM> cdms = [
    // CDM(Icons.grid_view, "Control", []),

    CDM(Icons.grid_view, "Dashboard", [], ),
    CDM(Icons.subscriptions, "Management", ["Properties", "Leases", "Invoices","Payers"]),
    CDM(Icons.markunread_mailbox, "Real Estate", ["Properties", "Leases", "Invoices","Payers","Inbox","Maintenance","Transfers","Reports","Files"]),
    CDM(Icons.pie_chart, "Analytics", []),
    CDM(Icons.trending_up, "Marketing", []),
    CDM(Icons.power, "HR", ["Ad Blocker", "Everything Https", "Dark Mode"]),
    CDM(Icons.explore, "Reports", []),
    CDM(Icons.settings, "Setting", []),
  ];

}
class HomeScreenControllerImp extends HomeScreenController {
  // int selectedIndex = 0;
  int currentPage = 0; //dont set it to 0
  bool isExpanded = false;
  BuildContext? context;

  List<Widget> listPage = [
    Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        // if (Responsive.isDesktop(context!))
        // Expanded(
        //   child: ComplexDrawer(),
        //   // DrawerMenu(),
        // ),
        // Expanded(
        //   flex: 5,
        //   child: DashboardContent(),
        // )
      ],
    ),
  ];

  @override
  // ignore: avoid_renaming_method_parameters
  changePage(int i) {
    currentPage = i;
    update();
  }

  expandOrShrinkDrawer() {
    isExpanded = !isExpanded;
  }

}

我尝试使用 GetX,但我不知道如何正确执行它,因为我是编程新手。

我遇到了索引 -1 的问题,因为我需要它用于动画,但是当我运行代码时出现错误

flutter dart navigation-drawer flutter-getx
1个回答
0
投票
import 'package:flutter/material.dart';
import 'package:get/get.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'GetX Drawer Navigation',
      home: DrawerNavigationPage(),
    );
  }
}

class DrawerNavigationPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('GetX Drawer Navigation'),
      ),
      drawer: Drawer(
        child: ListView(
          children: [
            ListTile(
              title: Text('Home'),
              onTap: () {
                Get.to(() => HomePage());
                Navigator.of(context).pop(); // Close the drawer
              },
            ),
            ListTile(
              title: Text('Settings'),
              onTap: () {
                Get.to(() => SettingsPage());
                Navigator.of(context).pop(); // Close the drawer
              },
            ),
          ],
        ),
      ),
      body: Container(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Center(
        child: Text('Home Page Content'),
      ),
    );
  }
}

class SettingsPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Settings Page'),
      ),
      body: Center(
        child: Text('Settings Page Content'),
      ),
    );
  }
}
© www.soinside.com 2019 - 2024. All rights reserved.