Flutter中的抽屉组件Drawer
Flutter中的抽屉组件Drawer
越陌度阡
发布于 2020-12-29 11:17:41
发布于 2020-12-29 11:17:41
1. 配置抽屉组件
1. drawer 左侧抽屉。值的类型为Widget；
2. endDrawer 右侧抽屉。值的类型为Widget；
代码示例：
import "package:flutter/material.dart";
class CategoryPage extends StatefulWidget {
CategoryPage({Key key}) : super(key: key);
_CategoryPageState createState() => _CategoryPageState();
}
class _CategoryPageState extends State<CategoryPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Flutter App"),
),
// 左侧抽屉
drawer: Drawer(
child: Text('左侧抽屉'),
),
// 右侧抽屉
endDrawer: Drawer(
child: Text('右侧抽屉'),
),
);
}
}2. 抽屉头 DrawerHeader
常见的属性如下：
1. decoration 装饰。可用于设置背景颜色和图片，值的类型为BoxDecoration；
2. child 子组件。值的类型为Widget；
代码示例：
import "package:flutter/material.dart";
class CategoryPage extends StatefulWidget {
CategoryPage({Key key}) : super(key: key);
_CategoryPageState createState() => _CategoryPageState();
}
class _CategoryPageState extends State<CategoryPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Flutter App"),
),
// 左侧抽屉
drawer:Drawer(
child: Column(
children: <Widget>[
Row(
children:<Widget>[
Expanded(
// 自定义抽屉头
child:DrawerHeader(
child:Text("我的抽屉"),
// 装饰
decoration: BoxDecoration(
// 背景颜色
color: Colors.yellow,
// 图片
image: DecorationImage(
image: NetworkImage("https://www.itying.com/images/flutter/2.png"),
fit:BoxFit.cover
)
),
),
)
],
),
// 添加其它内容
],
)
),
);
}
}3. 用户账号抽屉头 UserAccountsDrawerHeader
常见属性如下：
1. decoration 装饰。可用于设置背景颜色和图片，值的类型为BoxDecoration；
2. accountName 账号名称。值的类型为Text；
3. accountEmail 账号邮箱。值的类型为Text；
4. currentAccountPicture 当前账号图片。值的类型为Widget；
5. otherAccountsPictures 其它账号图片。值的类型为Widget；
代码示例：
import "package:flutter/material.dart";
class CategoryPage extends StatefulWidget {
CategoryPage({Key key}) : super(key: key);
_CategoryPageState createState() => _CategoryPageState();
}
class _CategoryPageState extends State<CategoryPage> {
@override
Widget build(BuildContext context) {
return DefaultTabController(
// 标签数量
length: 9,
child:Scaffold(
appBar: AppBar(
title:Row(
children: <Widget>[
// 弹性容器布局
Expanded(
child:TabBar(
// 多个标签时滚动加载
isScrollable:true,
// 标签指示器的颜色
indicatorColor: Colors.red,
// 标签的颜色
labelColor: Colors.black,
// 未选中标签的颜色
unselectedLabelColor: Colors.white,
// 指示器的大小
indicatorSize: TabBarIndicatorSize.label,
// 指示器的权重，即线条高度
indicatorWeight: 4.0,
tabs: <Widget>[
Tab(text:"热销"),
Tab(text:"推荐"),
Tab(text:"搞笑"),
Tab(text:"妙招"),
Tab(text:"关注"),
Tab(text:"时尚"),
Tab(text:"女性"),
Tab(text:"服装"),
Tab(text:"男性"),
],
)
)
],
),
),
// 左侧抽屉
drawer:Drawer(
child: Column(
children: <Widget>[
Row(children:<Widget>[
Expanded(
// 固定格式的抽屉头
child: UserAccountsDrawerHeader(
// 账号名称
accountName: Text('越陌度阡'),
// 账号邮箱
accountEmail: Text("achieve.good@163.com"),
// 当前账号头像
currentAccountPicture: CircleAvatar(
backgroundImage: NetworkImage("https://www.itying.com/images/flutter/2.png"),
),
// 抽屉头的装饰
decoration: BoxDecoration(
// 背景颜色
color: Colors.yellow,
// 图片
// image: DecorationImage(
// image: NetworkImage("https://www.itying.com/images/flutter/3.png"),
// fit:BoxFit.cover
// )
),
// 其它账号头像
otherAccountsPictures: <Widget>[
Image.network("https://www.itying.com/images/flutter/4.png"),
Image.network("https://www.itying.com/images/flutter/5.png")
],
),
)
],),
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.people)
),
title:Text("用户中心")
),
// 分割线
Divider(),
],
)
),
// 右侧抽屉
endDrawer: Drawer(
child:Center(child:Text("右侧抽屉"))
),
// 标签页所对应的页面
body:TabBarView(
children: <Widget>[
ListView(
children:<Widget>[
ListTile(
title:Text("热销内容")
)
]
),
ListView(
children:<Widget>[
ListTile(
title:Text("推荐内容")
)
]
),
ListView(
children:<Widget>[
ListTile(
title:Text("搞笑内容")
)
]
),
ListView(
children:<Widget>[
ListTile(
title:Text("妙招内容")
)
]
),
ListView(
children:<Widget>[
ListTile(
title:Text("关注内容")
)
]
),
ListView(
children:<Widget>[
ListTile(
title:Text("时尚内容")
)
]
),
ListView(
children:<Widget>[
ListTile(
title:Text("女性内容")
)
]
),
ListView(
children:<Widget>[
ListTile(
title:Text("服装内容")
)
]
),
ListView(
children:<Widget>[
ListTile(
title:Text("男性内容")
)
]
),
],
)
)
);
}
}在抽屉中进行路由跳转后返回页面时，可以先调用 Navigator.of(context).pop() 关闭之前打开的效果。
效果图如下：
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020-12-27 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读