21Flutter Drawer侧边栏、以及侧边栏内容布局
Tabs.dart
- 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 = }) : 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 Demo'),
- ),
- bottomNavigationBar: BottomNavigationBar(
- currentIndex: this._currentIndex,
- onTap: (int index) {
- // print(index);
- setState(() {
- this._currentIndex = index;
- });
- },
- iconSize: 36.0,
- type: BottomNavigationBarType.fixed,
- fixedColor: Colors.red,
- items: [
- BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('首页')),
- BottomNavigationBarItem(
- icon: Icon(Icons.category), title: Text('分类')),
- BottomNavigationBarItem(
- icon: Icon(Icons.settings), title: Text('设置')),
- ]),
- body: this._pageList[this._currentIndex],
- drawer: Drawer(
- child: Column(
- children: <Widget>[
- Row(
- children: <Widget>[
- // Expanded(
- // child: DrawerHeader(
- // child: Text('你好Flutter'),
- // decoration: BoxDecoration(
- // // color: Colors.yellow
- // image: DecorationImage(
- // image: NetworkImage('https://www.itying.com/images/flutter/2.png'),
- // fit:BoxFit.cover
- // ),
- // ),
- // )
- // )
- Expanded(
- child: UserAccountsDrawerHeader(
- accountName: Text('老师你好'),
- accountEmail: Text('gztt@163.com'),
- currentAccountPicture: CircleAvatar(
- backgroundImage: NetworkImage(
- 'https://www.itying.com/images/flutter/3.png'),
- ),
- decoration: BoxDecoration(
- // color: Colors.yellow
- image: DecorationImage(
- image: NetworkImage(
- 'https://www.itying.com/images/flutter/2.png'),
- fit: BoxFit.cover),
- ),
- otherAccountsPictures: <Widget>[
- Image.network(
- 'https://www.itying.com/images/flutter/5.png'),
- Image.network(
- 'https://www.itying.com/images/flutter/4.png')
- ],
- ),
- )
- ],
- ),
- ListTile(
- leading: CircleAvatar(
- child: Icon(Icons.home),
- ),
- title: Text('我的空间')),
- Divider(),
- ListTile(
- leading: CircleAvatar(
- child: Icon(Icons.home),
- ),
- title: Text('用户中心'),
- onTap: () {
- Navigator.of(context).pop();
- Navigator.pushNamed(context, '/user');
- }
- ),
- Divider(),
- ListTile(
- leading: CircleAvatar(
- child: Icon(Icons.home),
- ),
- title: Text('用户中心'),
- )
- ],
- ),
- ),
- endDrawer: Drawer(
- child: Text('右侧侧边栏'),
- ),
- );
- }
- }
21Flutter Drawer侧边栏、以及侧边栏内容布局的更多相关文章
- HTML、CSS知识点,面试开发都会需要--No.4 内容布局
No.4 内容布局 1.列举场景 同一行布局三个元素.三个元素等比显示,并且其他元素不会围绕这三个元素.如下要让下面的三个column等比显示在一行: 2.通过Float属性实现 (1)float:l ...
- 这些HTML、CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML、CSS、盒子模型、内容布局)
这些HTML.CSS知识点,面试和平时开发都需要 No1-No4 系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) ...
- WPF-使用面板控制内容布局,比较Canvas,WrapPanel,StackPanel,Grid,ScrollViewer
WPF-使用面板控制内容布局,比较Canvas,WrapPanel,StackPanel,Grid,ScrollViewer 分类: WPF2012-04-24 09:59 660人阅读 评论(0) ...
- C# WPF 左侧菜单右侧内容布局效果实现
原文:C# WPF 左侧菜单右侧内容布局效果实现 我们要做的效果是这样的,左侧是可折叠的菜单栏,右侧是内容区域,点击左侧的菜单项右侧内容区域则相应地切换. wpf实现的话,我的办法是用一个tabcon ...
- CSS内容布局
网页是由不同内容块构成的:标题.段落.链接.列表.图片.视频,等等. 1.定位 定位并不适合总体布局,因为它会把元素拉出页面的正常流. 元素的初始定位方式为静态定位(static),即块级元素垂直堆叠 ...
- CSS进阶内容——布局技巧和细节修饰
CSS进阶内容--布局技巧和细节修饰 我们在之前的文章中已经掌握了CSS的大部分内容,但仍有一些内容我们没有涉略,这篇文章就是为了补充前面没有涉及的内容,为我们的知识做出补充并且介绍一些布局技巧 当然 ...
- vue项目 菜单侧边栏随着右侧内容盒子的高度实时变化
测试的时候发现,在选择模板.选择产品第二步第三步的时候.如果超出两行的话会盖住看不见,(因为高度所有统一都被写死了,又加了overflow~emmm~)所以要改成走马灯形式.如图: 那么问题来了,我步 ...
- FLEX实现两侧边栏固定中间自适应布局
<style type="text/css"> #outer{ display: flex; width: 100%; flex-flow: row nowrap; } ...
- ecshop 前台个人中心修改侧边栏 和 侧边栏显示不全 或 导航现实不全
怎么给个人中心侧边栏加项或者减项 在模板文件default/user_menu.lbi 文件里添加或者修改,一般看到页面都会知道怎么加,怎么删,这里就不啰嗦了 添加一个栏目以后,这个地址跳的页面怎么写 ...
随机推荐
- python 获取本机的 IP 地址,windows,linux均可
#encoding=utf-8 #参考csdn某篇文章 import socket def get_host_ip(): """ 查询本机ip地址 :return: ip ...
- 利用k8s实现HPA
如何利用kubernetes实现应用的水平扩展(HPA) 云计算具有水平弹性的特性,这个是云计算区别于传统IT技术架构的主要特性.对于Kubernetes中的POD集群来说,HPA就是实现这种水平伸缩 ...
- js基础知识1
本博客转自某不知名程序员 1. JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for语句等. DOM:操作网页 ...
- eclipse中JDK环境的搭建
现在就可以用记事本开发java程序了,但是eclipse是一款java开发不可缺少的IDE,并且安装简单,下面说一下步骤,首先下载eclipse, 官网下载链接:http://www.eclipse. ...
- 【原创】改进的大马webshell,过市面上任何防护
因为之前使用的webshell大马很多都没用了,都被安全防护拦截了,所以通过几个大牛的指点和网上的教程整理而成自己做的增强版的webshell大马,我这个是源码,部分无加密! <?php $pa ...
- machine learning(12) -- classification: One-vs-all classfication
Multiclass classification例子: 邮箱的邮件的分类: 工作邮件,私人邮件,朋友的邮件,兴趣爱好的邮件 医学诊断: 没有生病,患有流感,患有普通感冒 天气: 晴天,兩,多云等 O ...
- Git----查看提交日志
Git log 只包括当前分支的commit. 截图示例: Git reflog 显示整个本地仓储的commit(所有branch,包括已撤销的commit) 截图示例: Git reflog --r ...
- Java:JVM的内存模型
JVM内存模型 JVM内存模型可以分为两个部分,如下图所示,堆和方法区是所有线程共有的,而虚拟机栈,本地方法栈和程序计数器则是线程私有的. 1. 堆(Heap) 堆内存是所有线程共有的,可以分为两 ...
- element---------------el-menu组件_实现路由跳转及当前项的设置
<el-menu router :default-active="$route.path" class="el-menu-vertical-demo" @ ...
- 学生管理系统——数据库、java基础
1.项目分层 view层:视图层 controller层:控制层 service层:业务层 dao层:数据库访问层 domain:实体包 tools:工具类 2.jar包 3.配置文件 4.程序设计 ...