Drawer实现侧边栏布局
2024-10-20 03:38:15
在 Scaffold 组件里面传入 drawer 参数可以定义左侧边栏,传入 endDrawer 可以定义右侧边栏。侧边栏默认是隐藏的,我们可以通过手指滑动显示侧边栏,也可以通过点击按钮显示侧边栏。
我们还是在前面TabBar项目的基础上实现侧边栏。
为了能在底部TabBar的三个页面都实现侧边栏效果,这里将侧边栏加在Tabs.dart页面中。
只需要在
BottomNavigationBar下面继续添加drawer属性就可以了。
import 'package:flutter/material.dart';
import 'tabs/Home.dart';
import 'tabs/Category.dart';
import 'tabs/Setting.dart'; class Tabs extends StatefulWidget {
final index;
Tabs({Key key,this.index=0}) : super(key: key); _TabsState createState() => _TabsState(this.index);
} class _TabsState extends State<Tabs> { // int _currentIndex=0;
int _currentIndex;
_TabsState(index){
this._currentIndex=index;
}
List _pageList=[
HomePage(),
CategoryPage(),
SettingPage(),
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Flutter Demo"),
),
body: this._pageList[this._currentIndex],
bottomNavigationBar: BottomNavigationBar(
currentIndex: this._currentIndex,
onTap: (int index){
setState(() {
this._currentIndex=index;
});
},
iconSize:36.0, //icon的大小
fixedColor:Colors.red, //选中的颜色
type:BottomNavigationBarType.fixed, //配置底部tabs可以有多个按钮
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text("首页")
),
BottomNavigationBarItem(
icon: Icon(Icons.category),
title: Text("分类")
), BottomNavigationBarItem(
icon: Icon(Icons.settings),
title: Text("设置")
)
],
),
drawer: Drawer(
child:Text('这里是测边栏')
),
);
}
}
此时在顶部会出现一个可点击的图标按钮,不管是点击这个按钮还是滑动屏幕,都会出现侧边栏:
如果要实现右边的侧边栏,只需要使用endDrawer就可以了:
上面的样式太丑了,所以,可以稍微调整一下了:
现在,虽然侧边栏里面多了一下内容,但是顶部还是出现了遮盖的现象,因此,可以借助DrawerHeader 组件来设置一下侧边栏顶部的样式。
DrawerHeader
在flutter中,DrawerHeader 有以下一些常用的属性:
- decoration :设置顶部背景颜色
- child :配置子元素
- padding :内边距
- margin :外边距
现在,借助了DrawerHeader实现了侧边栏的头部样式,除此之外,还可以借助UserAccountsDrawerHeader实现侧边栏头部的布局。
UserAccountsDrawerHeader
在flutter中,UserAccountsDrawerHeader有以下一些常用的属性:
- decoration :设置顶部背景颜色
- accountName:账户名称
- accountEmail :账户邮箱
- currentAccountPicture :用户头像
- otherAccountsPictures :用来设置当前账户其他账户头像
- margin :
侧边栏中的路由跳转
要实现路由跳转,首先需要有供跳转的页面:
User.dart
import 'package:flutter/material.dart'; class UserPage extends StatelessWidget {
const UserPage({Key key}) : super(key: key); @override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("用户中心"),
),
);
}
}
然后配置路由:
最后,在用户中心处添加路由跳转按钮就可以了。但是有一个问题:在侧边栏进行路由跳转,那么侧边栏是开启的,这样,页面跳转后再返回,侧边栏还是存在的,并且动画上面还会出现不流畅性,因此,在路由跳转前,需要先隐藏侧边栏:
Tabs.dart
import 'package:flutter/material.dart';
import 'tabs/Home.dart';
import 'tabs/Category.dart';
import 'tabs/Setting.dart'; class Tabs extends StatefulWidget {
// Tabs({Key key}) : super(key: key);
// _TabsState createState() => _TabsState();
final index;
Tabs({Key key,this.index=0}) : super(key: key); _TabsState createState() => _TabsState(this.index);
} class _TabsState extends State<Tabs> { // int _currentIndex=0;
int _currentIndex;
_TabsState(index){
this._currentIndex=index;
}
List _pageList=[
HomePage(),
CategoryPage(),
SettingPage(),
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Flutter Demo"),
),
body: this._pageList[this._currentIndex],
bottomNavigationBar: BottomNavigationBar(
currentIndex: this._currentIndex, //配置对应的索引值选中
onTap: (int index){
setState(() { //改变状态
this._currentIndex=index;
});
},
iconSize:36.0, //icon的大小
fixedColor:Colors.red, //选中的颜色
type:BottomNavigationBarType.fixed, //配置底部tabs可以有多个按钮
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text("首页")
),
BottomNavigationBarItem(
icon: Icon(Icons.category),
title: Text("分类")
), BottomNavigationBarItem(
icon: Icon(Icons.settings),
title: Text("设置")
)
],
),
drawer: Drawer(
child:Column(
children: <Widget>[
Row(
children: <Widget>[
Expanded(
// child: DrawerHeader(
// child: Text('你好'),
// decoration: BoxDecoration(
// color:Colors.yellow,
// image: DecorationImage(
// image: NetworkImage("https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3230740943,2194698121&fm=27&gp=0.jpg"),
// fit:BoxFit.cover,
// ),
// ),
// ),
child:UserAccountsDrawerHeader(
currentAccountPicture: CircleAvatar(
backgroundImage: NetworkImage("https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1547205045,3791549413&fm=27&gp=0.jpg"),
),
accountName: Text('侧边栏'),
accountEmail: Text('12345678@qq.com'),
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage("https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3230740943,2194698121&fm=27&gp=0.jpg"),
fit:BoxFit.cover,
)
),
),
),
],
),
ListTile(
leading: CircleAvatar(child: Icon(Icons.home)),
title:Text('我的主页')
),
Divider(), //一根线的效果
ListTile(
leading: CircleAvatar(child: Icon(Icons.people)),
title:Text('用户中心'),
onTap: (){
Navigator.of(context).pop(); //隐藏侧边栏
Navigator.pushNamed(context, '/user');//路由跳转
},
),
Divider(),
ListTile(
leading: CircleAvatar(child: Icon(Icons.settings)),
title:Text('设置中心')
),
],
)
),
);
}
}
代码下载:点这里(提取码:ukur)
最新文章
- devenv命令详解
- Linux TTY框架【转】
- SpringMVC + Spring + MyBatis 学习笔记:为MyBatis增加打印SQL功能 (最简化配置)
- XML操作之Linq to Xml
- PHP开发中常见的安全问题详解和解决方法(如Sql注入、CSRF、Xss、CC等
- PYTHON学习第二天[脑图][2]
- Java的URL来下载网页源码
- 《学习的艺术》 (The Art of Learning)——划小圈 (Making Smaller Circles)
- Android JNI的使用浅析
- 71、django之Ajax续
- 实际项目开发需要注意的tips
- PHP Excel使用方法
- python入门day01
- Python实现将爱词霸每日一句定时推送至微信
- Linux 文件系统概览
- Ubuntu 下更简单的防火墙 Uncomplicated Firewall
- java 安装环境
- 使用json-org包实现POJO和json的转换
- U盘安装win10
- POJ-1644 To Bet or Not To Bet(概率DP)
热门文章
- KETTLE——初见KETTLE
- 浅谈vue$router 和 $route的区别
- Node.js实战7:你了解buffer吗?
- linux自动化运维工具Ansible saltstack Puppet、Chef、Fabric之间的对比
- 自己挖的坑自己填--docker创建实例出现Waiting for SSH to be available…
- 以区间DP为前提的【洛谷p1063】能量项链
- python学习笔记(9):容器
- jquery点击按钮弹出图片
- Oracle 11g+Windows10 x64安装、配置过程记录
- Unity 官网无法访问|国外网站访问过慢|国外网站访问加速器