android - 如何在颤动中将抽屉链接到tabBar
问题描述
我有这个应用程序,我正在颤振中创建,但我不知道如何添加按钮以打开 appBar 中的侧抽屉。除非我将其更改appBar: new TabBar
为appBar: AppBar
import 'package:Schedule/UI/Home/homePage.dart';
import 'package:flutter/material.dart';
import 'models/global.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp
(
title: 'Schedule',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Schedule',)
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return SafeArea(
child: MaterialApp(
color: Colors.yellow,
home: DefaultTabController(
length: 5,
child: new Scaffold(
body: Stack(
children: <Widget>[
TabBarView(
children: [
new Container(color: Colors.red,),
new Container(color: Colors.blue,),
HomePage(),
new Container(
color: Colors.white,
),
new Container(
color: darkGreyColor,
),
],
),
Container(
height:150,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(30),
bottomRight: Radius.circular(30),
),
color: Colors.white,
)
),
Container(
margin: EdgeInsets.only(top:130,left: MediaQuery.of(context).size.width*0.43),
child: FloatingActionButton(
child: Icon(Icons.add ),
backgroundColor: redColor,
onPressed: null,
),
)
],
),
drawer: NavDrawer(),
appBar: new TabBar(
tabs: [
Tab(
icon: new Icon(Icons.menu),
),
Tab(
icon: new Icon(Icons.done),
),
Tab(
icon: new Icon(Icons.home),
),
Tab(
icon: new Icon(Icons.access_time),
),
Tab(icon: new Icon(Icons.search),)
],
labelColor: Colors.red[900],
unselectedLabelColor: Colors.black,
indicatorSize: TabBarIndicatorSize.label,
indicatorPadding: EdgeInsets.all(5.0),
indicatorColor: Colors.red[900],
),
backgroundColor: Colors.white,
),
),
),
);
}
}
class NavDrawer extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
DrawerHeader(
child: new UserAccountsDrawerHeader(
accountName:null ,
accountEmail: null,
currentAccountPicture: null,
)
),
ListTile(
leading: Icon(Icons.verified_user),
title: Text('Profile'),
onTap: () => {Navigator.of(context).pop()},
),
ListTile(
leading: Icon(Icons.notifications),
title: Text('Notifications'),
onTap: () => {},
),
ListTile(
leading: Icon(Icons.settings),
title: Text('Settings'),
onTap: () => {Navigator.of(context).pop()},
),
ListTile(
leading: Icon(Icons.border_color),
title: Text('Feedback'),
onTap: () => {Navigator.of(context).pop()},
),
ListTile(
leading: Icon(Icons.logout),
title: Text('Logout'),
onTap: () => {Navigator.of(context).pop()},
),
],
),
);
}
}
解决方案
您可以使用 TabController 通过 _scaffoldKey.currentState.openDrawer() 打开抽屉:
TabController _tabController;
final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();
@override
void initState() {
super.initState();
_tabController = TabController(length: _categoryList.length, vsync: this);
}
...
Scaffold(
key: _scaffoldKey,
...
TabBar(
controller: _tabController,
onTap: (index){if(_tabController.index == 0) _scaffoldKey.currentState.openDrawer();}
推荐阅读
- bash - 如何输入令牌而不在终端中留下历史记录?
- discord.py - 如何将 DM 发送给命令作者?
- javascript - ThreeJS 加载 GLTF 并使用 FabricJS 画布作为纹理
- vue.js - "Mustache" syntax alternative for Vue template when using Pug language
- python - Scrapy startproject 不起作用权限被拒绝:蜘蛛
- amazon-web-services - 为什么我无法从我的 PC 连接到新的 AWS Aurora Serverless 实例?
- excel - 如何按颜色对表格列进行排序?
- html - 如何在表格边界内对齐文本输入元素?
- python - 枚举 Pandas 数据框后,字典条目都相同
- python - Django & Celery - 跨多个方法和文件发送信号