热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

开发笔记:Flutter自定义View之——价格选择器|双向滑动|手势处理

篇首语:本文由编程笔记#小编为大家整理,主要介绍了Flutter自定义View之——价格选择器|双向滑动|手势处理相关的知识,希望对你有一定的参考价值。

篇首语:本文由编程笔记#小编为大家整理,主要介绍了Flutter自定义View之——价格选择器|双向滑动|手势处理相关的知识,希望对你有一定的参考价值。






源码下载地址


一、本篇文章通过自定义View实现的效果图

在这里插入图片描述


二、现在对这个组件进行一一拆解,如下:


  1. 顶部选中的结果我们可以单独拿出来,通过监听选择器的变化来显示值就可以
  2. 底部固定的灰色进度,绘制圆角矩形
  3. 刻度线,绘制直线;需要注意的是开头和结尾的刻度无需绘制
  4. 刻度文字,绘制文字
  5. 开始与结束的滑块,绘制图片
  6. 红色选中的进度,绘制圆角矩形
  7. 手势处理

三、这里重点说一下绘制文字这块


  • 由于文字是与刻度居中对齐的,所以在计算坐标时 公式如下:
    每一个文字的起点X坐标 = 画布宽度 / 5 * 第几个刻度 - 文字宽度 / 2
    由此我们必须在绘制前先测量出文字宽度
  • 文字宽度计算

Size _textSize(String text) {
final TextPainter textPainter = TextPainter(
text: TextSpan(
text: text,
style: TextStyle(fontWeight: FontWeight.w300, fontSize: 10),
),
maxLines: 1,
textDirection: TextDirection.ltr)
..layout(minWidth: 0, maxWidth: double.infinity);
return textPainter.size;
}


TextStyle 需与绘制时设定的一致



四、最后手势这块的话依托于强大的GestureDetector可以很轻松的实现

GestureDetector(
onHorizontalDragDown: (down) {
_onDown(down.localPosition);
},
onHorizontalDragUpdate: (move) {
_onMove(move.localPosition);
},
onHorizontalDragEnd: (up) {
},
child: CustomPaint(
size: canvasSize,
painter: _SliderSelectorCustomPaint(),
),
);





推荐阅读
  • 在Android中实现黑客帝国风格的数字雨效果
    本文将详细介绍如何在Android平台上利用自定义View实现类似《黑客帝国》中的数字雨效果。通过实例代码,我们将探讨如何设置文字颜色、大小,以及如何控制数字下落的速度和间隔。 ... [详细]
  • td{border:1pxsolid#808080;}参考:和FMX相关的类(表)TFmxObjectIFreeNotification ... [详细]
  • 本文探讨了如何使用Scrapy框架构建高效的数据采集系统,以及如何通过异步处理技术提升数据存储的效率。同时,文章还介绍了针对不同网站采用的不同采集策略。 ... [详细]
  • 本文详细介绍如何在SSM(Spring + Spring MVC + MyBatis)框架中实现分页功能。包括分页的基本概念、数据准备、前端分页栏的设计与实现、后端分页逻辑的编写以及最终的测试步骤。 ... [详细]
  • 尽管在WPF中工作了一段时间,但在菜单控件的样式设置上遇到了一些基础问题,特别是关于如何正确配置前景色和背景色。 ... [详细]
  • 问题场景用Java进行web开发过程当中,当遇到很多很多个字段的实体时,最苦恼的莫过于编辑字段的查看和修改界面,发现2个页面存在很多重复信息,能不能写一遍?有没有轮子用都不如自己造。解决方式笔者根据自 ... [详细]
  • Excel技巧:单元格中显示公式而非结果的解决方法
    本文探讨了在Excel中如何通过简单的方法解决单元格显示公式而非计算结果的问题,包括使用快捷键和调整单元格格式两种方法。 ... [详细]
  • 一、使用Microsoft.Office.Interop.Excel.DLL需要安装Office代码如下:2publicstaticboolExportExcel(S ... [详细]
  • 数据输入验证与控件绑定方法
    本文提供了多种数据输入验证函数及控件绑定方法的实现代码,包括电话号码、数字、传真、邮政编码、电子邮件和网址的验证,以及报表绑定和自动编号等功能。 ... [详细]
  • 1、编写一个Java程序在屏幕上输出“你好!”。programmenameHelloworld.javapublicclassHelloworld{publicst ... [详细]
  • 本文深入探讨了WPF框架下的数据验证机制,包括内置验证规则的使用、自定义验证规则的实现方法、错误信息的有效展示策略以及验证时机的选择,旨在帮助开发者构建更加健壮和用户友好的应用程序。 ... [详细]
  • 处理Android EditText中数字输入与parseInt方法
    本文探讨了如何在Android应用中从EditText组件安全地获取并解析用户输入的数字,特别是用于设置端口号的情况。通过示例代码和异常处理策略,展示了有效的方法来避免因非法输入导致的应用崩溃。 ... [详细]
  • 本文详细介绍了 `org.apache.tinkerpop.gremlin.structure.VertexProperty` 类中的 `key()` 方法,并提供了多个实际应用的代码示例。通过这些示例,读者可以更好地理解该方法在图数据库操作中的具体用途。 ... [详细]
  • 本文详细介绍了JQuery Mobile框架中特有的事件和方法,帮助开发者更好地理解和应用这些特性,提升移动Web开发的效率。 ... [详细]
  • 本文将从基础概念入手,详细探讨SpringMVC框架中DispatcherServlet如何通过HandlerMapping进行请求分发,以及其背后的源码实现细节。 ... [详细]
author-avatar
独行小刀
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有