Flutter Widgets中ListWheelScrollView的用法
admin
2023-02-10 00:20:11
0

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

基础用法

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

Flutter Widgets中ListWheelScrollView的用法

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

ListWheelScrollView(
      itemExtent: 150,
      children: [
        ...
      ],
    );

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: [
        ...
      ],
    )

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

调整perspective

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

ListWheelScrollView(
      itemExtent: 150,
      perspective: 0.003,
      children: [
        ...
      ],
    );

offAxisFraction

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

ListWheelScrollView(
      itemExtent: 150,
      offAxisFraction: 13,
      children: [

      ],
    );

offAxisFraction 的值从0到2的效果:

Flutter Widgets中ListWheelScrollView的用法

放大镜

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

ListWheelScrollView(
      itemExtent: 150,
      useMagnifier: true,
      magnification: 1.5,
      children: [

      ],
    );

效果如下:

Flutter Widgets中ListWheelScrollView的用法

squeeze

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

ListWheelScrollView(
      itemExtent: 150,
      squeeze: 1,
      children: [

      ],
    );

相关内容

热门资讯

数学之外的邓煜:INTJ、知乎... 在23日于美国费城宾夕法尼亚州会展中心举行的2026年国际数学家大会开幕式上,中国数学家邓煜、王虹获...
新晋菲尔兹奖得主,当天宣布加入... 刚拿到数学界最高荣誉,转头就宣布:我要去OpenAI了。Jacob Tsimerman,这位领奖台上...
竞逐百亿赛道,北京十条政策卡位... 从基础模型到框架性能、推理效率、行业应用,半年来北京以智能体为牵引不断精进。作为我国AI发展的引领者...
共促数智交融 共启丝路新篇—... 本报记者 亓玉昆7月22日,2026年世界互联网大会数字丝路发展论坛在陕西西安举行。论坛以“智汇丝路...
赛里木湖景区通报“工作人员殴打... 2026年7月23日17时许,赛里木湖景区入口处发生多名景区工作人员殴打旅游车司机事件,我们深感痛心...
继英伟达黄仁勋后,AMD苏姿丰... IT之家 7 月 24 日消息,随着中国开源 AI 模型的不断变强,近期美国业界出现了关于 AI 是...
辰奕智能获得实用新型专利授权:... 证券之星消息,根据天眼查APP数据显示辰奕智能(301578)新获得一项实用新型专利授权,专利名为“...
湖南湘江新区文化创意产业出海观... 中新网长沙7月23日电(胡语桐)在日本大型量贩门店的货架上,中国研发的视频创意软件实体产品陈列其中;...
中国数学家首次获得的菲尔兹奖“... 当地时间7月23日上午,2026年国际数学家大会在美国费城开幕,现场揭晓2026年菲尔兹奖得主。中国...
猪周期反转,这次可能来真的 市场过去几年关于猪周期的很多认知,现在需要重新审视了。过去几年,越来越多人相信:随着规模化养殖企业不...