首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Flutter Widgets 之 ListWheelScrollView

Flutter Widgets 之 ListWheelScrollView

原创
作者头像
老孟Flutter
修改于 2020-03-01 23:46:30
修改于 2020-03-01 23:46:30
1.7K0
举报
文章被收录于专栏:FlutterFlutter

注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0

基础用法

在展示大量数据的时候我们第一会想到使用ListView,如果你觉得ListView比较单一、枯燥,你可以使用ListWheelScrollView,ListWheelScrollView和ListView同源,但它的渲染效果类似于车轮(或者滚筒),它不是在平面上滑动,而是转动车轮,先来看一波效果:

ListWheelScrollView的用法和ListView基本相同,基础用法:

代码语言:txt
AI代码解释
复制
ListWheelScrollView(

      itemExtent: 150,

      children: <Widget>[

        ...

      ],

    );

children是子控件,itemExtent指定每一个Item的高度。

当有大量数据的时候这种方式明显是不科学的,就像ListView.builder一样,用法如下:

代码语言:txt
AI代码解释
复制
ListWheelScrollView.useDelegate(

      itemExtent: 150,

      childDelegate: ListWheelChildBuilderDelegate(

          builder: (context, index) {

            return Container(

              margin: EdgeInsets.symmetric(vertical: 10, horizontal: 30),

              color: Colors.primaries[index % 10],

              alignment: Alignment.center,

              child: Text('$index'),

            );

          },

          childCount: 100),

    );

调整直径

ListWheelScrollView的渲染效果类似车轮,设置diameterRatio调整其直径属性:

代码语言:txt
AI代码解释
复制
ListWheelScrollView(

      itemExtent: 150,

      diameterRatio: 1,

      children: <Widget>[

        ...

      ],

    )

diameterRatio是圆筒直径和主轴渲染窗口的尺寸的比,默认值是2,如果是垂直方向,主轴渲染窗口的尺寸是ListWheelScrollView的高。diameterRatio越小表示圆筒越圆。

调整perspective

perspective属性表示圆柱投影透视图,类似OpenGLES中透视投影,理解为看圆柱的距离,为0时表示从无限远处看,1表示从无限近处看,值的范围(0,0.01],注意是左开右闭区间,默认值是0.003,值越大,渲染效果越圆,用法如下:

代码语言:txt
AI代码解释
复制
ListWheelScrollView(

      itemExtent: 150,

      perspective: 0.003,

      children: <Widget>[

        ...

      ],

    );

offAxisFraction

offAxisFraction属性表示车轮水平偏离中心的程度,用法如下:

代码语言:txt
AI代码解释
复制
ListWheelScrollView(

      itemExtent: 150,

      offAxisFraction: 13,

      children: <Widget>[



      ],

    );

offAxisFraction 的值从0到2的效果:

放大镜

通过useMagnifiermagnification属性实现放大镜效果,useMagnifier是否启用放大镜,magnification属性是放大倍率,用法如下:

代码语言:txt
AI代码解释
复制
ListWheelScrollView(

      itemExtent: 150,

      useMagnifier: true,

      magnification: 1.5,

      children: <Widget>[



      ],

    );

效果如下:

squeeze

squeeze属性表示车轮上的子控件数量与在同等大小的平面列表上的子控件数量之比,例如,如果高度为100px,itemExtent为20px,那么5个项将放在一个等效的平面列表中。当squeeze为1时,RenderListWheelViewport中也会显示5个子控件。当squeeze为2时,RenderListWheelViewport中将显示10个子控件,默认值为1,用法如下:

代码语言:txt
AI代码解释
复制
ListWheelScrollView(

      itemExtent: 150,

      squeeze: 1,

      children: <Widget>[



      ],

    );

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
腾讯云分布式数据库(DCDB)
苏强
2017/05/12
3.8K0
腾讯云分布式数据库(DCDB)
腾讯云分布式数据库 DCDB 架构解密
文章主要介绍了分布式数据库在金融互联网场景下的设计和实现,包括DCDB的架构、基础环境、实例配置、功能、性能、以及扩展性。同时,还探讨了分布式数据库在云原生架构下的应用和挑战,以及TDSQL在金融云上的解决方案和案例。
胡彬
2017/06/23
4K0
腾讯云分布式数据库 DCDB 架构解密
腾讯分布式数据库TDSQL金融级能力的架构原理解读
为帮助开发者更好地了解和学习分布式数据库技术,2020年3月,腾讯云数据库、云加社区联合腾讯TEG数据库工作组特推出为期3个月的国产数据库专题线上技术沙龙《你想了解的国产数据库秘密,都在这!》,邀请数十位鹅厂资深数据库专家每周二和周四晚上在线深入解读TDSQL、CynosDB/CDB、TBase三款鹅厂自研数据库的核心架构、技术实现原理和最佳实践等。三月为TDSQL专题月,本文将带来直播回顾第一篇《腾讯自研分布式数据库TDSQL核心架构及特性拆解》。
分布式数据库TDSQL
2020/03/18
6.9K0
腾讯分布式数据库TDSQL金融级能力的架构原理解读
分布式数据库选型—数据水平拆分方案
水平拆分的概念随着分布式数据库的推广已为大部分人熟知,分库分表、异构索引、小表广播、这些功能几乎是产品功能需求标配。然而有些客户使用分布式数据库后的体验不尽如意。本文尝试从数据的角度总结分布式数据的复制(replication)和分区(partition)技术原理和方案,其中分区也有称为分片(sharding),希望能引起读者一些思考,在分布式数据库选型中能注意这些细节的区别,选择适合业务的数据水平拆分方案。
用户1278550
2019/06/20
1.4K0
分布式数据库选型—数据水平拆分方案
TDSQL TCA 分布式实例特点初探--分布表和SQL透传
TDSQL分布式实例通过Proxy接口提供和mysql兼容的连接方式,用户通过IP地址、端口号以及用户名、密码进行连接:
用户7689089
2020/11/13
2K0
一文教你迅速解决分布式事务 XA 一致性问题
文章主要介绍了腾讯云分布式数据库DCDB的一些特性、架构、以及业务价值。DCDB可支持大容量、高并发的业务需求,同时具备高可用性、高性能、以及更优的TCO。在架构上,DCDB采用了全冗余、全解耦的设计,保证了高可用性。此外,DCDB还具备弹性扩展的能力,能够根据业务的需求自动调整计算资源。通过这些特性,DCDB能够满足金融行业对数据库的各种需求,包括高并发、高可用、高稳定性、以及低成本。
腾讯云数据库团队
2017/09/01
4.2K0
一文教你迅速解决分布式事务 XA 一致性问题
浅谈分布式数据库
文章集中整理总结mysql分库分表开源产品,分布式数据库的设计,以及实际应用案例等相关内容,部分附上本文作者实际应用过程中的理解。
庞小明
2018/09/19
3.7K0
浅谈分布式数据库
干货分享 | 2分钟看懂MySQL分库分表原理
点击上方蓝字关注我们吧 作者简介:董泽锋,腾讯云数据库研发工程师,主要负责腾讯云TDSQL研发工作。 ---- 【导语】随着业务的增长,mysql中保存的数据会越来越多。此时,数据库很容易成为系统性能的一个瓶颈,单机存储容量、IO、CPU处理能力都有限,当单表的数据量达到1000W或100G以后,库表的增删改查操作面临着性能大幅下降的问题。分库分表是一种解决办法。 分库分表实际上就是对数据进行切分。我们一般可以将数据切分分为两种方式:垂直(纵向)切分和水平(横向)切分。  垂直切分  垂直切分常见有垂直分
腾讯云数据库 TencentDB
2019/05/23
5.6K0
干货分享 | 2分钟看懂MySQL分库分表原理
用分布式技术轻松化解数据库容量和性能瓶颈
腾讯云数据库团队
2017/06/27
4.3K1
用分布式技术轻松化解数据库容量和性能瓶颈
大型分布式业务平台数据库优化方法(下)
文章摘要:当单表数据达到千万以上时,通过加索引或者表分区优化提升的效果就比较有限了,应该如何应对呢???
用户2991389
2018/09/05
1.1K0
大型分布式业务平台数据库优化方法(下)
使用分布式数据库,还需要考虑做分库分表吗?
随着数据存储需求的不断增加,分布式数据库成为了处理大规模数据的一种重要方式。分布式数据库可以将数据分散到多个计算节点上,并利用分布式计算的能力来提高数据处理的效率和可用性。然而,在使用分布式数据库的过程中,是否需要进行分库分表呢?
coderidea
2023/08/10
1.2K0
使用分布式数据库,还需要考虑做分库分表吗?
腾讯会议核心数据库TDSQL,如何做到快速无损在线扩容?
自去年12月底发布后,腾讯会议40天更新14个版本,8天紧急扩容超过10万台云主机,投入的计算资源超100万核。疫情复工期间,每周都有数万家企业和政府相关机构使用腾讯会议复工复产,通过腾讯会议开拓了云签约、云招标、云面试、云培训等云上协同场景。
腾讯云开发者
2020/05/08
3.2K0
聊聊分布式数据库TDSQL的技术架构
咱们很多读者都是在互联网公司工作,大部分同学会有一种认知偏差,总以为互联网的业务对技术的要求是最高的。但其实不然。
开发内功修炼
2023/12/11
2K0
聊聊分布式数据库TDSQL的技术架构
聊聊主流的分布式数据库
单体数据库时代,随着系统交易量的不断上升,数据库读写性能出现了严重下降。我们可以借助分库分表中间件,比如mycat、shardingjdbc来实现分库分表,缓解单库的读写性能。但是分库分表中间件并不支持事务,如果要保证数据一致性,就需要借助于分布式事务中间件,比如阿里巴巴的seata。后来分布式数据库逐渐成为解决数据一致性的选择,目前分布式数据库产品已经比较成熟,支持ACID事务,本文就来聊一聊分布式数据库。
jinjunzhu
2021/01/05
1.9K0
聊聊主流的分布式数据库
电商月将至,腾讯云DCDB助力电商企业应对支付洪峰
腾讯云开发者社区
2017/10/24
3.3K0
电商月将至,腾讯云DCDB助力电商企业应对支付洪峰
腾讯云数据库产品介绍
腾讯云上有许多种数据库产品,本文简单介绍每种产品的介绍,特性,应用场景等,帮助各位根据业务需要选择最适合的数据库。
scarlett学习手册
2019/12/12
12.5K0
腾讯云数据库产品介绍
mysql分布式数据库的逻辑库、物理库和分库分表和TDDL图文详解
逻辑库/逻辑文件:给用户看的(即Database和Table就是我们常说的逻辑库的范畴) 物理库/物理文件:存储在计算机中的(即机器和Port就是我们常说的物理库的范畴。)
一个会写诗的程序员
2020/04/24
4.8K0
简单明了!OLTP场景下的数据分布式设计原则
温卫斌,就职于中国民生银行信息科技部,目前负责分布式技术平台设计与研发,主要关注分布式数据相关领域。
Spark学习技巧
2021/03/05
8050
简单明了!OLTP场景下的数据分布式设计原则
中欧财富:分布式数据库的应用历程和 TiDB 7.1 新特性探索
中欧财富是中欧基金控股的销售子公司,旗下 APP 实现业内基金品种全覆盖,提供基金交易、大数据选基、智慧定投、理财师咨询等投资工具及服务。中欧财富致力为投资者及合作伙伴提供一站式互联网财富管理解决方案,自 2015 年成立以来业务持续保持稳健的增长。
PingCAP
2023/08/30
2880
数据库中间件
作者:[美]威廉·肯尼迪(William Kennedy)布赖恩·克特森(Brian
李海彬
2018/07/26
2.7K0
数据库中间件
相关推荐
腾讯云分布式数据库(DCDB)
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档