Flutter 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 |
外边距 |
Flutter UserAccountsDrawerHeader
属性 |
描述 |
decoration |
设置顶部背景颜色 |
accountName |
账户名称 |
accountEmail |
账户邮箱 |
currentAccountPicture |
用户头像 |
otherAccountsPictures |
用来设置当前账户其他账户头像 |
margin |
Flutter 侧边栏路由跳转
onTap: (){
Navigator.of(context).pop();
Navigator.pushNamed(context, '/search');
}
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;
_TabsState(index){
this._currentIndex=index;
} List _pageList=[
HomePage(),
CategoryPage(),
SettingPage(),
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Flutter App"),
),
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: UserAccountsDrawerHeader(
accountName:Text("张三"),
accountEmail: Text("8888@163.com"),
currentAccountPicture: CircleAvatar(
backgroundImage: NetworkImage("http://pic23.nipic.com/20120830/9686992_180336646144_2.jpg"),
),
decoration:BoxDecoration(
image: DecorationImage(
image: NetworkImage("http://pic31.nipic.com/20130801/11604791_100539834000_2.jpg"),
fit:BoxFit.cover,
) ),
otherAccountsPictures: <Widget>[
Image.network("http://k.zol-img.com.cn/dcbbs/22000/a21999018_01000.jpg"),
Image.network("http://pic38.nipic.com/20140211/17882171_143443301183_2.jpg"),
],
)
)
],
),
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("设置中心"),
),
Divider(),
],
), ),
endDrawer: Drawer(
child: Text('右侧侧边栏'),
),
);
}
}
Flutter Drawer 侧边栏、以及侧边栏内 容布局的更多相关文章
- Drawer 侧边栏、以及侧边栏内 容布局
一.Flutter Drawer 侧边栏 在 Scaffold 组件里面传入 drawer 参数可以定义左侧边栏,传入 endDrawer 可以定义右侧边栏.侧边栏默认是隐藏的,我们可以通过手指滑动显 ...
- Flutter——Drawer、DrawerHeader、UserAccountsDrawerHeader组件(侧边栏组件)
在 Scaffold 组件里面传入 drawer 参数可以定义左侧边栏,传入 endDrawer 可以定义右侧边栏.侧边栏默认是隐藏的,我们可以通过手指滑动显示侧边栏,也可以通过点击按钮显示侧边栏. ...
- Revit API创建一个拷贝房间内对象布局命令
本课程演示创建一个拷贝房间内对象布局命令,完整演示步骤和代码.这个命令把选中房间内的对象复制到其它选中的一个或多个房间中,而且保持与源房间一致的相对位置.通过本讲座使听众知道创建一个二次开发程序很简单 ...
- ecshop 前台个人中心修改侧边栏 和 侧边栏显示不全 或 导航现实不全
怎么给个人中心侧边栏加项或者减项 在模板文件default/user_menu.lbi 文件里添加或者修改,一般看到页面都会知道怎么加,怎么删,这里就不啰嗦了 添加一个栏目以后,这个地址跳的页面怎么写 ...
- Flutter -------- Drawer侧滑
侧滑菜单在安卓App里面非常常见 抽屉通常与Scaffold.drawer属性一起使用.抽屉的子项通常是ListView,其第一个子项是DrawerHeader ,它显示有关当前用户的状态信息.其余的 ...
- flutter drawer 自定义图标 icon 手动打开drawer
方法1:GlobalKey import "package:flutter/material.dart"; class Test extends StatefulWidget { ...
- Bootstrap内栅格布局,表格,按钮,图片的个人总结
栅格布局: container,固定宽度的容器. container-fluid,百分百宽度的容器. 使用行(row)在水平方向上创建一组列(colmun). 每一行中最多能够包含12列,超出的列则另 ...
- Flutter利用GridView实现网格的商品布局
GridView.count 生成的是静态网格 效果: 代码: import 'package:flutter/material.dart'; void main() { runApp(MyApp() ...
- 37 Flutter仿京东商城项目 结算页面布局
加群452892873 下载对应34课文件,运行方法,建好项目,直接替换lib目录 CheckOut.dart import 'package:flutter/material.dart'; impo ...
随机推荐
- homebrew一直处于updating状态
vim ~/.bash_profile 增加一行 export HOMEBREW_NO_AUTO_UPDATE=true 之后再source一下
- 利用Python openpyxl操作Excel
from IPython.core.interactiveshell import InteractiveShell InteractiveShell.ast_node_interactivity = ...
- Windows连接Linux服务器远程开发解决方案
解决方案 vscode+Linux服务器 解决连接问题 vscode商店下载remote-ssh工具,然后进行配置. 这个网上依旧有很多详细的教程了,这里就不过多赘述. 配置免密登录 这一部分是我要重 ...
- AI文本审核垃圾内容
今天无意获得一个AI的文本审核的API,基于深度学习及大规模样本训练的人工智能文本审核技术,一站式准确 检测识别文本中夹杂的色情.推广.辱骂.违禁违法等垃圾内容,净化 网络环境,为您的应用提供更可靠 ...
- test20190829 神大校赛模拟
100+100+0=200,聪明搬题人题面又出锅了. 最短路径(path) 给定有向图,包含 n 个节点和 m 条有向边. 一条A 到 B 的路径是最短路径当且仅当不存在另一条从A 到 B 的路径比它 ...
- PHP——最新号码归属地数据库
前言 最近在忙的一个项目,为了数据安全,不能够使用任何第三方的接口~ 号码库 | https://github.com/wangyang0210/Phone-Number-Range 代码 其实就是一 ...
- Django自定义filter
- 通过类型断言获取error类型,获得更详细的信息
package main import ( "fmt" "os" ) func main() { f, err := os.Open("/test.t ...
- python字符串、字符串处理函数及字符串相关操作
python字符串.字符串处理函数及字符串相关操作 字符串介绍 python字符串表示 Python除处理数字外还可以处理字符串,字符串用单撇号或双撇号包裹: >>> 'spam e ...
- MySQL 优化之EXPLAIN详解(执行计划)
学习MySQL时我们都知道索引对于一个SQL的优化很重要,而EXPLAIN关键字在分析是否正确以及高效的增加了索引时起到关键性的作用. 这篇文章显示了如何调用“EXPLAIN”来获取关于查询执行计划的 ...