Flutter学习笔记（18）--Drawer抽屉组件

如需转载，请注明出处：flutter学习笔记（18）--drawer抽屉组件

drawer（抽屉组件）可以实现类似抽屉拉出和推入的效果，可以从侧边栏拉出导航面板。通常drawer是和listview组件组合使用的。

drawer组件属性及说明

属性名	类型	默认值	说明
child	widget		drawer的child可以放置任意可显示的对象
elevation	double	16	墨纸设计中组件的z坐标顺序

 

 

 

 

 

 

 

drawer组件可以添加头部效果，用drawerheader和useraccountsdrawerheader这两个组件可以实现。

drawerheader：展示基本信息

useraccountsdraweheader：展示用户头像、用户名、email等信息

 

drawerheader组件属性及描述

属性名	类型	说明
decoration	decoration	header区域的decoration，通常用来设置背景颜色或者背景图片
curve	curve	如果decoration发生了变化，则会使用curve设置的变化曲线和duration设置的动画时间来做一个切换动画
child	widget	header里面所显示的内容控件
padding	edgeinsetsgeometry	header里面内容控件的padding指。如果child为null的话，则这个值无效
margin	edgeinsetsgeometry	header四周的间隙

 

 

 

 

 

 

 

 

 

useraccountsdrawerheader组件属性及说明

属性名	类型	说明
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();
                        }
                    );
                  }
              ),