Flutter Widgets 之 ListWheelScrollView
注意:无特殊说明,Flutter版本及Dart版本如下:
- Flutter版本: 1.12.13+hotfix.5
- Dart版本: 2.7.0
基础用法
在展示大量数据的时候我们第一会想到使用ListView,如果你觉得ListView比较单一、枯燥,你可以使用ListWheelScrollView,ListWheelScrollView和ListView同源,但它的渲染效果类似于车轮(或者滚筒),它不是在平面上滑动,而是转动车轮,先来看一波效果:
ListWheelScrollView的用法和ListView基本相同,基础用法:
ListWheelScrollView(
itemExtent: 150,
children: <Widget>[
...
],
);
children
是子控件,itemExtent
指定每一个Item的高度。
当有大量数据的时候这种方式明显是不科学的,就像ListView.builder
一样,用法如下:
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
调整其直径属性:
ListWheelScrollView(
itemExtent: 150,
diameterRatio: 1,
children: <Widget>[
...
],
)
diameterRatio
是圆筒直径和主轴渲染窗口的尺寸的比,默认值是2
,如果是垂直方向,主轴渲染窗口的尺寸是ListWheelScrollView的高。diameterRatio越小表示圆筒越圆。
调整perspective
perspective
属性表示圆柱投影透视图,类似OpenGLES中透视投影,理解为看圆柱的距离,为0
时表示从无限远处看,1
表示从无限近处看,值的范围(0,0.01],注意是左开右闭区间,默认值是0.003
,值越大,渲染效果越圆,用法如下:
ListWheelScrollView(
itemExtent: 150,
perspective: 0.003,
children: <Widget>[
...
],
);
offAxisFraction
offAxisFraction
属性表示车轮水平偏离中心的程度,用法如下:
ListWheelScrollView(
itemExtent: 150,
offAxisFraction: 13,
children: <Widget>[
],
);
offAxisFraction
的值从0到2的效果:
放大镜
通过useMagnifier
和magnification
属性实现放大镜效果,useMagnifier
是否启用放大镜,magnification
属性是放大倍率,用法如下:
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,用法如下:
ListWheelScrollView(
itemExtent: 150,
squeeze: 1,
children: <Widget>[
],
);
更多相关阅读:
- Flutter系列文章总览
- Flutter Widgets 之 Expanded和Flexible
- Flutter Widgets 之 AnimatedList
- Flutter Widgets 之 SliverAppBar
如果这篇文章有帮助到您,希望您来个“赞”并关注我的公众号,非常谢谢。
Flutter Widgets 之 ListWheelScrollView的更多相关文章
- 【Flutter Widgets大全】电子书开源
[Flutter Widgets大全]是老孟耗费大量精力整理的,总共有330多个组件的详细用法,开源到Github上,希望可以帮助到大家,开源不易,点个赞可不可以. [Flutter Widgets ...
- Flutter Widgets 之 InkWell 和 Ink
注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 InkWell InkWell组件在用户点击时出现&quo ...
- Flutter Widgets 之 FutureBuilder
注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 展示异步任务状态 当有一个Future(异步)任务需要展示 ...
- Flutter Widgets 之 BottomNavigationBar 和 BottomNavigationBarItem
注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 BottomNavigationBar 和 BottomN ...
- Flutter Widgets 之 RichText
注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 基础用法 应用程序离不开文字的展示,因此文字的排版非常重要 ...
- Flutter Widgets 之 SnackBar
注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 基础用法 应用程序有时候需要弹出消息提示用户,比如'网络连 ...
- Flutter Widgets 对话框-Dialog
注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 当应用程序进行重要操作时经常需要用户进行2次确认,以避免用 ...
- Flutter Widgets
Flutter Widgets Flutter 组件 Syncfusion Flutter Widgets 所有组件均支持即装即用的 Android,iOS和 Web not free https:/ ...
- Flutter Widgets (Container/Row/Column/Image)
俗话说知己知彼百战百胜,如果对Flutter 里面的各种Widgets不了解,那你就别想将它们组合成你想要的效果.从今天开始.会把一个一个的widget 撸一遍..知道它大概的用法.效果.当你想做某个 ...
随机推荐
- mock简单的json返回
针对非常简单的json返回串,我们也不一定非得通过freemarker模板的方式来构造返回数据,这里看实际的需求,如果返回的内容是固定的,而且json又非常简单,我们也可以直接写在程序里面,下面的接口 ...
- sin之舞---蓝桥杯练习
问题描述 最近FJ为他的奶牛们开设了数学分析课,FJ知道若要学好这门课,必须有一个好的三角函数基本功.所以他准备和奶牛们做一个“Sine之舞”的游戏,寓教于乐,提高奶牛们的计算能力. 不妨设 An=s ...
- imx6q-plus-Android6.0下uboot添加网卡驱动
1.文件:iTOP-iMX6_android6.0.1/bootable/bootloader/uboot-imx/include/configs/mx6sabre_common.h修改如下:#def ...
- [LC] 289. Game of Life
According to the Wikipedia's article: "The Game of Life, also known simply as Life, is a cellul ...
- 编译安装 logstash-output-jdbc
环境 mac https://github.com/theangryangel/logstash-output-jdbc logstash-plugin install logstash-output ...
- 依据gff切fa并翻译为蛋白质
#!/usr/bin/python import re import sys import gzip change={'A':'T','T':'A','C':'G','G':'C','N':'N'} ...
- aclocal-1.13: command not found
原因: 将编译好的工程拷贝到系统版本不一样的系统中,再进行编译会出现此类问题. 解决方法: yum install automake autoconf yum install libtool auto ...
- Oracle-PL/SQL语句
1.PL/SQL 2.存储过程,函数 3.java中调用存储过程和函数 4.触发器 1 PL/SQL 1.1什么是PL/SQL? n PL:Process Language n PL/SQL是or ...
- 72)PHP,session基本原理和登录验证
(1) (2) 所以 你要是开了session,那么就会有session数据,但是假如在你的php脚本中没有开放发session,就不会有session数据
- Tarjan模板——求强连通分量
Tarjan求强连通分量的流程在这个博客讲的很清楚,再加上我也没理解透,这里就不写了. 缩点:将同一个连通块内的点视为同一个点. 扔一道模板题:codeVS2822爱在心中 第一问很显然就是求点数大于 ...