您现在的位置是：首页 > 前端 > 后端 > Flutter Flutter

flutter-16(Drawer 侧边栏、、以及侧边栏内容布局)

2020-04-30【Flutter】1515人已围观

简介## 一、Flutter Drawer 侧边栏在 `Scaffold` 组件里面传入 `drawer` 参数可以定义左侧边栏，传入 `endDrawer` 可以定义右侧边栏。侧边栏默认是隐藏的，我们可以通过手指滑动显示侧边栏，也可以通过点击按钮显示侧边栏。 ``` return Scaffold( appBar: AppBar( title: Text("Flutter App"), ), drawer: Drawer(

## 一、Flutter Drawer  侧边栏

在 `Scaffold` 组件里面传入 `drawer` 参数可以定义左侧边栏，传入 `endDrawer` 可以定义右侧边
栏。侧边栏默认是隐藏的，我们可以通过手指滑动显示侧边栏，也可以通过点击按钮显示侧边栏。

```
return Scaffold(
    appBar: AppBar(
        title: Text("Flutter App"),
    ),
    drawer: Drawer(
       child: Text('左侧边栏'),
    ),
    endDrawer: Drawer(
       child: Text('右侧侧边栏'),
    ),
);
```

## 二、Flutter DrawerHeader

**常见属性：**

属性 | 描述
---|---
decoration | 设置顶部背景颜色
child | 配置子元素
padding | 内边距
margin | 外边距

![image](http://image.apidata.vip/QQ%E6%88%AA%E5%9B%BE20200310154719.png)

```
drawer: Drawer(
  child:Column(
    children:[
      DrawerHeader(
        decoration: BoxDecoration(// 设置顶部背景颜色
          color: Colors.yellow,
          image:DecorationImage(
            image: NetworkImage("https://www.itying.com/images/flutter/2.png"),
            fit:BoxFit.cover
          )
        ), 
        child: ListView(
          children: <Widget>[Text('我是一个头部')],
          
        )
      ),
      ListTile(
        title: Text("个人中心"),
        leading: CircleAvatar(
          child: Icon(Icons.people)
        ),
      ),
      ListTile(
        title: Text("系统设置"),
        leading: CircleAvatar(
          child: Icon(Icons.settings)
        ),
      ),
    ],
  ),

),
endDrawer: Drawer(
  child:Text('右侧边栏'),
),
```

## 三、 Flutter UserAccountsDrawerHeader

属性 | 描述
---|---
decoration | 设置顶部背景颜色
accountName | 账户名称
accountEmail | 账户邮箱
currentAccountPicture | 用户头像
otherAccountsPictures | 用来设置当前账户其他账户头像
margin |

![image](http://image.apidata.vip/QQ%E6%88%AA%E5%9B%BE20200310161141.png)

```
drawer: Drawer(
  child:Column(
    children:[
      UserAccountsDrawerHeader(
        accountEmail: Text('Flutter@qq.com'), 
        accountName: Text('Flutter Dome'),
        currentAccountPicture:CircleAvatar(backgroundImage:NetworkImage("https://www.itying.com/images/flutter/3.png"),),// 头像
        decoration: BoxDecoration(
          color: Colors.green,
          image: DecorationImage(image: NetworkImage("https://www.itying.com/images/flutter/2.png"),fit:BoxFit.cover),
        ),// 背景
        otherAccountsPictures:[// 当前账户其他账户头像
          Image.network("https://www.itying.com/images/flutter/4.png"),
          Image.network("https://www.itying.com/images/flutter/5.png"),
        ],
      ),
      ListTile(
        title: Text("个人中心"),
        leading: CircleAvatar(
          child: Icon(Icons.people)
        ),
      ),
      ListTile(
        title: Text("系统设置"),
        leading: CircleAvatar(
          child: Icon(Icons.settings)
        ),
      ),
    ],
  ),
)
```

## 四、 Flutter  侧边栏路由跳转

```
onTap: (){
    Navigator.of(context).pop();// 菜单隐藏
    Navigator.pushNamed(context, '/search');// 跳转
}
```

## 五、通过事件打开侧边栏

先在 `class` 中定义

`final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();`

```
return Scaffold(
    key:_scaffoldKey,
        appBar: AppBar(
        title: Text("商品列表"),
    )
)
```

```
Expanded(
    flex: 1,
    child: InkWell(
    onTap: () {
        _scaffoldKey.currentState.openEndDrawer();
    },
    child: Text("筛选", textAlign: TextAlign.center),
    ),
)
```

关注博客，更多精彩分享，敬请期待！

Tags：

很赞哦！ (0)

上一篇：flutter-15(AppBar 自定义顶部导航按钮以及 TabBar 定义顶部 Tab 切换)

下一篇：flutter-17(按钮组件、自定义按钮组件、FloatingActionButton)