第三百八十回

news2024/9/27 12:06:19

文章目录

  • 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组件"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!

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

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

相关文章

文件操作命令touch、cat、more、cp、mv

touch 创建文件 1)可以通过touch命令创建文件。 2)语法: touch Linux路径 3)touch命令无选项,参数必填,表示要创建的文件路径,相对、绝对、特殊路径符均可以使用。 注:以 d 开头的…

Apache POI的简单介绍与应用

介绍 Apache POI 是一个处理Miscrosoft Office各种文件格式的开源项目。我们可以使用 POI 在 Java 程序中对Miscrosoft Office各种文件进行读写操作。PS: 一般情况下,POI 都是用于操作 Excel 文件,如图: Apache POI 的应用场景&…

韦东山嵌入式Liunx入门驱动开发五

文章目录 一、驱动程序基石1-1 休眠与唤醒1-2 POLL机制1-3 异步通知(1) 异步通知程序解析(2) 异步通知机制内核代码详解 1-4 阻塞与非阻塞1-5 定时器(1) 内核函数(2) 定时器时间单位 1-6 中断下半部 tasklet 本人学习完韦老师的视频,因此来复习巩固,写以…

【web | CTF】BUUCTF [HCTF 2018]WarmUp

天命&#xff1a;这题本地php代码是无法复现的 首先打开网站&#xff0c;啥也没有&#xff0c;查看源码 发现文件&#xff0c;打开访问一下看看&#xff0c;发现是代码审计 <?phphighlight_file(__FILE__);class emmm{public static function checkFile(&$page){$whit…

IOS 发布遇到“Unable to authenticate with App Store Connect”错误咋解决?

问题&#xff1a; 在开发ios app后&#xff0c;先发布adhoc版本&#xff0c;测试通过后&#xff0c;再发布testflight版本测试&#xff0c;但是可能会遇到一下问题。 解决办法&#xff1a; 在Signing &Capabilities中&#xff0c;在ios下边要指定有发布权限的Team账号&a…

文件底层的理解之缓冲区

目录 一、缓冲区的初步认识 二、向文件中写数据的具体过程 三、缓冲区刷新的时机 一、缓冲区的初步认识 缓冲区其实就是一块内存区域&#xff0c;采用空间来换时间&#xff0c;可以提高使用者的效率。我们一直说的缓冲区其实是语言层面上的缓冲区&#xff0c;其实操作系统内部…

黑马点评-商户查询业务

缓存原理 本文的业务就是redis的经典应用&#xff0c;标准的操作方式就是查询数据库之前先查询缓存&#xff0c;如果缓存数据存在&#xff0c;则直接从缓存中返回&#xff0c;如果缓存数据不存在&#xff0c;再查询数据库&#xff0c;然后将数据存入redis。 缓存更新策略 根据…

iMazing 3.0.0.3 for mac 中文破解版2024最新图文安装教程

我们刚刚发布了iMazing 3.0.0.3 for mac 中文版本。Windows和macOS用户现在都可以试驾并体验iPhone管理的未来。 备受期待的第一个Windows版本得益于过去几个月macOS测试版的所有改进&#xff0c;使其成为一个稳定的初始版本。 我们的开发团队创造了一种无缝的外观和体验&#…

sql 注入 之sqli-labs/less-6 双注入,双引号报错注入

和第五关类似&#xff0c;只不过闭合符号是双引号 1&#xff0c;查数据库 1"and%20(updatexml(1,concat(0x7e,(select%20database()),0x7e),1))%20-- 2.查表 内容有多行&#xff0c;所以使用limit依次查询 1"and%20(updatexml(1,concat(0x7e,(select%20table_nam…

Spring中的数据校验---JSR303

介绍–什么是JSR303 JSR 303是Java中的一项规范&#xff0c;用于定义在Java应用程序中执行数据校验的元数据模型和API。JSR 303的官方名称是"Bean Validation"&#xff0c;它提供了一种在Java对象级别上执行验证的方式&#xff0c;通常用于确保输入数据的完整性和准…

app软件开发的费用大约多少

现在手机的用户在增多&#xff0c;大部分的人都是通过手机软件去操作完成的东西比较多&#xff0c;所以导致现在的流量都在手机端。那么不管是电脑端还是手机端都是在同时发展的&#xff0c;使用电脑的人群只是倾向在了工作人群&#xff0c;而手机的流量大部分是来自于生活中。…

HarmonyOS—配置编译构建信息

在进行应用/服务的编译构建前&#xff0c;需要对工程和编译构建的Module进行设置。API Version 9、API Version 8与API Version 4~7的构建体系不同&#xff0c;因此在设置编译构建信息时也存在差异&#xff1a; API Version 9&#xff1a;需要对构建配置文件、构建脚本、应用依…

Springboot+vue的考勤管理系统(有报告)。Javaee项目,springboot vue前后端分离项目。

演示视频&#xff1a; Springbootvue的考勤管理系统&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot vue前后端分离项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层…

边缘计算网关的重要作用-天拓四方

随着物联网技术的迅猛发展&#xff0c;数据量的爆炸式增长对数据处理和分析提出了更高的要求。边缘计算网关作为连接物理世界和数字世界的桥梁&#xff0c;正逐渐受到各行业的重视。本文将从行业背景、功能特点以及带来的效益等方面&#xff0c;探讨边缘计算网关在当前及未来的…

HTML中自定义鼠标右键菜单

今天突然有人跟我提到了HTML中如何自定义鼠标右键菜单&#xff0c;这里大概记录一下吧&#xff0c;方便下次直接复制。免得还去看API文档。 文章目录 HTML中自定义鼠标右键菜单结果如下所示可以稍微改一下鼠标悬浮到右键菜单时的样式结果如下所示 只在某个特定的div才可以显示…

来不及了!大学必须完成的四件事!

老师们常说&#xff0c;上大学就轻松了 其实不然 大学不是人生的终点&#xff0c;而是新的起跑线 不是休息站&#xff0c;而是进入社会的最后冲刺跑道 大学生活苦乐参半&#xff0c;成人世界即将来临 出了校门&#xff0c;你会发现社会复杂多变&#xff0c;需要不断学习 稍…

C++之结构体以及通讯录管理系统

1&#xff0c;结构体基本概念 结构体属于自定义的数据概念&#xff0c;允许用户存储不同的数据类型 2&#xff0c;结构体的定义和使用 语法&#xff1a;struct 结构体名{ 结构体成员列表}&#xff1b; 通过结构体创建变量的方式有三种&#xff1a; 1&#xff0c;struct …

在Jupyter-lab中使用RDKit画分子2D图

在Jupyter-lab中使用RDKit画分子2D图 在做完分子对接后&#xff0c;想看看筛选后的分子的结构。因此想利用Jupyter-lab来画分子的2D图。 1. 安装Jupyter-lab与RDKit 系统&#xff1a;Win11已安装conda RDKit 是一个功能强大、灵活易用的化学信息学工具包&#xff0c;广泛应…

前端CSS常考问题总结

目录 CSS盒模型 CSS选择器的优先级 隐藏元素的方法 px和rem的区别是什么? 重绘重排有什么区别? 重排&#xff08;回流&#xff09;&#xff1a; 重绘&#xff1a; 浏览器的渲染机制: 浏览器如何解析CSS&#xff1f; 元素水平垂直居中的方式 CSS的哪些属性哪些可以…

队列循环——C++引用详解【入队元素不引用 出队元素引用】(C语言版)

出队元素引用 入队元素不引用解释&#xff1a; 在给定的代码中&#xff0c;对于 DeQueue 函数的参数使用引用 (&)&#xff0c;而对于 EnQueue 函数的参数没有使用引用&#xff0c;是基于函数内部对这些参数值的修改方式来确定的。 让我们分析一下每个函数&#xff1a; En…