Flutter:一页上有两(2)个抽屉? [英] Flutter: Two (2) drawers on a single page?
本文介绍了Flutter:一页上有两(2)个抽屉?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个顶部的栏，左侧(设置)和右侧(个人资料)带有图标.我需要一个抽屉，根据单击的图标从左侧或右侧滑出.我的左侧(设置)可以正常工作，但是我不知道如何在单个页面上放置两个抽屉.
I have a top bar with icons on the left (settings) and right (profile). I need a drawer to slide out from either the left or right depending on the icon clicked. I have the left side (settings) working correctly however I don't understand how to have two drawers on a single page.
我相信拥有两个抽屉比根据所选链接以编程方式编辑抽屉更有意义，但是我又一次错了，而且常常:)
I believe having two drawers makes more sense than programmatically editing the drawers based upon the link selected but then again I've been wrong before and often :)
import 'package:curved_navigation_bar/curved_navigation_bar.dart';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'GovMatrix',
theme: ThemeData(
brightness: Brightness.dark,
primaryColor: Colors.black,
accentColor: Colors.grey,
//canvasColor: Colors.grey[300],
//canvasColor: Colors.transparent,
canvasColor: Colors.transparent,
fontFamily: 'Calibri',
textTheme: TextTheme(
headline: TextStyle(
fontSize: 72.0,
color: Colors.black,
fontWeight: FontWeight.bold,
),
title: TextStyle(
fontSize: 36.0,
color: Colors.black,
fontStyle: FontStyle.normal,
),
body1: TextStyle(
fontSize: 14.0,
color: Colors.black,
),
),
),
home: BottomNavBar(),
);
}
}
class BottomNavBar extends StatefulWidget {
@override
_BottomNavBarState createState() => _BottomNavBarState();
}
class _BottomNavBarState extends State<BottomNavBar> {
int _page = 0;
@override
Widget build(BuildContext context) {
String title = "GovMatrix";
return Scaffold(
appBar: AppBar(
title: Text("GovMatrix"),
actions: <Widget>[
Padding(
padding: const EdgeInsets.all(14.0),
child: Icon(Icons.account_circle),
),
],
elevation: 50.0,
),
drawer: new Drawer(
child: new ListView(
children: <Widget>[
new UserAccountsDrawerHeader(
accountName: new Text(
'Guest Client',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w800,
color: Colors.grey[300],
),
),
accountEmail: Text(
'Support@GovMatrix.com',
style: TextStyle(
fontWeight: FontWeight.w600,
color: Colors.grey[300],
),
),
/*currentAccountPicture: new CircleAvatar(
child: Image.asset('assets/images/guest_icon_1.png'),
),*/
),
new ListTile(
title: new Text(
'Profile',
style: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.w600,
color: Colors.white,
),
),
onTap: () {
// Update the state of the app
// ...
// Then close the drawer
Navigator.pop(context);
},
leading: new Icon(
Icons.person,
size: 26.0,
color: Colors.white,
),
),
/*new Divider(
color: Colors.white,
),*/
new ListTile(
title: new Text(
'Notifications',
style: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.w600,
color: Colors.white,
),
),
onTap: () {
// Update the state of the app
// ...
// Then close the drawer
Navigator.pop(context);
},
leading: new Icon(
Icons.notifications,
size: 26.0,
color: Colors.white,
),
),
/*new Divider(
color: Colors.white,
),*/
new ListTile(
title: new Text(
'Settings',
style: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.w600,
color: Colors.white,
),
),
onTap: () {
// Update the state of the app
// ...
// Then close the drawer
Navigator.pop(context);
},
leading: new Icon(
Icons.settings,
size: 26.0,
color: Colors.white,
),
),
/*new Divider(
color: Colors.white,
),*/
new ListTile(
title: new Text(
'Log Out',
style: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.w600,
color: Colors.white,
),
),
onTap: () {
// Update the state of the app
// ...
// Then close the drawer
Navigator.pop(context);
},
leading: new Icon(
Icons.lock,
size: 26.0,
color: Colors.white,
),
),
/*new Divider(
color: Colors.white,
),*/
new ListTile(
title: new Text(
'Close Menu',
style: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.w600,
color: Colors.white,
),
),
onTap: () {
// Update the state of the app
// ...
// Then close the drawer
Navigator.pop(context);
},
leading: new Icon(
Icons.close,
size: 26.0,
color: Colors.white,
),
),
/*new Divider(
color: Colors.white,
),*/
],
),
),
bottomNavigationBar: CurvedNavigationBar(
index: 0,
height: 75.0,
color: Colors.black,
items: <Widget>[
Icon(Icons.library_books, color: Colors.white, size: 30),
Icon(Icons.calendar_today, color: Colors.white, size: 30),
Icon(Icons.people, color: Colors.white, size: 30),
Icon(Icons.check_box, color: Colors.white, size: 30),
Icon(Icons.find_in_page, color: Colors.white, size: 30),
],
buttonBackgroundColor: Colors.black,
backgroundColor: Colors.grey[300],
animationCurve: Curves.easeInOut,
animationDuration: Duration(milliseconds: 400),
onTap: (index) {
setState(() {
_page = index;
});
},
),
body: Container(
color: Colors.grey[300],
child: Center(
child: Text(
_page.toString(),
textScaleFactor: 10.0,
style: TextStyle(color: Colors.black),
),
),
),
);
}
}
推荐答案
检查一下
import 'package:flutter/material.dart';
class TwoDrawers extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("2 Drawers"),
leading: Builder(
builder: (context){
return IconButton(
icon: Icon(Icons.settings),
onPressed: (){
Scaffold.of(context).openDrawer();
},
);
},
),
actions: <Widget>[
Builder(
builder: (context){
return IconButton(
icon: Icon(Icons.person),
onPressed: (){
Scaffold.of(context).openEndDrawer();
},
);
},
)
],
),
drawer: Drawer(
child: Container(
color: Colors.blue,
child: Center(
child: Text(
"Settings",
style: TextStyle(
color: Colors.white,
fontSize: 30
),
),
),
),
),
endDrawer: Drawer(
child: Container(
color: Colors.red,
child: Center(
child: Text(
"Profile",
style: TextStyle(
color: Colors.white,
fontSize: 30
),
),
),
),
),
);
}
}
输出:
这篇关于Flutter:一页上有两(2)个抽屉?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
