Flutter 自定义Drawer 滑出位置的大小实例代码详解
更新时间：2020年04月17日 10:18:54 作者：三掌柜666
这篇文章主要介绍了Flutter 自定义Drawer 滑出位置的大小,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
Flutter开发过程中，Drawer控件的使用频率也是比较高的，其实有过移动端开发经验的人来说，Flutter中的Drawer控件就相当于ios开发或者Android开发中的“抽屉”效果，从侧边栏滑出导航菜单。对于Flutter中的Drawer控件的常规用法就不多介绍，网上大把的教程。
那么本篇博文分享一个网上教程不多的一个知识点，那就是自定义Drawer的滑出位置的大小，自定义Drawer滑出位置就需要修改一个double的widthPercent属性，widthPercent一般默认值是0.7，然后想要修改widthPercent的默认值，或者设置想要的任何大于0小于1之间的值都可以根据这个来设置。具体操作如下所示：
1、首先封装这个方法（看官可以直接复制使用）
class CustomDrawer extends StatelessWidget {
final double elevation;
final Widget child;
final String semanticLabel;
final double widthPercent;
const CustomDrawer({
Key key,
this.elevation = 16.0,
this.child,
this.semanticLabel,
this.widthPercent = 0.7,
}) :
assert(widthPercent!=null&&widthPercent<1.0&&widthPercent>0.0)
,super(key: key);
@override
Widget build(BuildContext context) {
assert(debugCheckHasMaterialLocalizations(context));
String label = semanticLabel;
switch (defaultTargetPlatform) {
case TargetPlatform.iOS:
label = semanticLabel;
break;
case TargetPlatform.android:
case TargetPlatform.fuchsia:
label = semanticLabel ?? MaterialLocalizations.of(context)?.drawerLabel;
}
final double _width=MediaQuery.of(context).size.width*widthPercent;
return Semantics(
scopesRoute: true,
namesRoute: true,
explicitChildNodes: true,
label: label,
child: ConstrainedBox(
constraints: BoxConstraints.expand(width: _width),
child: Material(
elevation: elevation,
child: child,
),
),
);
}
}
2、调用的地方
@override
Widget build(BuildContext context) {
return InkWell(
onTap: () {
Navigator.of(context).pop();
Navigator.of(context).push(new MaterialPageRoute(
builder: (BuildContext context) => new AccountManagersPage('')));
},
child: new CustomDrawer( //调用修改Drawer的方法
widthPercent:0.5, //设置Drawer滑出位置居屏幕的一半宽度
child: Container(
color: Color(0xFF1F1D5B),
child: Column(
children: <Widget>[
Expanded(
child: ListView(children: <Widget>[
Column(
children: <Widget>[
ListTile(
title: Text('设备列表',
style: TextStyle(color: Color(0xFF8B89EF))),
contentPadding: EdgeInsets.symmetric(
horizontal: 15.0, vertical: 0.0),
),
ListTile(
leading: CircleAvatar(
backgroundImage: new ExactAssetImage(
'images/menu_lamp_pole.png'),
radius: 15.0,
),
title: Text('灯杆',
style: TextStyle(
color: Color(0xFFffffff),
fontSize: 18.0,
)),
onTap: () {
Navigator.of(context).pop();
//Navigator.of(context).push(new MaterialPageRoute(builder:(BuildContext context) => new BigScreenPage(0,'灯杆列表')));
Navigator.of(context).push(new MaterialPageRoute(
builder: (BuildContext context) =>
new MainPoleView()));
}),
// Divider(),
ListTile(
leading: CircleAvatar(
backgroundImage:
new ExactAssetImage('images/menu_charge.png'),
radius: 15.0,
),
title: Text('充电桩',
style: TextStyle(
color: Color(0xFFffffff),
fontSize: 18.0,
)),
onTap: () {
Navigator.of(context).pop();
Navigator.of(context).push(new MaterialPageRoute(
builder: (BuildContext context) =>
new BigScreenPage(6, '充电桩列表')));
}),
],
)
]),
)
],
),
),
),
);
}
实现效果如下所示：
总结
到此这篇关于Flutter 自定义Drawer 滑出位置的大小的文章就介绍到这了,更多相关flutter 自定义drawer内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了Android编程中软键盘基本用法,结合实例形式分析了Android软键盘的显示、隐藏与使用注意事项,需要的朋友可以参考下2016-10-10
这篇文章主要介绍了简单掌握Android Widget桌面小部件的创建步骤,Widget一般采用web前端技术进行开发,需要的朋友可以参考下2016-03-03
这篇文章主要介绍了Android调用手机拍照功能的方法,实例分析了Android调用手机拍照功能及显示图片的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-09-09
Android使用VideoView播放本地视频和网络视频的方法
本文将讲解如何使用Android视频播放器VideoView来播放本地视频和网络视频，实现起来还是比较简单的，有需要的可以参考借鉴。2016-08-08
Android使用AudioManager修改系统音量的方法
这篇文章主要介绍了Android使用AudioManager修改系统音量的方法,结合实例形式分析了AudioManager调节音量的常用方法及相关使用技巧,需要的朋友可以参考下2016-08-08
Android Google AutoService框架使用详解
AutoService是Google开发一个自动生成SPI清单文件的框架。看过一些基于APT的三方框架源码的读者应该有所了解。比如Arouter、EventBus等等2022-11-11
最近使用kotlin重构项目,遇到了一个小问题,在Java中,可能会遇到判断某个对象是否为空,为空执行一段逻辑,不为空执行另外一段逻辑,下面这篇文章主要给大家介绍了关于Kotlin中空判断与问号和感叹号标识符处理操作的相关资料,需要的朋友可以参考下2022-12-12
目前，各种App的社区或者用户晒照片、发说说的地方，都提供了评论功能，为了更好地学习，自己把这个功能实现了一下，下面这篇文章主要给大家介绍了关于Android如何实现社交应用中的评论与回复功能的相关资料，需要的朋友可以参考下2018-07-07
android工程下不能运行java main程序的解决方法
这篇文章主要介绍了android工程下不能运行java main程序的解决方法,需要的朋友可以参考下2014-05-05
Binder通信机制说来简单，但是在使用的过程的遇到了一些问题，最后终于解决了，现在晒出来和大家分享一下，希望可以帮助你们2012-11-11
最新评论