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 Studio全局搜索快捷键(Ctrl+Shift+F)失效问题及解决
这篇文章主要介绍了Android Studio全局搜索快捷键(Ctrl+Shift+F)失效问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
这篇文章主要介绍了Android编程实现仿优酷旋转菜单效果的方法,较为详细的分析了Android实现旋转菜单的布局与功能实现技巧,并附带完整的demo源码供读者下载参考,需要的朋友可以参考下2015-12-12
RecyclerView是Android一个更强大的控件,其不仅可以实现和ListView同样的效果,还有优化了ListView中的各种不足。这篇文章主要介绍了RecyclerView实现的流式标签单选多选功能,需要的朋友可以参考下2019-11-11
向TextView或EditText中添加图像比直接添加文本复杂一点点，需要用到<img>标签。接下来通过本文给大家介绍Android中使用TextView实现图文混排的方法，希望对大家有所帮助2016-02-02
这篇文章主要介绍了Android仿Flipboard动画效果的实现代码，本文图文并茂给大家介绍的非常详细,需要的朋友可以参考下2018-01-01
这篇文章主要为大家详细介绍了Android Camera开发实现可复用的相机组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-05-05
这篇文章主要介绍了Android Studio注释模板介绍，之前Eclipse敲/**加回车，模板就出来了，而Android Studio却不可以自定义，现在我给大家介绍下用live templates替代,需要的朋友可以参考下2015-07-07
这篇文章主要介绍了Android编程实现获取新浪天气预报数据的方法,涉及Android基于新浪接口的调用及数据处理技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-11-11
这篇文章主要为大家详细介绍了Android使用AIDL实现两个App间通信，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-04-04
图库在JB和JB2的版本上显示的行为是：横屏全屏显示，竖屏会显示status bar，图库在JB和JB2的版本上显示的行为是：横屏全屏显示，竖屏会显示status bar，具体实现方法如下，不会的朋友可以参考下哈2013-06-06
最新评论