首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在 Flutter 中创建可拖动的浮动操作按钮

Flutter 允许您使用FloatingActionButton小部件添加浮动操作按钮。但是,它不允许您拖动按钮。如果你想让它可拖动怎么办。...本教程有一个示例,说明您需要做什么才能创建浮动操作按钮,只要它位于父小部件内,就可以将其拖动到屏幕周围的任何位置。 创建可拖动的浮动操作按钮 我们将为这样的小部件创建一个类。...下面是用于创建可拖动浮动操作按钮的类。它有一些参数,包括child(要设置为按钮的小部件)、initialOffset(移动前的初始偏移量)和onPressed(单击按钮时调用的回调)。...key: _key, child: widget.child, ), ), ); } } 输出: 概括 这就是如何在 Flutter 中创建可拖动的浮动操作按钮...基本上,您可以使用Listener小部件来检测指针移动事件并根据移动增量更新按钮偏移。该Listener小部件还支持检测应执行按钮操作的指针向上事件,除非它刚刚被拖动。

5.7K10
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    UI界面中的用户头像,这么设计就对了!

    静电说:用户头像是UI界面中的重要一环。今天这篇来自Roman的文章非常精彩,她总结了在UI界面中的用户头像的几乎所有形式和设计技巧。非常值得一看!...003.事件和通知 当我们想通过用户头像来通知用户有额外的操作的时候,我们可以为头像加上额外的小挂件。 1. 显示用户是在线还是离线 2. 通过带有编号标签来告知用户有消息 3....下面是选中状态的另一种形式: 009.头像组 a.带按钮的头像组 在对头像进行分组时,例如,“加号”按钮会将我们带到一系列与交互相关的选项(添加、编辑、排序等),这些选项可以对分组的头像执行。...b.使用数字 在一组头像末尾使用数字,是指示队列中剩余用户数量的绝佳解决方案。 c.悬停下拉 徽章悬停下拉菜单,最常见的模式之一,它可以扩展用户的附加信息。...d.悬停浮动显示状态 当存在一组堆叠的头像时,显示用户全面可以使用这种方式进行。

    2.4K10

    一篇文章,搞定五种类型的UI通知栏设计

    撰写描述时,尽量使其长度不超过 40 个字符,并且不要重复内容标题中的内容。 操作区域(号召性用语按钮)。按钮让用户立即采取行动。如果通知需要操作,按钮的标签应该是可操作的。...用户检查更新后,徽章会从应用程序图标中消失,并在新通知到达时再次出现。 右上角带有圆点的铃铛是此类通知的常规设计。 优点: 徽章不需要用户过多关注。徽章不会阻止用户与产品交互。...它可以对用户产生积极的影响。在某些情况下,用户可以将徽章视为有价值的奖励。例如,徽章会通知用户他们在社交网络上收到的新点赞。Nir Eyal 在他的书“Hooked”中描述了这种心理效应。...当应用程序发送需要用户操作的电子邮件通知时,用户必须切换到电子邮件应用程序才能完成操作。这可能不是很方便,尤其是当您与移动设备上的应用程序交互时。 何时使用: 您想要使用电子邮件通知有两个原因。...小心敏感信息 不要在通知中包含敏感信息。您无法预测人们在收到通知时会做什么,因此最好避免在设备屏幕上包含其他人可以看到的机密信息。

    3.1K20

    Jupyter中markdown的操作小技巧(上)

    本文将以Jupyter notebook中的markdown模块为例,介绍若干格式设置的小技巧,相信使用这些技巧,将有助于提升代码的易读性和条理性。...设置方式:在markdown模式中,根据#号的数量设置不同的标题层级。 3 设置文本 3.1 加粗文本 设置方式:在文本两旁加上“**”,即可设置为粗体。...运行前 运行后 4 区块引用 类似于层级关系中的子标题。 设置方式:在文本前加上“>”,数量越多,层级越低。...运行前 运行后 第二种设置方法 输入网址链接的同时,更改网址的名称,中括号“[ ]”重命名,小括号“( )”添加网址。...运行前 运行后 7 水平分割线 在cell中输入代码时,行与行之间可能需要分割线进行分割。

    3K41

    最新iOS设计规范九|10大系统能力(System Capabilities)

    在未锁定的设备上,向上滑动通知或让其消失将取消该通知,并可能将其从通知中心中删除。 通知还可以包括可自定义的详细信息视图,该视图提供更多信息和最多四个按钮。...通知详细信息视图最多可以包含四个操作按钮。这些按钮应用于执行省时的常规任务,从而无需打开应用程序。 避免提供破坏性的行动。在通知详细信息视图中提供破坏性操作之前,请仔细考虑。...使用这两种方法,导航栏都包含用于退出“快速查看”的按钮,以及用于执行诸如共享和标记之类的操作的特定于预览的按钮。如果您的应用程序包含工具栏,则将在此处而不是在导航栏中显示任何特定于预览的按钮。...在启用AirPrint的应用程序中查看可打印内容时,人们通常会在导航栏或工具栏中点击操作按钮,然后点击“打印”操作以显示打印机视图。...如果屏幕上没有可打印的内容或没有可用的打印机,则当有人点击“操作”按钮时,不要显示“打印”操作。如果您的应用实现了自定义打印按钮,请在无法打印时将其禁用或隐藏。 提供增加价值的打印选项。

    4.3K20

    三分钟让你也拥有一个很酷炫的GitHub展示页面(保姆级教程)

    ✨ GitHub README 统计 GitHub 个人资料奖杯 添加标题或封面图片 添加浮动图像或 GIF 社交图标部分 语言和工具部分 GitHub streak Spotify 播放 徽章 -...https://github.com/wanghao221(可以的话给个星星吧) 来跟我一起操作 1.创建一个新的存储库 去 https://github.com/new 近入存储库名称,该名称应与您的用户名相同...2.更新README文件 初始文件看起来像这样,带有一条简单的消息。 您可以通过单击 右侧的“编辑自述文件”按钮来编辑文件。 如您所见,该文件提供了一个使用 Markdown 制作的模板。...---- GitHub 个人资料奖杯 在你的自述文件中添加动态生成的 GitHub Trophy github上查看:https://github.com/ryo-ma/github-profile-trophy.../ ) GitHub 分析器 试试 GitHub 存储库 或者 1.您可以简单地分叉某人的存储库 2.单击README 文件中的编辑图标 3.复制代码并将其粘贴到您的自述文件中。

    6.3K20

    美国终于挥舞着霸权大棒向程序员动手了

    Saeedi 在medium上的博客《GitHub阻止了我的帐户而他们认为我正在开发核武器》中写道,他收到了 GitHub 的一封电子邮件,解释说他的帐户受到限制“由于美国的贸易管制法律限制。”...Saeedi 在博客中写道: 这意味着我们的账户与核武器、生物武器或化学武器或远程导弹或无人驾驶飞行器的开发、生产或使用有关。这不是很荒谬吗?! 之后 Saeedi 又写了一篇博文:黄色徽章又回来了。...这个“数字黄色徽章”只是一个比喻 GitHub上的警告消息非常烦人,一些程序员创建了一些解决方法来删除它。今天(2019年7月28日)GitHub最终为此警告添加了一个关闭按钮。...如果美国政府决定对你的国家实施制裁,那么“以国籍为目标,在没有事先通知的情况下阻止他们并且不让他们下载备份”的方法也会打击你。 ? 美国和中国基本上处于贸易战中。...由于GitHub现在归微软所有,我认为可以清楚地看到究竟是谁在背后操作这一切…过去一些开发人员认为微软是开源的敌人,看起来他们没有错! 最后,技术没有国界,但是程序员有。 ?

    43310

    【音频处理】Melodyne 自动修正功能 ( 修正音高中心 | 修正音高补偿 | 节拍自动修正 | 量化时间 )

    文章目录 一、音高自动修正功能 二、节拍自动修正功能 一、音高自动修正功能 ---- 仔细观察编辑面板中的音符 , 很少有处于正中心位置的音符 , 大部分音符的音准都不准确 , 这里建议使用自动修正功能...; 如果是制作音源 , 那么必须是 100\% ; " 修正音高补偿 " 用于控制声音的颤动 , 表示的是去除颤音的深度 , 0 是留下所有的声音颤动 , 100 表示 删除所有声音的颤动...; 二胡 / 小提琴 等弦乐的揉弦等操作 , 这些颤动一般不会超过半音程 , 这些颤动尽量留在声音上 , 这种情况下 修正音高补偿 设置的低一些 , 尽量保留颤音 ; 歌手由于气息不稳定造成的声音发颤...; 上述对话框 , 调节完毕后 , 点击 " 确定 " 按钮 , 自动校准后的效果如下 , 所有的音符都处于标准音高位置 ; 二、节拍自动修正功能 ---- 选择 菜单栏 " 编辑 / 量化时间 "...确定 " 按钮后 , Melodyne 会自动检测出最适合的音符长度 , 进行修正 ; 也可以选择不同的 节拍设置 , 让音符进行相应节拍的对齐 ; \cfrac{1}{4} T 表示 四分音符三连音

    8.5K10

    努力通知型分布式事务中的回滚操作,以及方案的特点和优势

    在努力通知型分布式事务中,当发生异常时,可以通过以下步骤来处理事务的回滚操作:事务管理器收到异常通知后,首先会发送回滚请求给参与事务的各个分支。...分支事务在执行过程中必须具有一致性保证。如果分支事务执行的中间结果已经对其他分支事务或外部系统产生了影响,则回滚操作可能无法完全还原数据的一致性。事务管理器必须能够正确地接收异常通知并发送回滚请求。...在分布式系统中,异常通知和回滚请求的传递必须可靠,以确保所有参与事务的分支都能够正确地执行回滚操作。以上是努力通知型分布式事务中处理事务回滚的一般流程和前提条件。...最终一致性:努力通知型分布式事务追求最终一致性,即在某个时间点上,所有参与方的状态将达到一致。虽然在通知过程中可能存在故障或延迟,但最终必定能够完成一致性的目标。...降低了系统的复杂性:与强一致性的分布式事务相比,努力通知型分布式事务在实现上更为简单,不需要维护全局事务状态,减少了系统的复杂性和开销。

    32121

    Material Design —悬浮响应式按钮(Buttons: Floating Action Button)

    左:选择前    右:选择后 并非每屏都需要浮动操作按钮。 浮动操作按钮表示app中的最重要的操作。 ?...避免对次要和消极的操作使用浮动操作按钮,包括以下内容: ·存档或清空 ·不明确的行为 ·警告或错误 ·有限制的任务,如剪切文本 ·应该在工具栏中的控件,如音量控制或更改字体颜色 浮动操作按钮不包含应用栏...icons或状态通知(如小红点)。...如果悬浮响应式按钮变形为工具栏,则该工具栏应包含相关操作。 ? 工具栏中的操作需关联 Speed dial 按动悬浮响应式按钮可以甩出相关动作。 菜单被唤起后,该按钮应保持在屏幕上。...不要在浮动操作按钮操作中放置溢出菜单。 从最初的屏幕应该最多只有两次点击就能到达预期的目的地。 ? 将溢出操作置于工具栏中的溢出菜单中,而不是悬浮响应式按钮中。 ?

    5.8K90

    【MFC拓展库】上海道宁与BCGSOFT合作为您带来专业的Micrisoft Windows开发业务组件

    它不仅仅是一个新控件 - 它是一种新的用户界面理念。功能区控件将传统的工具栏和菜单替换为选项卡式组(类别)。每个选项卡在逻辑上分为面板,每个面板可能包含各种控件和命令按钮。...复制/粘贴操作完全拖放支持(您可以在一天内拖动约会或将它们放在日期选择器控件上)。打印支持07、网格和报告控件Grid 控件支持大多数标准网格功能。...自动生成的行和列(对于 .NET)导出为 HTML 和 RTF单元格边框 - 具有不同线条样式的粗细边框(适用于 .NET)浮动文本 - 如果相邻单元格为空,则在相邻单元格上绘制文本文本环绕和修剪。...表格样式格式查找对话框水印图像支持网格单元通知徽章08、高级编辑控制高级编辑控件具有以下功能:智能感知支持大纲(可折叠块)支持行号语法高亮支持颜色块(块选择支持)符号支持:您可以定义一组字符以自动替换为图像标记支持...“横向”)或垂直(“纵向”)布局平铺标题和多行文本平铺图像数字和标志性徽章支持“活”瓷砖自定义颜色和画笔自定义瓷砖独立于操作系统:由于我们的实现只是模拟 Windows 8 风格的 Tiles,您可以在所有支持的操作系统下使用我们的

    5.6K20

    Marketbob - PHP多供应商数字模板软件市场

    Marketbob 具有可自定义的功能和完全响应式的设计,可确保您的市场看起来专业且在任何设备上都能完美运行。...Marketbob 采用 SEO 最佳实践构建,可帮助产品在搜索引擎结果中获得可见性,吸引更多流量并提高销量。定期更新和大量文档使设置和自定义变得简单,即使对于具有基本 PHP 知识的用户也是如此。...作者和用户的徽章: 作者和用户可以因各种成就和里程碑而获得徽章。 博客整合: 管理员可以撰写和管理博客文章,以与社区互动并分享更新。 广告: 脚本指定了投放广告的位置,从而可以通过广告进行盈利。...完整电子邮件通知: 为作者和用户提供有关购买、产品状态等信息的全面电子邮件通知。 安全交易: 安全的支付处理,确保买卖双方的交易安全。...网站地图自动生成: 每天自动生成站点地图,以便搜索引擎更新您的最新内容。 响应式设计: 完全响应的设计可在所有设备上提供最佳观看体验。 定制选项: 灵活且可定制,以满足您的市场的特定需求和品牌。

    9410

    在MNIST数据集上使用Pytorch中的Autoencoder进行维度操作

    那么,这个“压缩表示”实际上做了什么呢? 压缩表示通常包含有关输入图像的重要信息,可以将其用于去噪图像或其他类型的重建和转换!它可以以比存储原始数据更实用的方式存储和共享任何类型的数据。...此外,来自此数据集的图像已经标准化,使得值介于0和1之间。 由于图像在0和1之间归一化,我们需要在输出层上使用sigmoid激活来获得与此输入值范围匹配的值。...现在对于那些对编码维度(encoding_dim)有点混淆的人,将其视为输入和输出之间的中间维度,可根据需要进行操作,但其大小必须保持在输入和输出维度之间。...在下面的代码中,选择了encoding_dim = 32,这基本上就是压缩表示!...由于要比较输入和输出图像中的像素值,因此使用适用于回归任务的损失将是最有益的。回归就是比较数量而不是概率值。

    3.5K20

    斯坦福与苹果基于Apple Watch检测心率异常,0.5%人群被检出,其中84%患有房颤

    研究结果显示,超过40万名参与者中,有2000多人(约占总人数0.5%)收到了不规则心律的通知。收到不规则脉搏通知的参与者中,84%被发现患有房颤。 苹果心脏研究 ?...研究的主要目的是确定手表上的算法与心电图结果的匹配程度,以及收到通知并通过应用程序寻求医疗帮助的患者百分比。...在收到心律不齐通知,并在一周后使用心电图贴片进行随访的受试者中,只有三分之一(34%)的人检测到患有房颤。研究人员称,由于心房颤动是一种间歇性疾病,因此在随后的心电图补片监测中未检测到它并不奇怪。...将手表中的脉搏检测与同步心电图贴片记录进行比较,研究人员发现,脉冲检测算法的阳性预测值为71%,84%的受试者在接受不规则脉冲通知时发现房颤。...雷锋网了解到,在随后的调查中,57%收到通知的人表示,他们在研究之外找到医生就诊,无论他们是否已经被研究医生看过。

    3.8K10

    VSCode1.57版本更新记录

    这个是更新后的首要变化,我的上个文章也说了 就是打开一个GitHub的库,会询问是不是安全的 ? 同时更新的还有4个选项 ? 具体的作用在这里 workbench.startupEditor ?...打开一个空白的编辑器的选择 这个我只保持默认了,大家可以自己设置的使用 ? 这次的jupyter笔记是焕然一新的 ? 首先感觉不一样的地方就是这个浮动的工具栏 ? 插入单元格的位置 ?...变量表的位置变到了下方,不在是以前的上方 ? 当然具体的变量查看功能还在 ? 最喜欢的导出功能依旧还在 ? 导出的效果 ? 在右上角的位置,三点处的菜单比以前的更加丰富 ?...这个地方的MD的按钮变到了下面 ? ? ? ? 而且还开放了以下的API ? 建议开启一个新的功能。 启用新设置后,所选建议或片段的预览会显示在光标位置。 ?...这个徽章也是默认开启的 https://code.visualstudio.com/updates/v1_57 小张回来了~~~啊呜啊呜啊呜

    62820
    领券