一、Flutter Drawer 侧边栏
在 Scaffold 组件里面传入 drawer 参数可以定义左侧边栏,传入 endDrawer 可以定义右侧边栏。侧边栏默认是隐藏的,我们可以通过手指滑动显示侧边栏,也可以通过点击按钮显示侧边栏。
return Scaffold(
  appBar: AppBar(
    title: Text("Flutter App"),
  ),
  drawer: Drawer(
    child: Text('左侧边栏'),
  ),
  endDrawer: Drawer(
    child: Text('右侧侧边栏'),
  ),
);
 
二、DrawerHeader
常见属性:
decoration  设置顶部背景颜色
child  配置子元素
padding  内边距
margin  外边距 
 
三、Flutter UserAccountsDrawerHeader
decoration  设置顶部背景颜色
accountName  账户名称
accountEmail  账户邮箱
currentAccountPicture  用户头像
otherAccountsPictures  用来设置当前账户其他账户头像
margin 
 
四、Flutter 侧边栏路由跳转
onTap: (){
   Navigator.of(context).pop();
   Navigator.pushNamed(context, '/search');
}
 
案例代码
import 'package:flutter/material.dart';
import '../home.dart'; class My extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
drawer: Drawer(
child: Column(
children: <Widget>[
UserAccountsDrawerHeader(
decoration: BoxDecoration(
image:DecorationImage( image: NetworkImage("https://www.itying.com/images/flutter/2.png"), fit:BoxFit.cover )
),
),
ListTile(title: Text('123'),leading: Icon(Icons.home), onTap: () {
// Navigator.of(context).pop();
// Navigator.pushNamed(context, '/search');
Navigator.of(context).pushAndRemoveUntil(MaterialPageRoute(builder: (context) => Home(index: 1)), (route) => route == null);
},),
ListTile(title: Text('123'),leading: Icon(Icons.home), onTap: () {
// Navigator.of(context).pop();
// Navigator.pushNamed(context, '/search');
Navigator.of(context).pushAndRemoveUntil(MaterialPageRoute(builder: (context) => Home(index: 2)), (route) => route == null);
}), ],
),
),
endDrawer: Drawer(
child: Text('右侧'),
),
);
}
}

最新文章

  1. 一个简单的后台与数据库交互的登录与注册[sql注入处理,以及MD5加密]
  2. Socket编程 -- 全双工通信
  3. javascript_basic_02之数据类型、分支结构
  4. 3ds max 分离对象
  5. HDU 2609 最小表示法
  6. mongodb学习02基础知识
  7. Hyper-V和Virtual PC的不同
  8. c# 调用 ShellExecute
  9. JS常用小技巧
  10. 用defy来潜水最终还是挂了........
  11. 如何在Azure上创建和部署云服务
  12. CentOS7安装Python3.5
  13. Zookeeper学习记录(一):设计与实现
  14. poj1966Cable TV Network(无向图最小点割集 ISAP+邻接矩阵)
  15. RTF 格式 说明
  16. thinkphp 删除该表的最后一行
  17. JavaWeb之HTTP协议
  18. 从源码看JDK提供的线程池(ThreadPoolExecutor)
  19. [Spring MVC] 取控制器返回的ModelAndView/Map/Model/Request的对象
  20. CentOS virt-manager 安装Win2008r2的一种GUI方法

热门文章

  1. 机器学习作业(六)支持向量机——Matlab实现
  2. 机器学习作业(五)机器学习算法的选择与优化——Matlab实现
  3. while与do while
  4. 0120 springboot集成Mybatis和代码生成器
  5. 关于setTimeout的妙用
  6. Pycharm操作数据库
  7. 使用TensorFlow训练模型的基本流程
  8. Atom 基础使用
  9. hadoop搭建HA集群之后不能自动切换namenode
  10. Django_发邮件