第三百五十九回

文章目录

  • 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,///可以添加任意的组件,这里添加的是iconchild: 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(///显示内容的大小,默认48itemSize: 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组件"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!

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

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

相关文章

学习鸿蒙基础(4)

1.条件渲染 ArkTS提供了渲染控制的能力。条件渲染可根据应用的不同状态,使用if、else和else if渲染对应状态下的UI内容。 当if、else if后跟随的状态判断中使用的状态变量值变化时,条件渲染语句会进行更新。。 Entry Component struct PageIfElse {Stat…

【C++杂货铺】模板

🌈前言🌈 欢迎观看本期【C杂货铺】,本期内容将讲解模板的初阶,即了解模板,熟练掌握模板的使用方法,了解模板的工作原理等内容。 📁 函数模板 📂 概念 函数模板代表了一个函数家族&am…

typescript 对象的属性定义

const ENUM_MAP_LIST: IMapListType {jf: {iconname: iconfont icon-wodejifen,color: #F3A31E,name: mypoint,number: 123,text: "我的积分",url: /integral/rtre,},px: {iconname: iconfont icon-wodeRdeIun,name: mytrain,color: #4285F4,number: 223,text: &qu…

如何在Windows系统中检测和结束运行中的程序(任务管理器显示运行程序可能有bug)

如何在Windows系统中检测和结束运行中的程序 在Windows系统的日常使用和管理过程中,我们经常需要检测某个程序是否正在运行,并在必要时结束它。本文将详细介绍如何在Windows系统中检测运行中的程序,并提供多种方法来结束这些程序。 检测运行…

通俗易懂的双亲委派机制

当你超过别人一点点,别人会嫉妒你;当你超过别人一大截,别人就会羡慕你 据说给我点关注的都成了大佬,点关注的我都会私发一份好东西 ​​​​你得先知道 在介绍双亲委派机制的时候,不得不提ClassLoader(类…

Java字符串转整数的超简单方法!

推荐阅读 智能化校园:深入探讨云端管理系统设计与实现(一) 智能化校园:深入探讨云端管理系统设计与实现(二) 问题描述 当你把一个字符串值和一个整数加在一起而不进行任何形式的转换时会发生什么呢&#…

聚合支付,聚合系统,聚合程序或将成为主流

支付市场的变化对用户、代理商和运营商产生了重大影响。 随着政策监管的日益严格,支付行业逐渐朝着标准化和合理化的方向发展,日益增强其安全性。在这个背景下,聚合平台已经成为未来支付行业发展的重要趋势。特别是在“一机一码”政策实施后&…

前端进度条组件NProgress

nprogress 安装 npm install --save nprogress使用 import NProgress from nprogress // 引入nprogress插件 import nprogress/nprogress.css // 这个nprogress样式必须引入// axios请求拦截器 axios.interceptors.request.use(config > {NProgress.start() // 设置加载进…

【学习心得】编程小白该如何学好C语言(✨新手推荐阅读)

前言 对于刚刚踏入编程领域的小白来说,C语言可能是一个既神秘又充满挑战的领域。但只要你掌握了正确的学习方法,C语言的学习之旅也可以是充满乐趣和成就感的。 一、明确学习目标 对于初学者来说,明确学习目标是学好C语言的第一步。一个清晰…

BIG DATA —— 大数据时代

大数据时代 [英] 维克托 迈尔 — 舍恩伯格 肯尼斯 库克耶 ◎ 著 盛杨燕 周涛◎译 《大数据时代》是国外大数据研究的先河之作,本书作者维克托迈尔舍恩伯格被誉为“大数据商业应用第一人”,他在书中前瞻性地指出,大数据带来的信息…

扩散模型+轨迹预测

目录 1. 基础知识2. 轨迹预测相关2.1 Leapfrog Diffusion Model2.2 MID2.3 中科院2.4 DICE2.5 MotionDiffuser2.6 DiffTraj 3. 练手时可参考4. 扩展:扩散模型RL 1. 基础知识 Stable diffusion扩散模型相关 Diffusion相关二 Diffusers是hugging face发起的用于专门…

springsecurity框架笔记

<center>springsecurity框架笔记</center> springsecurity优点&#xff1a; 1、易于理解的java Security Api 2、简单的身份认证&#xff08;登录&#xff09;&#xff0c;支持多种数据源&#xff08;LDAP,JDBC,KERBEROS) 3、对角色的简单授权&#xff08;访问…

Vue3引用第三方模块报错Could not find a declaration file for module ***.

在引用第三方的组件时候报错如下 原因是&#xff1a;该组件可能不是.ts文件而是.js文件 解决方案&#xff1a; 1.在Src的目录下面新建一个文件为shims-vue.d.ts的文件 2.文件内容为 declare module xxx&#xff0c;xxx就是你报错的模块 例如我这样 declare module vue3-pu…

Vue常用指令+用法举例 详解

vue的常用指令有&#xff1a;vue常用指令有&#xff1a;v-on指令、v-model指令、v-once指令、v-show指令、v-if指令、v-else指令、v-else-if指令、v-for指令、v-text指令、v-html指令、v-bind指令等等。 1.v-on v-on 事件绑定指令&#xff0c;用来辅助程序员为DOM 元素绑定事件…

数据结构好文集合

1.哈希表 https://blog.csdn.net/weixin_46195957/article/details/125298629 2.红黑树 https://www.cnblogs.com/crazymakercircle/p/16320430.html#autoid-h2-5-2-0

2189. 有源汇上下界最大流(最大流上,下界可行流,模板题)

活动 - AcWing 给定一个包含 n 个点 m 条边的有向图&#xff0c;每条边都有一个流量下界和流量上界。 给定源点 S 和汇点 T&#xff0c;求源点到汇点的最大流。 输入格式 第一行包含四个整数 n,m,S,T。 接下来 m 行&#xff0c;每行包含四个整数 a,b,c,d 表示点 a 和 b 之…

单片机03--按键--寄存器版

GPIO端口相关寄存器&#xff08;STM32F40x芯片&#xff09; 目标&#xff1a; 开关KEY1控制开灯。 分析&#xff1a; KEY1---PA0--->输入---->浮空输入/下拉输入 KEY1不导通时&#xff0c;PA0输入为低电平&#xff0c;KEY1导通时&#xff0c;PA0输入为高电平。 实现…

【Unity】双击txt文件以记事本形式(文本文档)打开

在Unity工程任意Editor文件夹下创建C#脚本&#xff1a;CustomAssetHandler using UnityEngine; using UnityEditor; using UnityEditor.Callbacks;public class CustomAssetHandler {[OnOpenAssetAttribute(1)]public static bool step1(int instanceID, int line){string pat…

Vue中 Runtime-Only和Runtime + Compiler的区别

在 Vue 项目中&#xff0c;Runtime-Only 和 Runtime Compiler 是两种不同的构建方式。 Runtime-Only&#xff08;仅运行时&#xff09;&#xff1a;在 Runtime-Only 构建中&#xff0c;Vue 库只包含运行时的代码&#xff0c;不包含模板编译器。。Runtime Compiler&#xff08…

SpringBoot异步任务获取HttpServletRequest

前言 在使用框架日常开发中需要在controller中进行一些异步操作减少请求时间&#xff0c;但是发现在使用Anysc注解后会出现Request对象无法获取的情况&#xff0c;本文就此情况给出完整的解决方案 原因分析 Anysc注解会开启一个新的线程&#xff0c;主线程的Request和子线程…