Tabs.dart

  1. import 'package:flutter/material.dart';
  2. import 'tabs/Home.dart';
  3. import 'tabs/Category.dart';
  4. import 'tabs/Setting.dart';
  5.  
  6. class Tabs extends StatefulWidget {
  7. final index;
  8. Tabs({Key key, this.index = }) : super(key: key);
  9. _TabsState createState() => _TabsState(this.index);
  10. }
  11.  
  12. class _TabsState extends State<Tabs> {
  13. int _currentIndex = ;
  14. _TabsState(index) {
  15. this._currentIndex = index;
  16. }
  17. List _pageList = [HomePage(), CategoryPage(), SettingPage()];
  18. @override
  19. Widget build(BuildContext context) {
  20. return Scaffold(
  21. appBar: AppBar(
  22. title: Text('Flutter Demo'),
  23. ),
  24. bottomNavigationBar: BottomNavigationBar(
  25. currentIndex: this._currentIndex,
  26. onTap: (int index) {
  27. // print(index);
  28. setState(() {
  29. this._currentIndex = index;
  30. });
  31. },
  32. iconSize: 36.0,
  33. type: BottomNavigationBarType.fixed,
  34. fixedColor: Colors.red,
  35. items: [
  36. BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('首页')),
  37. BottomNavigationBarItem(
  38. icon: Icon(Icons.category), title: Text('分类')),
  39. BottomNavigationBarItem(
  40. icon: Icon(Icons.settings), title: Text('设置')),
  41. ]),
  42. body: this._pageList[this._currentIndex],
  43. drawer: Drawer(
  44. child: Column(
  45. children: <Widget>[
  46. Row(
  47. children: <Widget>[
  48. // Expanded(
  49. // child: DrawerHeader(
  50. // child: Text('你好Flutter'),
  51. // decoration: BoxDecoration(
  52. // // color: Colors.yellow
  53. // image: DecorationImage(
  54. // image: NetworkImage('https://www.itying.com/images/flutter/2.png'),
  55. // fit:BoxFit.cover
  56. // ),
  57. // ),
  58. // )
  59. // )
  60.  
  61. Expanded(
  62. child: UserAccountsDrawerHeader(
  63. accountName: Text('老师你好'),
  64. accountEmail: Text('gztt@163.com'),
  65. currentAccountPicture: CircleAvatar(
  66. backgroundImage: NetworkImage(
  67. 'https://www.itying.com/images/flutter/3.png'),
  68. ),
  69. decoration: BoxDecoration(
  70. // color: Colors.yellow
  71. image: DecorationImage(
  72. image: NetworkImage(
  73. 'https://www.itying.com/images/flutter/2.png'),
  74. fit: BoxFit.cover),
  75. ),
  76. otherAccountsPictures: <Widget>[
  77. Image.network(
  78. 'https://www.itying.com/images/flutter/5.png'),
  79. Image.network(
  80. 'https://www.itying.com/images/flutter/4.png')
  81. ],
  82. ),
  83. )
  84. ],
  85. ),
  86. ListTile(
  87. leading: CircleAvatar(
  88. child: Icon(Icons.home),
  89. ),
  90. title: Text('我的空间')),
  91. Divider(),
  92. ListTile(
  93. leading: CircleAvatar(
  94. child: Icon(Icons.home),
  95. ),
  96. title: Text('用户中心'),
  97. onTap: () {
  98. Navigator.of(context).pop();
  99. Navigator.pushNamed(context, '/user');
  100. }
  101. ),
  102. Divider(),
  103. ListTile(
  104. leading: CircleAvatar(
  105. child: Icon(Icons.home),
  106. ),
  107. title: Text('用户中心'),
  108. )
  109. ],
  110. ),
  111. ),
  112. endDrawer: Drawer(
  113. child: Text('右侧侧边栏'),
  114. ),
  115. );
  116. }
  117. }

21Flutter Drawer侧边栏、以及侧边栏内容布局的更多相关文章

  1. HTML、CSS知识点,面试开发都会需要--No.4 内容布局

    No.4 内容布局 1.列举场景 同一行布局三个元素.三个元素等比显示,并且其他元素不会围绕这三个元素.如下要让下面的三个column等比显示在一行: 2.通过Float属性实现 (1)float:l ...

  2. 这些HTML、CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML、CSS、盒子模型、内容布局)

    这些HTML.CSS知识点,面试和平时开发都需要 No1-No4   系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) ...

  3. WPF-使用面板控制内容布局,比较Canvas,WrapPanel,StackPanel,Grid,ScrollViewer

    WPF-使用面板控制内容布局,比较Canvas,WrapPanel,StackPanel,Grid,ScrollViewer 分类: WPF2012-04-24 09:59 660人阅读 评论(0)  ...

  4. C# WPF 左侧菜单右侧内容布局效果实现

    原文:C# WPF 左侧菜单右侧内容布局效果实现 我们要做的效果是这样的,左侧是可折叠的菜单栏,右侧是内容区域,点击左侧的菜单项右侧内容区域则相应地切换. wpf实现的话,我的办法是用一个tabcon ...

  5. CSS内容布局

    网页是由不同内容块构成的:标题.段落.链接.列表.图片.视频,等等. 1.定位 定位并不适合总体布局,因为它会把元素拉出页面的正常流. 元素的初始定位方式为静态定位(static),即块级元素垂直堆叠 ...

  6. CSS进阶内容——布局技巧和细节修饰

    CSS进阶内容--布局技巧和细节修饰 我们在之前的文章中已经掌握了CSS的大部分内容,但仍有一些内容我们没有涉略,这篇文章就是为了补充前面没有涉及的内容,为我们的知识做出补充并且介绍一些布局技巧 当然 ...

  7. vue项目 菜单侧边栏随着右侧内容盒子的高度实时变化

    测试的时候发现,在选择模板.选择产品第二步第三步的时候.如果超出两行的话会盖住看不见,(因为高度所有统一都被写死了,又加了overflow~emmm~)所以要改成走马灯形式.如图: 那么问题来了,我步 ...

  8. FLEX实现两侧边栏固定中间自适应布局

    <style type="text/css"> #outer{ display: flex; width: 100%; flex-flow: row nowrap; } ...

  9. ecshop 前台个人中心修改侧边栏 和 侧边栏显示不全 或 导航现实不全

    怎么给个人中心侧边栏加项或者减项 在模板文件default/user_menu.lbi 文件里添加或者修改,一般看到页面都会知道怎么加,怎么删,这里就不啰嗦了 添加一个栏目以后,这个地址跳的页面怎么写 ...

随机推荐

  1. python 获取本机的 IP 地址,windows,linux均可

    #encoding=utf-8 #参考csdn某篇文章 import socket def get_host_ip(): """ 查询本机ip地址 :return: ip ...

  2. 利用k8s实现HPA

    如何利用kubernetes实现应用的水平扩展(HPA) 云计算具有水平弹性的特性,这个是云计算区别于传统IT技术架构的主要特性.对于Kubernetes中的POD集群来说,HPA就是实现这种水平伸缩 ...

  3. js基础知识1

    本博客转自某不知名程序员 1. JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for语句等. DOM:操作网页 ...

  4. eclipse中JDK环境的搭建

    现在就可以用记事本开发java程序了,但是eclipse是一款java开发不可缺少的IDE,并且安装简单,下面说一下步骤,首先下载eclipse, 官网下载链接:http://www.eclipse. ...

  5. 【原创】改进的大马webshell,过市面上任何防护

    因为之前使用的webshell大马很多都没用了,都被安全防护拦截了,所以通过几个大牛的指点和网上的教程整理而成自己做的增强版的webshell大马,我这个是源码,部分无加密! <?php $pa ...

  6. machine learning(12) -- classification: One-vs-all classfication

    Multiclass classification例子: 邮箱的邮件的分类: 工作邮件,私人邮件,朋友的邮件,兴趣爱好的邮件 医学诊断: 没有生病,患有流感,患有普通感冒 天气: 晴天,兩,多云等 O ...

  7. Git----查看提交日志

    Git log 只包括当前分支的commit. 截图示例: Git reflog 显示整个本地仓储的commit(所有branch,包括已撤销的commit) 截图示例: Git reflog --r ...

  8. Java:JVM的内存模型

    JVM内存模型 JVM内存模型可以分为两个部分,如下图所示,堆和方法区是所有线程共有的,而虚拟机栈,本地方法栈和程序计数器则是线程私有的.   1. 堆(Heap) 堆内存是所有线程共有的,可以分为两 ...

  9. element---------------el-menu组件_实现路由跳转及当前项的设置

    <el-menu router :default-active="$route.path" class="el-menu-vertical-demo" @ ...

  10. 学生管理系统——数据库、java基础

    1.项目分层 view层:视图层 controller层:控制层 service层:业务层 dao层:数据库访问层 domain:实体包 tools:工具类 2.jar包 3.配置文件 4.程序设计 ...