我试图在我的颤动应用程序中实现侧抽屉作为小部件
home.dart
import '../widgets/navigation_drawer_widget.dart'; //imported the nav drawer class from widgets directory
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return DefaultTabController(length: 2,
child: Scaffold(
drawer: DrawerWidget(),
appBar: AppBar(
title: Text('Home'),
bottom: TabBar(tabs: <Widget>[
Tab(
icon: Icon(Icons.access_time),
text: 'Tab 1',
),
Tab(
icon: Icon(Icons.calendar_today),
text: 'Tab 2',
)
]),
),
body: TabBarView(children: <Widget>[
Tab1(),
Tab2()
]),
)
);
}
}
我的抽屉小部件** navigation_drawer_widget.dart **文件
import 'package:flutter/material.dart';
class DrawerWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
AppBar(
automaticallyImplyLeading: false,
title: Text('Menu'),
),
ListTile(
leading: Icon(Icons.home),
title: Text('Home'),
onTap: () {
Navigator.pushReplacementNamed(context, '/home');
},
),
ListTile(
leading: Icon(Icons.person),
title: Text('My Profile'),
onTap: () {
Navigator.pushReplacementNamed(context, '/profile');
},
),
ListTile(
leading: Icon(Icons.school),
title: Text('My Education'),
onTap: () {
Navigator.pushReplacementNamed(context, '/education');
},
),
],
);
}
}
但是当我点击导航汉堡包图标时,它会显示出类似这样的东西
如您所见,导航抽屉变得透明并延伸到页面的整个宽度。如果我将抽屉代码移动到主页(而不是做DrawerWidget()),它将显示常规良好的导航抽屉。
有什么想法在这里发生?
如果你想要默认的材料设计抽屉,你需要用Column
将DrawerWidget
包裹在Drawer
中。
来自doc:
抽屉可以是任何Widget,但通常最好使用材料库中的
Drawer
小部件,它遵循Material Design规范。
您可以将Drawer
声明为Widget
而不是Class
,然后在文件中导入。
Widget myDrawer = Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
DrawerHeader(...),
ListTile(...)
],
),
);
然后只是:
import 'mydrawer.dart';
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(...),
body: Container(...),
drawer: myDrawer
);
}
}