我有这个抽屉,我正在尝试在页面之间导航,而抽屉仍然使用 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 的问题,因为我需要它用于动画,但是当我运行代码时出现错误
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'),
),
);
}
}