Flutter笔记:Widgets Easier组件库(5)使用加减器

Flutter笔记
Widgets Easier组件库(5):使用加减器

- 文章信息 - Author: 李俊才 (jcLee95)
Visit me at CSDN: https://jclee95.blog.csdn.net
My WebSitehttp://thispage.tech/
Email: 291148484@163.com.
Shenzhen China
Address of this article:https://blog.csdn.net/qq_28550263/article/details/138342874
HuaWei:https://bbs.huaweicloud.com/blogs/426749

组件库地址

  • Pub.Dev:https://pub.dev/packages/widgets_easier
  • GitHub:https://github.com/jacklee1995/widgets_easier
  • 国内访问(更新延迟):https://pub-web.flutter-io.cn/packages/widgets_easier

【介绍】:本文介绍用于Flutter的Widgets Easier组件库(5):使用加减器。

flutter-ljc


上一节:《 Widgets Easier组件库(4)使用按钮组 | 下一节:《 Widgets Easier组件库(6)使用滑动器


1. 概述

1.1 关于Widgets Easier

本库是一个 Flutter 组件库,旨在提供用于Flutter开发的组件,使得开发者能够更简单地构建出更丰富地界面效果。项目地址为:

  • https://github.com/jacklee1995/widgets_easier

  • https://pub.dev/packages/widgets_easier

1.2 模块安装

在你的Flutter项目中,运行下面的命令:

flutter pub add widgets_easier

即可安装最新版本的 Widgets Easier 库。

2.加减器组件简介

CounterInput`是一个用于数值输入和调整的 Flutter 组件,它提供了一个直观的界面,允许用户通过点击加号和减号按钮或直接输入数值来改变当前值。改组件包含以下特性:

  1. 支持点击加号和减号按钮来增加或减少当前值
  2. 支持直接在文本框中输入数值;
  3. 可自定义的最小值、最大值和步长;
  4. 可自定义的样式,包括大小、颜色和边框样式;
  5. 提供了多个回调事件,用于监听值的变化和边界情况;
  6. 支持长按加号和减号按钮来连续改变值;
  7. 支持禁用和启用组件的交互。

3. 使用语义

和其它组件一样,通过type属性可以指定语义枚举值,以得到不同的语义色彩。例如:

CounterInput(type: SemanticEnum.primary)

example_uoLPuBTKzb

4. 自定义色彩

如果你想更加灵活地指定各个部分的颜色,这也是可行的。具体来说,有以下几个颜色参数:

  1. iconColor:加减图标的颜色
  2. backgroundColor:输入框背景色;
  3. buttonColor:按钮颜色;
  4. textColor:输入框文本颜色。

下面是一个例子:

const CounterInput(size: SizeEnum.small,iconColor: Colors.amber,backgroundColor: Colors.black,buttonColor: Colors.blue,textColor: Colors.white,
)

example_h0k4KWue9E

5. 尺寸

5.1 枚举尺寸

通过size组件可以指定尺寸枚举,包括SizeEnum.small、SizeEnum.defaultSize、SizeEnum.large,如果未指定,默认为SizeEnum.defaultSize。例如:

Row(children: [Column(children: [CounterInput(size: SizeEnum.small,controller: CounterInputController(),),const Text('SizeEnum.small'),],),Column(children: [CounterInput(size: SizeEnum.defaultSize,controller: CounterInputController(),),const Text('SizeEnum.defaultSize'),],),Column(children: [CounterInput(size: SizeEnum.large,controller: CounterInputController(),),const Text('izeEnum.large'),],),],
),

example_1JTzG6Hlaf

5.2 数值尺寸

如果枚举尺寸不能满足要求还可以指定数值:

CounterInput(height: 50,controller: CounterInputController(),
),

example_eDBmo5IVT9

6. 轮廓型

通过指定isOutlined的值为true,可以设置加减器为轮廓型。例如:

Row(children: [CounterInput(type: SemanticEnum.primary,controller: CounterInputController(),isOutlined: true,),CounterInput(type: SemanticEnum.secondary,controller: CounterInputController(),isOutlined: true,),CounterInput(type: SemanticEnum.info,controller: CounterInputController(),isOutlined: true,),CounterInput(type: SemanticEnum.success,controller: CounterInputController(),isOutlined: true,),],
),

example_tjpQHhVKRl

7. 圆角加减器

通过radius属性可以很方便地为加减器设置圆角.例如:

const CounterInput(type: SemanticEnum.info,radius: 20,step: 3,
)

example_4AXqYeLDKp

8. 自动宽度和固定宽度

默认情况下宽度是自动的,加减器文本输入区的宽度随着位数的增加而增加。但是也可以指定一个固定的文本输入区宽度。例如:

CounterInput(textFieldWidth: 60,controller: CounterInputController(),
),

9. 回调事件

9.1 加、减回调

加回调用于监听值增加事件,当数值增加时触发;类似地,减回调用于监听减少事件,当数值减少时触发。

  • 通过onIncrement回调,用于监值增加事件;
  • 通过Decremented回调,用于监值减少事件。

下面这个例子中,初始值为7,步进值为2,当增加或者减少时在控制台打印新值和旧值:

CounterInput(controller: CounterInputController(initialValue: 7),step: 2,onIncrement: (oldValue, value) {debugPrint("+增加前为$oldValue;增加后为:$value");},onDecrement: (oldValue, value) {debugPrint("-减少前为$oldValue;减少后为:$value");},
),

注:指定初始值需要使用CounterInputController控制器,就像这个例子中所示的一样。

9.2 最值到达回调

加减器有一个最大值和一个最小值,默认情况下最小值为0,最大值为100。当变化到最小值时,将触发最小值回调。下面的例子展示了到达最大/最小值时,执行相关回调。其中设置最大值为10,最小值为1,初始值为6,步进值为2。每当到达最小或最大值的时候弹窗提示。

CounterInput(type: SemanticEnum.primary,minValue: 1,maxValue: 10,controller: CounterInputController(),step: 1,onIncrement: (oldValue, value) {debugPrint("+Increasing from $oldValue to $value");},onDecrement: (oldValue, value) {debugPrint("-Decreasing from $oldValue to $value");},onMax: () => InfoDialogs.show(context,message: 'Reached maximum value',type: SemanticEnum.primary,onTapDismiss: () => Navigator.of(context).pop(),),onMin: () => InfoDialogs.show(context,message: 'Reached minimum value',type: SemanticEnum.fatal,onTapDismiss: () => Navigator.of(context).pop(),),
)

example_wzi2mFQRMk

通过这个例子可以看出,onMaxonMin仅仅是到达最值得时候被调用,但是从如果尝试往超出方向继续点击按钮时不会被调用。以上面得GIF图片为例,当增加到10单词会调用onMax方法,但是在10上继续增加是不会处理的。

9.3 溢出回调

溢出回调是为了响应增道最大值继续操作增加、减到最小值继续操作减少的场景。例如:

CounterInput(type: SemanticEnum.primary,minValue: 1,maxValue: 13,controller: CounterInputController(initialValue: 7),step: 4,onMinOverflow: () => InfoDialogs.zoomIn(context,message: '当前已经时最小值,无法继续减少',buttonText: '确定',onTapDismiss: () {Navigator.of(context).pop();},),onMaxOverflow: () => InfoDialogs.zoomIn(context,message: '当前已经时最大值,无法继续增加',buttonText: '确定',onTapDismiss: () {Navigator.of(context).pop();},),
)

example_fMYLgu8hR9

9.3 值变化事件

CounterInput(onValueChanged: (oldValue, newValue) {print('oldValue is $oldValue, newValue is $newValue');},
)

example_Jfs459a3CF

对应图中的点击,控制台打印的结果为:

flutter: oldValue is 0.0, newValue is 1.0
flutter: oldValue is 1.0, newValue is 2.0
flutter: oldValue is 2.0, newValue is 3.0
flutter: oldValue is 3.0, newValue is 4.0
flutter: oldValue is 4.0, newValue is 5.0
flutter: oldValue is 5.0, newValue is 6.0
flutter: oldValue is 6.0, newValue is 7.0
flutter: oldValue is 7.0, newValue is 6.0
flutter: oldValue is 6.0, newValue is 5.0
flutter: oldValue is 5.0, newValue is 4.0
flutter: oldValue is 4.0, newValue is 3.0
flutter: oldValue is 3.0, newValue is 2.0
flutter: oldValue is 2.0, newValue is 1.0
flutter: oldValue is 1.0, newValue is 0.0

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/6038.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

机器学习:深入解析SVM的核心概念【三、核函数】

核函数 **问题一:为什么说是有限维就一定存在高维空间可分呢?**原始空间与特征空间为什么映射到高维空间可以实现可分核函数的作用 **问题二:最终怎么得到函数**从对偶问题到决策函数的步骤:结论 **问题三:为什么说特征…

nginx--第三方模块安装上传下载服务

第三方模块安装 准备 cd /usr/local/src/ yum install git -y git clone https://github.com/openresty/echo-nginx-module.git cd nginx-1.24.0 yum -y install perl-devel perl-ExtUtils-Embed zlib-devel gcc-c libtool openssl openssl-devel 编译安装 ./configure \--p…

ZooKeeper知识点总结及分布式锁实现

最初接触ZooKeeper是之前的一个公司的微服务项目中,涉及到Dubbo和ZooKeeper,ZooKeeper作为微服务的注册和配置中心。好了,开始介绍ZooKeeper了。 目录 1.ZooKeeper的基本概念 2.ZooKeeper的节点(ZNode) 3. ZooKeep…

机器学习之基于Tensorflow(LSTM)进行多变量时间序列预测股价

欢迎大家点赞、收藏、关注、评论啦 ,由于篇幅有限,只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 项目简介:机器学习之基于TensorFlow(LSTM)进行多变量时间序列预测股价 一、项目…

Python量化炒股的获取数据函数—get_fundamentals_continuously()

Python量化炒股的获取数据函数—get_fundamentals_continuously() get_fundamentals()函数只能用于查询某一交易日的股票财务数据信息,如果要查询多个交易日的股票财务数据信息,就要使用get_fundamentals_continuously()函数,语法格式如下&a…

Django数据库创建存储及管理

一、什么是ORM Django的ORM(Object-Relational Mapping)是Django框架中一个非常重要的组件。ORM可以让开发者以面向对象的方式操作数据库,而不需要直接编写SQL语句。 具体来说,Django ORM提供了以下功能: 模型定义:开发者可以在Django应用中定义Python类来表示数据库表,这些…

tensorflow报错

参考 TensorFlow binary is optimized to use available CPU instructions in performance-critical operations._this tensorflow binary is optimized to use availab-CSDN博客 解决Python中cuBLAS插件无法注册问题_unable to register cudnn factory: attempting to re-CS…

45. UE5 RPG 使用元属性(Meta Attributes)以及使用Set by Caller修改伤害

在RPG游戏中,我们是不会直接修改生命值的属性,是因为在修改角色属性时,需要获取角色的属性并进行复杂的计算,所以,我们正常情况下使用元属性(Meta Attributes)作为计算的中间的媒。在服务器上先…

【讲解下如何解决一些常见的 Composer 错误】

🌈个人主页: 程序员不想敲代码啊 🏆CSDN优质创作者,CSDN实力新星,CSDN博客专家 👍点赞⭐评论⭐收藏 🤝希望本文对您有所裨益,如有不足之处,欢迎在评论区提出指正,让我们共…

Apache Dubbo知识点表格总结

Dubbo是一个高性能的Java RPC框架,它提供了一系列的功能来支持分布式系统的开发。通常用于微服务之间的服务调用,顺便提一下也是用于微服务之间调用的OpenFeign,OpenFeign是Spring Cloud体系中的一个声明式HTTP客户端,用于简化HTT…

Django知识点总结

因为最近在搞一个Python项目,使用的Django框架。所以快速学习了一下这个web框架。并做一些总结。 Django官网的介绍:Django is a high-level Python web framework that encourages rapid development and clean, pragmatic design. Built by experience…

Ex1-C6油气化工防爆轮式巡检机器人

Ex1系列防爆轮式巡检机器人整机采用防爆设计,防爆等级为Exd II CT4 Gb。机器人通过无轨3D形态导航技术,结合360度防爆云台和无线防爆充电桩,实现整套防爆标准,可广泛应用于石油、燃气、化工、冶金等II类爆炸环境中,代替…

设计模式:建造者模式

目录 一,概念 二,不使用建造者有什么麻烦 三,格式 一,概念 建造者模式(Builder Pattern)是一种创建型设计模式,用于将复杂对象的构建与其表示分离,以便同样的构建过程可以创建不同…

大模型公开可用的模型检查点或 API

文章目录 公开可用的模型检查点或 APILLaMA 变体系列大语言模型的公共 API 公开可用的模型检查点或 API 众所周知,大模型预训练是一项对计算资源要求极高的任务。因此,经过预训练的公开模型检查点(Model Checkpoint)对于推动大语言…

nginx封禁恶意IP

网络攻击时有发生 TCP洪水攻击、注入攻击、DOS等比较难防的有DDOS等 为了数据安全,防止对手爬虫恶意爬取,封禁IP 一般封禁ip linux server层面封IP:iptablesnginx层面封IP,方式多种(但req还是会打进来,让…

21-ESP32-S3实时时钟(RTC)

ESP32-S3实时时钟(RTC)的使用 ESP32-S3是一款高性能的Wi-Fi和蓝牙集成的系统级芯片(SoC),它包含一个实时时钟(RTC)模块,可以在系统的其他部分关闭时继续运行,以节省电能…

IDEA 申请学生许可证

如果你有学生账号,并且账号是 EDU 结尾的,可以申请 IDEA 的学生许可证。 有效期一年,完全免费。 在界面上输入邮件地址,然后单击按钮提交。 邮件中单击链接 JetBrains 会把一个带有链接的邮件发送到你的邮箱中。 单击邮箱中的…

Flask知识点汇总表格总结

最近接手的Python项目有两个,一个是Django项目,一个是Flask项目,Django昨天做了一个比较全面的总结,今天再就Flask做一个知识总结。我这相当于是项目驱动学习类型。 Flask是一个轻量级的Python Web应用框架,它被设计为…

智能数据分析平台待修复BUG以及待完成需求

快速跳转:何耳林毕设项目介绍-CSDN博客 BUG 1.个人图标页搜索功能,不能进行搜索 2.用户管理功能头部搜索栏有多余搜索项 3.修改用户权限等信息会影响当前管理用户 待完成需求 1.新增AI问答功能 2.图标页自动刷新功能 3.将个人页更改到头像下拉框&…

分类规则挖掘(三)

目录 四、贝叶斯分类方法(一)贝叶斯定理(二)朴素贝叶斯分类器(三)朴素贝叶斯分类方法的改进 五、其它分类方法 四、贝叶斯分类方法 贝叶斯 (Bayes) 分类方法是以贝叶斯定理为基础的一系列分类算法的总称。贝…