专栏首页FlutterFlutter Widgets 之 ListWheelScrollView
原创

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的效果:

放大镜

通过useMagnifiermagnification属性实现放大镜效果,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>[



      ],

    );

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Flutter Widgets 之 ListWheelScrollView

    在展示大量数据的时候我们第一会想到使用ListView,如果你觉得ListView比较单一、枯燥,你可以使用ListWheelScrollView,ListWh...

    老孟程序员
  • Flutter 拖拽控件Draggable看这一篇就够了

    Draggable组件有2个必须填写的参数,child参数是子控件,feedback参数是拖动时跟随移动的组件,用法如下:

    老孟程序员
  • 还记得面试时被算法支配的恐惧吗?

    大多数程序员心里会想"总结的真精辟",当面试到算法时,各种“跪”、“再跪”、“还是跪”......,多少人因为算法而拿不到心仪的offer,算法毁一生啊。

    老孟程序员
  • Flutter Widgets 之 ListWheelScrollView

    在展示大量数据的时候我们第一会想到使用ListView,如果你觉得ListView比较单一、枯燥,你可以使用ListWheelScrollView,ListWh...

    老孟程序员
  • w7 python35 输出中文乱码解决

    但是cmd就跪了,用的vs code也是同样问题,不想以前学习python27那么单纯,前面加个#UTF就可以了

    py3study
  • iOS自动化探索(一)WebDriverAgent安装

    通过上面给出的IP和端口,加上/status合成一个url地址。例如http://192.168.1.5:8100/status,然后浏览器打开。

    周希
  • PHP中 对象自动调用的方法:__set()、__get()、__tostring()

     (1)__get($property_name):获取私有属性$name值时,此对象会自动调用该方法,将属性name值传给参数$property_name,通...

    shirayner
  • ScalaPB(2): 在scala中用gRPC实现微服务

    用户1150956
  • HTTP Leak实现任意账户劫持的漏洞解析

    本文分享的是,作者在参与某次漏洞邀请测试项目中,发现目标应用服务的密码重置请求存在HTML注入漏洞(HTML injection),通过进一步的HTTP Lea...

    FB客服
  • 地平线创始人余凯:为智能终端设备装上“大脑”

    余凯在地平线人工智能芯片发布会上。 硅谷传奇风险投资家Yuri Milner在与地平线创始人兼CEO余凯交谈时曾问道:“10年后,我们的生活将因地平线的存在而发...

    WZEARW

扫码关注云+社区

领取腾讯云代金券