Flutter 制作一个抽屉菜单,纯手打“RocketMQ笔记”

本文介绍了如何在Flutter中利用Drawer组件创建抽屉菜单,包括Drawer和UserAccountsDrawerHeader的属性使用,以及代码实现过程。通过示例代码,展示了如何将抽屉菜单集成到应用中,并提供了组件抽取的思考。
摘要由CSDN通过智能技术生成

其实在APP中,抽屉菜单就是当手指在屏幕横向滑动时候,左边屏幕会滑出或者滑入一个View的东西,就像一个抽屉。下面是我在网上找的一个示例图,和现在正跑在我的模拟器上的目标图。

示例图

目标图

在Android或者IOS上,要实现这种侧滑抽屉空间,可以使用外部库来达到效果,不过Flutter本身已经给我们提供了 Drawer 这个UI组件,来使你更轻松地达到这个效果。

Drawer及UserAccountsDrawerHeader可用属性

| Drawer属性 | 说明 |

| — | — |

| elevation | 背景高度 |

| child | 子组件 |

| semanticLabel | 标签 |

| UserAccountsDrawerHeader属性 | 说明 |

| — | — |

| decoration | 头部装饰 |

| margin | 外边距  默认8.0 |

| currentAccountPicture | 主图像 |

| otherAccountsPictures | 副图像 |

| accountName | 标题 |

| accountEmail | 副标题 |

| onDetailsPressed | 点击监听 |

实现

首先我默认大家已经搭建好了Flutter的环境并已经初步写了一

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值