Flutter中抽屉组件Drawer使用详解
本文实例为大家分享了Flutter中抽屉组件Drawer实现代码,供大家参考,具体内容如下
1、概述
Scalfold 是 Flutter MaterialApp 常用的布局 Widget,接受一个 drawer属性,支持配置 Drawer,可以实现从侧边栏拉出导航面板,好处是把一些功能菜单折叠起来,通常Drawer是和Listview组件或者 Column组合使用进行纵向布局。Listview组件是竖排排列的,上下可滑动。
【Flutter中抽屉组件Drawer使用详解】【注意】如果没有设置 AppBar 的 leading 属性,则当使用 Drawer 的时候会自动显示一个 IconButton 来告诉用户有侧边栏(在 Android 上通常是显示为三个横的图标)。
2、Drawer组件常见属性
child:Widget类型,可以放置任意可显示对象
elevation:double类型,组件的Z坐标的顺序
import 'package:demo_app/pages/drawer/drawer.dart'; import 'package:flutter/material.dart'; class Home extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(), body: Container(), drawer: DrawLayout()); }}
import 'package:flutter/material.dart'; class DrawLayout extends StatelessWidget {@overrideWidget build(BuildContext context) {return Drawer(child: Text('drawer')); }}
3、Drawer可以添加头部效果
- DrawerHeader:展示头部基本信息
- UserAccountsDrawerHeader:展示用户头像、用户名、email等信息
- child:Widget类型,Header里面所显示的内容控件
- padding、margin
- decoration:Decoration类型,header区域的decoration,通常用来设置背景颜色或者背景图片。
import 'package:flutter/material.dart'; class DrawLayout extends StatelessWidget {@overrideWidget build(BuildContext context) {return Drawer(child: ListView(padding: EdgeInsets.all(0.0),children:[DrawerHeader(child: Center(child: Text('drawer')),decoration: BoxDecoration(color: Colors.blue),)])); }}
文章图片
5、UserAccountsDrawerHeader常用属性
- currentAccountPicture:Widget类型,用来设置当前用户的头像
- accountName:Widget类型,当前用户的名字
- accountEmail:Widget类型,当前用户的 Email
- onDetailsPressed: VoidCallback类型,当 accountName 或者 accountEmail 被点击的时候所触发的回调函数,可以用来显示其他额外的信息
- otherAccountsPictures:List类型,用来设置当前用户的其他账号的头像
- decoration:Decoration类型,header区域的decoration,通常用来设置背景颜色或者背景图片。
- margin
import 'package:flutter/material.dart'; class DrawLayout extends StatelessWidget {@overrideWidget build(BuildContext context) {return Drawer(child: ListView(padding: EdgeInsets.all(0.0),children:[UserAccountsDrawerHeader(accountName: Text('username'),accountEmail: Text('username@163.com'),currentAccountPicture: CircleAvatar(child: Icon(Icons.home),),onDetailsPressed: (){},otherAccountsPictures: [CircleAvatar(child: Icon(Icons.settings)),],decoration: BoxDecoration(color: Colors.green),),ListTile(title: Text('设置'),leading: Icon(Icons.settings),trailing: Icon(Icons.arrow_forward_ios))])); }}
文章图片
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
推荐阅读
- javascript|javascript 实现富文本框选中对齐
- flutter实现底部导航栏
- JDK1.8中ArrayList是如何扩容的
- CMake编译中的库文件和头文件链接你了解吗
- 实时增量学习在云音乐直播推荐系统中的工程实践
- 『现学现忘』Docker基础|『现学现忘』Docker基础 — 30、Docker中数据卷相关命令
- 深度学习|深度学习中的激活函数
- 机器学习基础|深度学习中的激活函数(一)
- Java学习心得(更新中)
- vue2.x版本中computed和watch的使用入门详解-computed篇