第二百三十四回

文章目录

  • 1.概念介绍
  • 2.使用方法
    • 2.1 NumberPicker
    • 2.2 CupertinoPicker
  • 3.示例代码
  • 4.内容总结

我们在上一章回中介绍了"如何在任意位置显示PopupMenu"相关的内容,本章回中将介绍如何实现NumberPicker.闲话休提,让我们一起Talk Flutter吧。

1.概念介绍

我们在本章回中介绍的Numberpicker主要用来实现数字选择功能,比如选择年月日,当然也可以使用YearPicker实现,不过YearPicer是把年月日当作一个整体来
选择,在界面上同时显示年月日三个选项,如果只想选择其中的某一个,而不显示其它选项,那么它就无能为力,因为该组件不支持这样去设置。那么我们该如何实现这样
的功能呢?答案是使用Numberpicker组件,或者CupertinoPicker组件。它们可以把年月日当作数字并且进行单独显示,本章回中将详细介绍这两个组件的使用方法。

2.使用方法

2.1 NumberPicker

和其它组件一样NumberPicker组件提供了相关的属性来控制自己,接下来我们将介绍该组件中常用的属性,掌握这些属性后就可以使用该组件了。

  • maxValue属性:用来控制picker中可以选择的最大数值;
  • minValue属性:用来控制picker中可以选择的最小数值;
  • value属性:用来控制picker中当前选择的数值;
  • step属性:用来控制picker滚动时的步进值,默认值为1;
  • axis属性:用来控制选择的方向,分水平垂直两个方向;
  • onChanged属性:该属性是方法类型,选择某个数值时会回调该属性对应的方法;

2.2 CupertinoPicker

除了NumberPicker可以实现数字选择功能外,CupertinoPicker组件也可以实现同样的功能,接下来我们介绍一下该组件的常用属性。

  • backgroundColor属性:主要用来控制选择器的背景颜色;
  • itemExtent属性:主要用来控制被选择内容的数量;
  • onSelectedItemChanged属性:该属性是方法类型,选择某个数值时会回调该属性对应的方法;
  • children属性:该属性是’List'类型,主要用来存放被选择的内容;

3.示例代码

NumberPicker(///这个是当前选择的值value: _selectedValue,itemCount: 3,itemHeight: 60,decoration: BoxDecoration(border:Border.all(color: Colors.redAccent,width: 3,),borderRadius: BorderRadius.circular(15),),///设置picker方向axis: Axis.vertical,///是否启用振动,默认不启用// haptics: true,///循环显示infiniteLoop: true,///设置值的范围maxValue: 9,minValue: 0,step: 1,///不修改数值的话,选择内容不在选择框架内onChanged: (value){setState(() {_selectedValue = value;});},
),
child: CupertinoPicker(///设置整个Picker的颜色backgroundColor: Colors.purpleAccent,itemExtent: 48,///选择某个内容时回调此方法onSelectedItemChanged: (int value) {debugPrint('item $value is selected');},///最好设置为true,不然会发生选项重叠的现象looping: true,children: [...List.generate(5, (index) => SizedBox(width:60,height:48,child: Text('item ${index+1}')),),],
),

在上面的代码中,我们提供了NumberPicker和CupertinoPicker两个组件的示例代码,代码中添加了相关的注释,这样方便大家理解代码。把上面的示例代码放到
某个页面中后就可以运行了,下面是程序的运行效果图。图中上方紫色背景的选择器是CupertinoPicker组件,下面的灰色背景的选择器是NumberPicker组件。

4.内容总结

最后,我们对实现数字选择功能的这两个组件做一个总结,主要包含它们的相同点和不同点:

  • NumberPicker组件和CupertinoPicker组件都可以实现数字选择器;
  • NumberPicker只有选择数字,CupertinoPicker可以选择任意的组件;
  • NumberPicker由三方包提供,CupertinoPicker是官方包中自带的组件;
    看官们,与"如何实现Numberpicker"相关的内容就介绍到这里。此外,我还有一个疑问:NumberPicker也算是比较实用的组件,而且Android中自带该组件,为什
    么Flutter官方不提供这样的组件呢?欢迎大家在评论区交流与讨论。

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

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

相关文章

《Spring Cloud学习笔记:分布式事务Seata》

1.分布式事务理论基础 1.1.本地事务 本地事务,也就是传统的单机事务,在传统的数据库事务中,必须要满足ACID四个原则: 1.2.分布式事务 分布式事务,就是指不是在单个服务或单个数据库架构下产生的事务。 分布式事务是…

Java解决统计有序矩阵中的负数问题

Java解决统计有序矩阵中的负数问题 01 题目 给你一个 m * n 的矩阵 grid,矩阵中的元素无论是按行还是按列,都以非递增顺序排列。 请你统计并返回 grid 中 负数 的数目。 示例 1: 输入:grid [[4,3,2,-1],[3,2,1,-1],[1,1,-1,-…

状态模式-举例

在软件系统中,有些对象也像水一样具有多种状态, 这些状态在某些情况下能够相互转换, 而且对象在不同的状态下也将具有不同的行为。 参考日志来设置状态。 如何判断一个设计模式是行为模式还是什么其他模式? 什么叫行为模式&#…

蓝桥圣诞树(C++)

问题描述 输入样例: 1 3 101 1 2 2 3 输出样例: YES 思路: 这道题还是比较好想的,因为它构造的二叉树是用边连接起来的,不是像之前一样从上到下从左到右按编号构造的,所以可以用邻接表来存每个点还有边&am…

[spark] 将dataframe中的数据插入到mysql

文章目录 分区写入 foreachPartition直接写入 write.jdbc()有没有插入成功在插入时记录行数 累加器 分区写入 foreachPartition 在Spark中,你可以使用foreachPartition或foreach来将DataFrame中的数据插入到MySQL数据库。以下是一个基本的Scala代码示例&#xff0c…

模板 BIEE (一):模板插入数据遇到的问题和解决方案

1 说明 1.1 环境 BIEE: Oracle Business Intelligence Enterprise Edition(Oracle商业智能企业版) 版本: OBIEE 12c Server 版本: 基于Oracle Analytics Server 6.4.0 版本 模板: 制造→生产成本→按前 10 个 GL 帐户列出的生产成本 1.2 问题 不熟悉Tools根据已插入的…

一个用于并发批量执行大量关键字的robot framework库。

这个库用于并发批量执行大量robot framework关键字。从而缩短案例执行时间。 使用concurrent.futures.ProcessPoolExecutor进程池并发执行同一个robot framework关键字很多次。 源代码如下: import concurrent.futuresfrom robot.libraries.BuiltIn import Built…

腾讯云价格计算器,一键计算精准报价,好用!

腾讯云价格计算器:可以计算腾讯云服务器不同CVM实例规格、CPU内存、公网带宽和系统盘费用明细表,可以一键计算出精准报价明细表,腾讯云服务器网txyfwq.com分享大家腾讯云服务器价格计算器入口链接、使用方法及限制说明: 腾讯云服…

网络攻击之-暴力破解/密码喷射流量告警运营分析篇

本文从暴力破解/密码喷射的定义,暴力破解/密码喷射的流量数据包示例,暴力破解/密码喷射的suricata规则,暴力破解/密码喷射的告警研判,暴力破解/密码喷射的处置建议等几个方面阐述如何通过IDS/NDR,态势感知等流量平台的暴力破解/密码喷射类型的告警的线索,开展日常安全运营…

【SD】语法格式 分析

正确语法&#xff1a; //人物 best quality,masterpiece,solo,1boy,male focus, //人物形容 blue long hair,katana,muscular,fingerlessgloves,samurai,japanese armor,chibi,full body,blood, //背景 模型 red background,<lora:CHIBI:0.35>, 错误语法&#…

D. Unnatural Language Processing

题目&#xff1a; D. Unnatural Language Processing 每次测试的时间限制1秒钟 每次测试的内存限制256兆字节 投入标准输入 输出标准输出 露拉觉得很无聊&#xff0c;决定用这五个字母创造一种简单的语言a, b, c, d, e。有两种类型的信件: 元音—信件a和e。他们由以下人员代表…

Python 操作 MySQL:使用 mysql-connector-python 操作 MySQL 数据库

大家好&#xff0c;我是水滴~~ 当涉及到使用 Python 操作 MySQL 数据库时&#xff0c;mysql-connector-python 库是一个强大而常用的选择。该库提供了与 MySQL 数据库的交互功能&#xff0c;使您能够执行各种数据库操作&#xff0c;如连接数据库、执行查询和插入数据等。在本文…

第十一章 Stream消息驱动

Stream消息驱动 gitee:springcloud_study: springcloud&#xff1a;服务集群、注册中心、配置中心&#xff08;热更新&#xff09;、服务网关&#xff08;校验、路由、负载均衡&#xff09;、分布式缓存、分布式搜索、消息队列&#xff08;异步通信&#xff09;、数据库集群、…

maven命令行安装依赖测试

mvn dependency:get -DgroupIdorg.springframework -DartifactIdspring-core -Dversion5.3.9作用&#xff1a;可用于测试配置环境变量后&#xff0c;能否下载依赖到本地仓库

前后端分离架构的特点以及优缺点

文章目录 一、前后端不分离架构(传统单体结构)1.1 什么是前后端不分离1.2 工作原理1.3 前后端不分离的优缺点1.4 应用场景 二、前后端分离架构2.1 为什么要前后端分离2.2 什么是前后端分离2.3 工作原理2.4 前后端分离的优缺点 参考资料 一、前后端不分离架构(传统单体结构) 首…

【linux】cut的基本使用

cut主要用于按列切分文本行&#xff0c;并输出指定的字段&#xff0c;这是类unix系统中常用的文本处理工具。 基本使用 首先随便去网上找个文本或者列表文件 如果使用cat看文本的话就是这样的 sh-3.2# cat data.csv Name,Age,City,Salary Alice,30,New York,70000 Bob,25,L…

C++ 侯捷 内存管理

C 的内存获取机制&#xff1a; void* p1 malloc(512); free(p1);complex<int>* p2 new complex<int>; delete p2;void* p3 ::operator new(512); ::operator delete(p3);//GNUC void* p4 alloc::allocate(512); alloc::deallocate(p4, 512);//GNUC4.9 void* p5…

Hbase详解

Hbase 概念 base 是分布式、面向列的开源数据库&#xff08;其实准确的说是面向列族&#xff09;。HDFS 为 Hbase 提供可靠的底层数据存储服务&#xff0c;MapReduce 为 Hbase 提供高性能的计算能力&#xff0c;Zookeeper 为 Hbase 提供稳定服务和 Failover 机制&#xff0c;…

OR-NeRF论文笔记

OR-NeRF论文笔记 文章目录 OR-NeRF论文笔记论文概述Abstract1 Introduction2 Related Work3 Background4 Method4.1 Multiview Segmentation4.2 Scene Object Removal 5 ExperimentsDatasetsMetricsMultiview SegmentationScene Object Removal 6 Conclusion 论文概述 目的&am…

Redis 笔记

文章目录 安装 & 启动杂乱String字符串 key-valueList 有序重复列表Set 无序不重复列表SortedSet 有序集合Hash 哈希Stream 消息队列订阅模式 学习地址&#xff1a;https://www.bilibili.com/video/BV1Jj411D7oG/ 安装 & 启动 安装包地址&#xff1a; https://github.…