1、在Scaffold组件中与body同级
定义右侧侧边栏将drawer换成endDrawer
drawer:Drawer(
child: Column( 侧边栏内容
children: <Widget>[
(1)定义头部内容方式一
Row(children: <Widget>[ 定义头部内容,因为头部组件会因为子组件的宽度设置,所以使用Row+Expanded让水平方向宽度铺满
Expanded(
child: DrawerHeader(
decoration: BoxDecoration() 头部盒子样式
child: , 头部内容组件
padding: ,
margin: ,
),
)
]),
(2)定义头部内容方式二:
Row(children: <Widget>[
Expanded(
child:UserAccountsDrawerHeader(
accountName: 用户名
accountEmail:, 用户邮箱,默认出现在用户名的下面
currentAccountPicture: , 用户头像,默认在左边最上面
otherAccountsPictures: <Widget>[], 用户头像右侧内容色湖之
decoration: BoxDecoration(), 头部区域样式
))
]),
头部组件外其他内容组件...
]
)
)
分割线组件
默认为灰色的一条铺满宽度的线
Divder();
参数:
height,
thickness,
indent,
endIndent,
color,
代码示例:
import 'package:flutter/material.dart';
import '../main.dart';
class Me2 extends StatefulWidget {
String title='me';
@override
_Home2State createState() => _Home2State();
}
class _Home2State extends State<Me2> with SingleTickerProviderStateMixin {
//定义tab控制器
TabController _tabController;
@override
void dispose() { //生命周期函数,组件销毁时触发
// TODO: implement dispose
super.dispose();
}
//生命周期函数,加载就会触发
@override
void initState() {
// TODO: implement initState
super.initState();
_tabController=new TabController(length: 2, vsync: this);
_tabController.addListener((){
print(_tabController.index);
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true, //标题栏文字居中
title: Text('me-son'),
),
body: Home(),
drawer: Drawer( //左侧侧边栏
child:Column(children: <Widget>[
Row(children: <Widget>[
Expanded(
child:UserAccountsDrawerHeader(
accountName:Text('jeff'),
accountEmail: Text("123@qq.com"),
currentAccountPicture: CircleAvatar(backgroundImage: NetworkImage("https://i0.hdslb.com/bfs/face/3d3d06b227c22e0e68895c83516861cee3bba5ed.jpg@52w_52h.jpg"),),
otherAccountsPictures: <Widget>[
Text('aa'),
Text('bb')
],
decoration: BoxDecoration(
color:Colors.red
),
) ,)
],),
ListTile(
title: Text('哈哈'),
leading: CircleAvatar(
child: Icon(Icons.home),
),
),
Divider(), //默认为灰色的一条分隔线
ListTile(
title: Text('哈哈'),
leading: CircleAvatar(
child: Icon(Icons.home),
),
),
],),
),
endDrawer: Drawer( //右侧侧边栏
child: Column(
children: <Widget>[
Row(children: <Widget>[
Expanded(
child: DrawerHeader( //设置侧边栏顶部内容,默认为child组件的宽度,可以使用Row加Expanded组件铺满宽度
decoration: BoxDecoration(
image: DecorationImage( //设置背景图
image: NetworkImage('https://i0.hdslb.com/bfs/face/eca871e8c868ff04a4b9282c5747a4afb3d3b76c.jpg@52w_52h.jpg'),
fit: BoxFit.cover
)
),
child:Text('侧边栏') ,
// padding: ,
// margin: ,
),
)
]),
ListTile(
title: Text('哈哈'),
leading: CircleAvatar(
child: Icon(Icons.home),
),
),
Divider(), //默认为灰色的一条分隔线
ListTile(
title: Text('哈哈'),
leading: CircleAvatar(
child: Icon(Icons.home),
),
),
],
)
),
);
}
}
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
child: Column(
children: <Widget>[
Text('me-sonnnnn'),
RaisedButton(
color: Theme.of(context).accentColor,
child: Text('回到根'),
onPressed: (){
Navigator.of(context).pushAndRemoveUntil( new MaterialPageRoute(builder: (context) => new Tabs(index: 2)),
(route) => route == null );
},
),
],
)
);
}
}
/*
单独的页面没有主题样式,需要通过Scaffold自行设置
*/