Flutter学习之Dawer抽屉组件与Floating Button集成
简介
- Drawer 组件可以实现类似抽屉拉出推入的效果，一般是制作从侧边栏拉出导航面板。通常 Drawer 是和 ListView 组件组合使用的。
- Floating Button 对应一个圆形图标按钮， 悬停在内容之上，以展示应用程序中的主要动作，所以非常醒目。
实现的效果
详细说明
Drawer 组件可以添加头部效果，用以下两个组件可以实现：
- Drawer Header ： 展示基本信息。
| 属性名 | 类型 | 说明 |
| decoration | Decoration | header 区域的 decoration ，通常用来设置背景颜色或者背景图片 |
| curve | Curve | 如果 decoration 发生了变化，则会使用curve 设置的变化曲线和 duration 设置的动因时间来做一个切换动画 |
| child | Widget | Header 里面所显示的内容控件 |
| padding | EdgeInsetsGeometry | Header 里面内容控件的 padding 值，如果 child 为 null，则这个值无效 |
| margin | EdgeInsetsGeometry | Header 四周的间隙 |
- UserAccountsD rawerHeader ： 展示用户头像、用户名、Email 等信息。
| 属性名 | 类型 | 说明 |
|---|---|---|
| margin | EdgeInsetsGeometry | Header 四周的间隙 |
| decoration | Decoration | header 区域的 decoration ，通常用来设置背景颜色或者背景图片 |
| currentAccountPicture | Widget | 用来设置当前用户的头像 |
| otherAccountsPictures | List |
用来设置当前用户其他账号的头像 |
| accountName | Widget | 当前用户的名字 |
| accountEmail | Widget | 当前用户的Email |
| onDetailsPressed | VoidCalIback | 当accountN ame 或者acco untEmail 被点击的时候所触发的回调函数，可以用来显示其他额外的信息 |
具体实现
我们将需要展示出来的两个组件 floatingButton 与 drawer 组件单独出来，然后放置到需要展示的组件上面（当前的APP），这样子避免所有的代码写在一起，方便于维护与阅读。
创建一个 FloatingButton 组件
// 将浮动按钮抽取为单独的一个 widget
class FloatingButton extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Builder(builder: (BuildContext context){
return new FloatingActionButton(
child: const Icon(Icons.add),
// 提示信息
tooltip: "请点击 FloatingActionButton",
foregroundColor: Colors.white, // 前景色
backgroundColor: Colors.blue, // 背景色
elevation: 10.0, // 未点击阴影值
highlightElevation: 10.0, // 点击阴影值
onPressed: (){
Scaffold.of(context).showSnackBar(new SnackBar(content: new Text('瞎点击')));
},
mini: false, // 如果设置为true 图标显示会特别小
shape: new CircleBorder(), // 圆形边
isExtended: true,
);
},);
}
}创建一个 DrawerWidget 组件
// 将 drawer 抽屉组件抽取为一个单独的 widget
class DrawerWidget extends StatelessWidget{
final String imageUrl;
// 图片展示的地址从外面传入
const DrawerWidget(this.imageUrl);
@override
Widget build(BuildContext context){
return new Drawer(
child: ListView(
children: [
// 设置用户信息 头像、用户名、Email 等
UserAccountsDrawerHeader(
accountName: new Text('Wayfreem'),
accountEmail: new Text('[email protected]'),
// 设置当前的头像
currentAccountPicture: new CircleAvatar( backgroundImage: new NetworkImage(imageUrl),),
onDetailsPressed: (){ print('瞎JB点击'); },
// 属性本来是用来设置当前用户的其他账号的头像，这里用来当 QQ 二维码图片展示
otherAccountsPictures: [new Container( child: Image.network(imageUrl),)],
),
new ListTile(
leading: new CircleAvatar(child: Icon(Icons.color_lens),),
title: Text("个性装扮"),
),
new ListTile(
leading: new CircleAvatar(child: Icon(Icons.photo),),
title: Text("我的相册"),
),
new ListTile(
leading: new CircleAvatar(child: Icon(Icons.wifi),),
title: Text("免流量特权"),
),
],
),
);
}
} 最后拼接到一起
void main() => runApp(new MaterialApp(
title: 'Drawer 抽屉组件',
home: new LayoutDemo(),
));
class LayoutDemo extends StatelessWidget{
String imageUrl = 'https://b-ssl.duitang.com/uploads/item/' +
'201602/15/20160215235057_EU3tS.thumb.700_0.jpeg';
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(title: new Text('Drawer 抽屉组件'),),
drawer: new DrawerWidget(imageUrl),
// 主体区域放置一个文本显示
body: Center(
child: Text('floating button', style: new TextStyle(fontSize: 28),),
),
// 放置一个浮动的按钮
floatingActionButton: FloatingButton(),
// 浮动按钮的放置位置
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
);
}
}附完整的代码
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() => runApp(new MaterialApp(
title: 'Drawer 抽屉组件',
home: new LayoutDemo(),
));
class LayoutDemo extends StatelessWidget{
String imageUrl = 'https://b-ssl.duitang.com/uploads/item/' +
'201602/15/20160215235057_EU3tS.thumb.700_0.jpeg';
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(title: new Text('Drawer 抽屉组件'),),
drawer: new DrawerWidget(imageUrl),
// 主体区域放置一个文本显示
body: Center(
child: Text('floating button', style: new TextStyle(fontSize: 28),),
),
// 放置一个浮动的按钮
floatingActionButton: FloatingButton(),
// 浮动按钮的放置位置
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
);
}
}
// 将 drawer 抽屉组件抽取为一个单独的 widget
class DrawerWidget extends StatelessWidget{
final String imageUrl;
const DrawerWidget(this.imageUrl);
@override
Widget build(BuildContext context){
return new Drawer(
child: ListView(
children: [
// 设置用户信息 头像、用户名、Email 等
UserAccountsDrawerHeader(
accountName: new Text('Wayfreem'),
accountEmail: new Text('[email protected]'),
// 设置当前的头像
currentAccountPicture: new CircleAvatar( backgroundImage: new NetworkImage(imageUrl),),
onDetailsPressed: (){ print('瞎JB点击'); },
// 属性本来是用来设置当前用户的其他账号的头像，这里用来当 QQ 二维码图片展示
otherAccountsPictures: [new Container( child: Image.network(imageUrl),)],
),
new ListTile(
leading: new CircleAvatar(child: Icon(Icons.color_lens),),
title: Text("个性装扮"),
),
new ListTile(
leading: new CircleAvatar(child: Icon(Icons.photo),),
title: Text("我的相册"),
),
new ListTile(
leading: new CircleAvatar(child: Icon(Icons.wifi),),
title: Text("免流量特权"),
),
],
),
);
}
}
// 将浮动按钮抽取为单独的一个 widget
class FloatingButton extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Builder(builder: (BuildContext context){
return new FloatingActionButton(
child: const Icon(Icons.add),
// 提示信息
tooltip: "请点击 FloatingActionButton",
foregroundColor: Colors.white, // 前景色
backgroundColor: Colors.blue, // 背景色
elevation: 10.0, // 未点击阴影值
highlightElevation: 10.0, // 点击阴影值
onPressed: (){
Scaffold.of(context).showSnackBar(new SnackBar(content: new Text('瞎点击')));
},
mini: false, // 如果设置为true 图标显示会特别小
shape: new CircleBorder(), // 圆形边
isExtended: true,
);
},);
}
}