第三百五十八回

文章目录

  • 1. 概念介绍
  • 2. 使用方法
  • 3. 代码与效果
    • 3.1 示例代码
    • 3.2 运行效果
  • 4. 内容总结 013pickers2.gif

我们在上一章回中介绍了"如何实现Numberpicker"相关的内容,本章回中将介绍wheelChoose组件.闲话休提,让我们一起Talk Flutter吧。

在这里插入图片描述

1. 概念介绍

我们在本章回中介绍的wheelChooser是一个三方包,它除了像NumberPicker一样创建数字选择功能外,它可以选择其它的组件当作被选择的对象,相当于在选择数字
功能的基础上做了扩展,它扩展了被选择内容的范围。我们将在本章回中详细介绍该组件的使用方法。

2. 使用方法

和其它的组件一样WheelChooser组件提供了相关的属性来控制自己,下面是常用的属性。

  • datas属性:该属性是数组类型,数组中的值就是被选择的值,因此它用来控制选择数值的范围;
  • horizontal属性:用来控制选择的方向,分水平垂直两个方向;
  • onValueChanged属性:该属性是方法类型,选择某个数值时会回调该属性对应的方法;
  • isInfinite属性:该属性用来控制是否循环显示被选择的内容;
    除了这些属性外,该组件还提供了一些工厂方法,通过工厂方法快速创建被选择的内容,比如WheelChooser.number()可以快速创建数字选择器,我们将在稍后的小节
    中通过示例代码来演示如何使用这些工厂方法。

3. 代码与效果

3.1 示例代码

WheelChooser(
  ///控制滑动方向
  horizontal: true,
  ///使用装饰可以在选择的内容上方和下方显示一条横线
  selectTextStyle:TextStyle(
    ///单独使用和复合使用装饰
    // decoration: TextDecoration.overline,
    decoration: TextDecoration.combine([TextDecoration.underline,TextDecoration.overline]),
  ) ,
  ///是否循环显示
  isInfinite: true,
  onValueChanged: (s) => debugPrint('$s selected'),
  datas: [0,1,2,3,34,5,6,7,8,9],
),

///使用工厂方法,可以创建任意的选择器
SizedBox(
  height: 150,
  ///可以添加任意的组件,这里添加的是icon
  child: WheelChooser.custom(
    onValueChanged: (value) {},
    isInfinite: true,
    children: const [
      Icon(Icons.looks_3,size: 36,),
      Icon(Icons.looks_two,size: 36,),
      Icon(Icons.looks_one,size: 36,),
    ]),
),
///使用两种工厂方法实现数字选择器
SizedBox(
  ///通过控制容器的大小,可以控制显示被选择内容的范围
  height: 100,
  child: WheelChooser.integer(
    ///显示内容的大小,默认48
    itemSize: 50,
    horizontal: true,
    isInfinite: true,
    onValueChanged: (value) => debugPrint('$value'),
    maxValue: 3,
    minValue: 0,
  ),
),
SizedBox(
  height: 100,
  child: WheelChooser.number(
    isInfinite: true,
    onValueChanged: (value) => debugPrint('$value'),
    maxValue: 3,
    minValue: 0,
  ),
),
///可以选择任意对象当作被选择对象,因为value是泛型
SizedBox(
  height: 200,
  child: WheelChooser.choices(
   isInfinite: true,
    onChoiceChanged: (value) {},
    choices:[
      WheelChoice(value: 1, title: 'one'),
      WheelChoice(value: 2, title: 'tow'),
      WheelChoice(value: 3, title: 'three'),
    ]
  ),
),

3.2 运行效果

我们在上面的示例代码中演示了wheelChooser的基本用法,同时演示了其它工厂方法的使用方法,编译并且运行上面的程序,可以得到以下的运行效果图:

4. 内容总结 013pickers2.gif

最后,我们对本章回的内容做一个全面的总结:(博客中有两个同名的文章,第一个是错误的,第二个是正确的)

  • wheelChooser是三主包中提供的组件,它可以实现数字选择功能;
  • wheelChooser扩展了选择范围,不只是数字,其它的组件也可以被选择;
  • whellChooser提供了很多工厂方法,通过工厂方法可以快速创建相关的选择器;
    看官们,与"wheelChooser组件"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

ChatGPT丨成像光谱遥感技术中的AI革命:ChatGPT应用指南

遥感技术主要通过卫星和飞机从远处观察和测量我们的环境,是理解和监测地球物理、化学和生物系统的基石。ChatGPT是由OpenAI开发的最先进的语言模型,在理解和生成人类语言方面表现出了非凡的能力。本课程重点介绍ChatGPT在遥感中的应用,人工智…

解决弹性布局父元素设置高自动换行,子元素均分高度问题(align-content: flex-start)

案例&#xff1a; <view class"abc"><view class"abc-item" v-for"(item,index) in 8" :key"index">看我</view> </view> <style lang"less">.abc{height: 100px;display: flex;flex-wrap: …

[ Python+OpenCV+Mediapipe ] 实现对象识别

一、写在前面 本文所用例子为个人学习的小结&#xff0c;如有不足之处请各位多多海涵&#xff0c;欢迎小伙伴一起学习进步&#xff0c;如果想法可在评论区指出&#xff0c;我会尽快回复您&#xff0c;不胜感激&#xff01; 所公布代码或截图均为运行成功后展示。 二、本文内容…

【设计模式】使用适配器模式做补偿设计

文章目录 1.概述2.两种适配器模式2.1.类适配器2.2.对象适配器 3.总结 1.概述 适配器模式是一种结构型设计模式&#xff0c;它提供了一个中间层&#xff0c;通过这个中间层&#xff0c;客户端可以使用统一的接口与具有不同接口的类进行交互&#xff0c;也就是说&#xff0c;将一…

Sora横空出世!AI将如何撬动未来?

近日&#xff0c;OpenAI 发布首个视频生成“Sora”模型&#xff0c;该模型通过接收文字指令&#xff0c;即可生成60秒的短视频。 而在2022年末&#xff0c;同样是OpenAI发布的AI语言模型ChatGPT&#xff0c;简化了文本撰写、创意构思以及代码校验等任务。用户仅需输入一个指令&…

1.30数据包络法

数据包络分析法&#xff08;Data Envelopment Analysis&#xff0c;DEA&#xff09;是一种非参数的效率评价方法&#xff0c;用于衡量相对效率和评估多个决策单元&#xff08;DMU&#xff09;的绩效。 在数据包络分析中&#xff0c;每个决策单元都是一个输入和输出数据向量的组…

[Angular 基础] - service 服务

[Angular 基础] - service 服务 之前的笔记就列举三个好了……没想到 Angular 东西这么多(&#xff70; &#xff70;;)……全加感觉越来越凑字数了 [Angular 基础] - 视图封装 & 局部引用 & 父子组件中内容传递 [Angular 基础] - 生命周期函数 [Angular 基础] - 自…

Android T 远程动画显示流程其二——动画的添加流程(更新中)

前言 接着上篇文章分析 Android T 远程动画显示流程其一 切入点——处理应用的显示过渡 下面&#xff0c;我们以从桌面点击一个应用启动的场景来分析远程动画的流程&#xff0c;窗口添加的流程见Android T WMS窗口相关流程 这里我们从AppTransitionController.handleAppTran…

量子加密机的工作原理是什么

量子加密机&#xff0c;作为现代加密技术的一大飞跃&#xff0c;正逐渐成为信息安全领域的研究热点。与传统的加密方法相比&#xff0c;量子加密技术以其独特的优势&#xff0c;为信息安全提供了更为坚实的保障。 量子加密的核心在于利用量子力学的特性&#xff0c;尤其是量子纠…

sizeof()的易错点

你也可以传入一个变量的名字&#xff08;而不只是类型&#xff09;给 sizeof()&#xff0c;但在一些情况下&#xff0c;可能得不到你要的结果&#xff0c;所以要小心使用。例如&#xff0c;看看下面的代码片段&#xff1a; 在第一行&#xff0c;我们为 10 个整数的数组声明了空…

LInux-信号1

文章目录 前言一、信号是什么&#xff1f;二、学习步骤使用kill -l命令查看信号列表可以看到有那么多信号&#xff0c;那么进程是如何识别这么多信号的呢&#xff1f; 使用kill命令终止进程信号的捕捉kill函数raise函数abort函数 Core dump如何查看自己的核心转储功能是否被打开…

C++运算符重载、迭代器、继承、派生类的构造与析构、重载、隐藏和覆盖

运算符重载 普通的C运算符重载成员方法基本都知道&#xff0c;如果没有定义成员方法&#xff0c;那么编译器会优先寻找全局重载运算符看看是否匹配。这里给出了一个使用友元函数和全局重载运算符来实现整数与复数类对象的相加运算。 #include <iostream>class Complex …

Flink双流(join)

一、介绍 Join大体分类只有两种&#xff1a;Window Join和Interval Join Window Join有可以根据Window的类型细分出3种&#xff1a;Tumbling(滚动) Window Join、Sliding(滑动) Window Join、Session(会话) Widnow Join。 &#x1f338;Window 类型的join都是利用window的机制…

蜂鸣器实验

1.有源蜂鸣器简介 蜂鸣器常用于计算机、打印机、报警器、电子玩具等电子产品中&#xff0c;常用的蜂鸣器有两种&#xff1a; 有源蜂鸣器和无源蜂鸣器&#xff0c;这里的有“源”不是电源&#xff0c;而是震荡源&#xff0c;有源蜂鸣器内部带有震荡 源&#xff0c;所以有源蜂…

OD(8)之Mermaid流程图(flowcharts)使用详解

OD(8)之Mermaid流程图(flowcharts)使用详解 Author: Once Day Date: 2024年2月20日 漫漫长路才刚刚开始… 全系列文章可参考专栏: Linux实践记录_Once_day的博客-CSDN博客 参考文章: 关于 Mermaid | Mermaid 中文网 (nodejs.cn)Mermaid | Diagramming and charting tool‍…

Maven 私服 Nexus3

一、Maven和Nexus3 简介 Maven是一个采用纯Java编写的开源项目管理工具&#xff0c;采用一种被称之为Project Object Model(POM)概念来管理项目&#xff0c;所有的项目配置信息都被定义在一个叫做POM.xml的文件中, 通过该文件Maven可以管理项目的整个生命周期&#xff0c;包括…

maven 打包命令

Maven是基于项目对象模型(POM project object model)&#xff0c;可以通过一小段描述信息&#xff08;配置&#xff09;来管理项目的构建&#xff0c;报告和文档的软件项目管理工具。 Maven的核心功能便是合理叙述项目间的依赖关系&#xff0c;通俗点讲&#xff0c;就是通过po…

06 分频器设计

分频器简介 实现分频一般有两种方法&#xff0c;一种方法是直接使用 PLL 进行分频&#xff0c;比如在 FPGA 或者 ASIC 设计中&#xff0c;都可以直接使用 PLL 进行分频。但是这种分频有时候受限于 PLL 本身的特性&#xff0c;无法得到频率很低的时钟信号&#xff0c;比如输入 …

Predis Multi-Zone

A Data Flow Framework with High Throughput and Low Latency for Permissioned Blockchains 联盟链的吞吐瓶颈由共识层和网络层的数据分发过程共同决定。 Predis 协议利用了共识节点的空闲带宽&#xff0c;提前分发区块中的内容即bundle&#xff0c;减少了共识区块中的内容&…

2024龙年特别篇 -- 魔法指针 之 assert断言 传址调用 传值调用

你是否为 assert断言&#xff0c;传址调用&#xff0c;传值调用而进一步加深印象&#xff0c;接下来就让白子寰同学为你详细讲解&#xff01;&#xff01;&#xff01; 目录 assert断言 概念 assert介绍 #define NDEBUG的使用 注意事项 传值调用 VS 传址调用 传值调用…