本文通过一个实战示例详细介绍了Flutter中TabBar、TabBarView、BottomAppBar以及FloatingActionButton的使用，包括如何创建TabController，设置Tab菜单，以及与Scaffold组件的配合，展示了底部导航栏和浮动按钮的应用。
return IconButton(
icon: Icon(Icons.dehaze,color: Colors.white,),
onPressed: (){
Scaffold.of(context).openDrawer();
},
);
}),
actions: [
IconButton(
icon:Icon(Icons.share),
color: Colors.white,
onPressed: (){},
),
],
bottom: TabBar(
tabs: list.map( (e)=> Tab(text: e) ).toList(),
controller: tabController,
),
),
drawer: MyDrawer(),
body: TabBarView(
controller: tabController,
children: list.map((e){
return Container(
alignment: Alignment.center,
child: Text(e),
);
}).toList(),
),
bottomNavigationBar: BottomAppBar(
color: Colors.orange,
shape: CircularNotchedRectangle(),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
IconButton(icon: Icon(Icons.group_work,color: Colors.white,), onPressed: (){}),
SizedBox(),
IconButton(icon: Icon(Icons.apps,color: Colors.white,), onPressed: (){})
],
),
),
floatingActionButton: IconButton(icon: Icon(Icons.add_circle,color: Colors.blue),iconSize: 60,padding: EdgeInsets.all(0), onPressed: (){}),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
)
);
}
}
class MyDrawer extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Drawer(
child: MediaQuery.removePadding(
context: context,
removeTop: true,
child: Column(
children: [
Container(
最低0.47元/天 解锁文章
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
