Flutter Drawer抽屉菜单示例详解
更新时间：2022年03月23日 10:46:19 作者：伟雪无痕
这篇文章主要为大家详细介绍了Flutter Drawer抽屉菜单示例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了Flutter Drawer抽屉菜单示例代码，供大家参考，具体内容如下
一.Flutter Drawer组件简介
1.源码查看
const Drawer({
Key? key,
this.elevation = 16.0, //阴影效果大小
this.child, //内容元素
this.semanticLabel, //关闭/打开抽屉时的通知信息
}) 二.抽屉菜单示例
1.菜单项，使用 ListTile 实现
Expanded(
child: ListView(
children: <Widget>[
ListTile(
leading: const Icon(Icons.person),
title: const Text('Personal'),
),
ListTile(
leading: const Icon(Icons.message),
title: const Text('information'),
),
ListTile(
leading: const Icon(Icons.settings),
title: const Text('about'),
),
],
),
),2.底部导航栏，使用BottomNavigationBar实现
bottomNavigationBar: BottomNavigationBar(
currentIndex: currentIndex,
type: BottomNavigationBarType.fixed,
unselectedItemColor: Colors.grey,
selectedItemColor: Colors.blue,
/*unselectedLabelStyle:TextStyle(
color: Colors.black
),*/
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: "首页",
//backgroundColor:Colors.blue
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
label: "通讯录",
//backgroundColor:Colors.blue
),
BottomNavigationBarItem(
icon: Icon(Icons.find_in_page),
label: "发现",
//backgroundColor:Colors.blue
),
BottomNavigationBarItem(
icon: Icon(Icons.flip_outlined),
label: "我的",
//backgroundColor:Colors.blue
),
],
onTap: (index){
setState(() {
print("the index is :$index");
currentIndex=index;
});
},
),参考：flutter底部导航栏
3.悬浮按钮，使用FloatingActionButton实现
floatingActionButton: FloatingActionButton( //悬浮按钮 child: Icon(Icons.add), onPressed:_onAddNum ),
三.Demo及实际效果
1.mydrawer.dart
import 'package:flutter/material.dart';
class MyDrawer extends StatelessWidget {
const MyDrawer({
Key? key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Drawer(
elevation: 30,
child: MediaQuery.removePadding(
context: context,
//移除抽屉菜单顶部默认的空白
removeTop: true,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 30.0),
child: Row(
children: <Widget>[
Padding(
padding: const EdgeInsets.symmetric(horizontal: 15.0),
child: ClipOval(
child: Image.asset(
"images/cc.png",
width: 60,
),
),
),
Text(
"jon",
style: TextStyle(fontWeight: FontWeight.bold),
)
],
),
),
Expanded(
child: ListView(
children: <Widget>[
ListTile(
leading: const Icon(Icons.person),
title: const Text('Personal'),
),
ListTile(
leading: const Icon(Icons.message),
title: const Text('information'),
),
ListTile(
leading: const Icon(Icons.settings),
title: const Text('about'),
),
],
),
),
],
),
),
);
}
}2.MainPage.dart
import 'package:flutter/material.dart';
import 'findpage.dart';
import 'mypage.dart';
import 'contactpage.dart';
import 'homepage.dart';
import 'mydrawer.dart';
class MainPage extends StatefulWidget{
const MainPage({Key? key}) : super(key: key);
@override
State<StatefulWidget> createState()=>_MainPageState();
}
class _MainPageState extends State<MainPage>{
var allPages=[HomePage(),ContactPage(),FindPage(),MyPage()];
var currentIndex=0;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar( //导航栏
title: Text("App Name"),
actions: <Widget>[ //导航栏右侧分享菜单
IconButton(icon: Icon(Icons.share), onPressed: () {}),
],
),
drawer: MyDrawer(), //菜单抽屉
body: allPages[currentIndex],
backgroundColor: Colors.green,
bottomNavigationBar: BottomNavigationBar(
currentIndex: currentIndex,
type: BottomNavigationBarType.fixed,
unselectedItemColor: Colors.grey,
selectedItemColor: Colors.blue,
/*unselectedLabelStyle:TextStyle(
color: Colors.black
),*/
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: "首页",
//backgroundColor:Colors.blue
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
label: "通讯录",
//backgroundColor:Colors.blue
),
BottomNavigationBarItem(
icon: Icon(Icons.find_in_page),
label: "发现",
//backgroundColor:Colors.blue
),
BottomNavigationBarItem(
icon: Icon(Icons.flip_outlined),
label: "我的",
//backgroundColor:Colors.blue
),
],
onTap: (index){
setState(() {
print("the index is :$index");
currentIndex=index;
});
},
),
floatingActionButton: FloatingActionButton( //悬浮按钮
child: Icon(Icons.add),
onPressed:_onAddNum
),
);
}
void _onAddNum(){
}
}3.效果
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
本篇文章介绍了，Android控件之TextView的分析探究。需要的朋友参考下2013-04-04
这篇文章主要介绍了Android自定义View仿微信LetterView效果,代码简单易懂，非常不错，具有参考借鉴借鉴价值，需要的朋友可以参考下2017-03-03
android计时器,时间计算器的实现方法，需要的朋友可以参考一下2013-03-03
Choreographer的作用主要是配合Vsync，给上层App的渲染提供一个稳定的Message处理的时机，也就是Vsync到来的时候，系统通过对Vsync信号周期的调整，来控制每一帧绘制操作的时机2021-06-06
这篇文章主要介绍了Android Glide 4.0+使用详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
这篇文章主要为大家详细介绍了Flutter质感设计之持久底部面板，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-08-08
这篇文章主要为大家详细介绍了Android自定义UI手势密码简单版2016-10-10
这篇文章主要给大家介绍了关于Kotlin中Checked Exception机制的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-10-10
这篇文章主要为大家详细介绍了android使用OPENGL ES绘制圆柱体 ，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-06-06
本文详细讲解了Android显示系统SurfaceFlinger，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-12-12
最新评论