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('右侧侧边栏'), ), ); } }
最后,关注【码上加油站】微信公众号后,有疑惑有问题想加油的小伙伴可以码上加入社群,让我们一起码上加油吧!!!
posted on 2019-07-25 20:16 LoaderMan 阅读(3640) 评论(0) 编辑 收藏 举报