典礼皮,enet学院,三亚市政府采购网
drawer(抽屉组件)可以实现类似抽屉拉出和推入的效果,可以从侧边栏拉出导航面板。通常drawer是和listview组件组合使用的。
属性名 | 类型 | 默认值 | 说明 |
child | widget | drawer的child可以放置任意可显示的对象 | |
elevation | double | 16 | 墨纸设计中组件的z坐标顺序 |
drawer组件可以添加头部效果,用drawerheader和useraccountsdrawerheader这两个组件可以实现。
drawerheader:展示基本信息
useraccountsdraweheader:展示用户头像、用户名、email等信息
属性名 | 类型 | 说明 |
decoration | decoration | header区域的decoration,通常用来设置背景颜色或者背景图片 |
curve | curve | 如果decoration发生了变化,则会使用curve设置的变化曲线和duration设置的动画时间来做一个切换动画 |
child | widget | header里面所显示的内容控件 |
padding | edgeinsetsgeometry | header里面内容控件的padding指。如果child为null的话,则这个值无效 |
margin | edgeinsetsgeometry | header四周的间隙 |
属性名 | 类型 | 说明 |
margin | edgeinsetsgeometry | header四周的间隙 |
decoration | decoration | header区域的decoration,通常用来设置背景颜色或者背景图片 |
currentaccountpicture | widget | 用来设置当前用户的头像 |
otheraccountspictures | list<widget> | 用来设置当前用户其他账号的头像 |
accountname | widget | 当前用户名 |
accountemail | widget | 当前用户email |
ondetailspressed | voidcallback | 当accountname或accountemail被点击的时候所触发的回调函数,可以用来显示其他额外的信息 |
demo示例:
import 'package:flutter/material.dart'; void main() => runapp(myapp()); class myapp extends statelesswidget{ final list<tab> _mtabs = <tab>[ tab(text: 'tab1',icon: icon(icons.airline_seat_flat_angled),), tab(text: 'tab2',icon: icon(icons.airline_seat_flat_angled),), tab(text: 'tab3',icon: icon(icons.airline_seat_flat_angled),), ]; @override widget build(buildcontext context) { return new materialapp( title: 'drawer demo', home: defaulttabcontroller( length: _mtabs.length, child: new scaffold( appbar: new appbar( //自定义drawer的按钮 leading: builder( builder: (buildcontext context){ return iconbutton( icon: icon(icons.wifi_tethering), onpressed: (){ scaffold.of(context).opendrawer(); } ); } ), title: new text('drawer demo'), backgroundcolor: colors.cyan, bottom: new tabbar( tabs: _mtabs ), ), body: new tabbarview( children: _mtabs.map((tab tab){ return new center( child: new text(tab.text), ); }).tolist() ), drawer: drawer( child: listview( children: <widget>[ container( height: 150, child: useraccountsdrawerheader( //设置用户名 accountname: new text('drawer demo 抽屉组件'), //设置用户邮箱 accountemail: new text('www.baidu.com'), //设置当前用户的头像 currentaccountpicture: new circleavatar( backgroundimage: new assetimage('images/timg.jpg'), ), //回调事件 ondetailspressed: (){ }, ), ), listtile( leading: icon(icons.wifi), title: new text('无线网络1'), subtitle: new text('我是副标题'), ), listtile( leading: icon(icons.wifi), title: new text('无线网络2'), subtitle: new text('我是副标题'), ), listtile( leading: icon(icons.wifi), title: new text('无线网络3'), subtitle: new text('我是副标题'), ontap: (){ print('ssss'); }, ), listtile( leading: icon(icons.wifi), title: new text('无线网络4'), subtitle: new text('我是副标题'), ), ], ), ), ) ), ); } }
效果截图:
demo感觉没什么好解释的,就是一般的简单用法,特别说一下,添加drawer组件,scaffold会自动给我们生成一个drawer的按钮,如果我们在appbar中手动设置leading,确实是会更改这个按钮的图标,但是点击这个图标就不会弹出drawer了,所以如果我们有需要自定义drawer的图标的话,需要如下处理:
leading: builder( builder: (buildcontext context){ return iconbutton( icon: icon(icons.wifi_tethering), onpressed: (){ scaffold.of(context).opendrawer(); } ); } ),
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
Android apk 项目一键打包并上传到蒲公英的实现方法
Android 自定义LineLayout实现满屏任意拖动功能的示例代码
android 限制某个操作每天只能操作指定的次数(示例代码详解)
Android 集成 google 登录并获取性别等隐私信息的实现代码
网友评论