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: [

      ],
    );

相关内容

热门资讯

德国总理:美国正在被伊朗羞辱 德国之声4月27日报道,德国总理默茨在访问一所学校时表示,在当前的持续冲突中,伊朗领导层正试图羞辱美...
理响中国|“长”歌以行,风云激... 光阴如梭,东方潮阔。这里是中国的长三角,世界的长三角。无论过去、现在还是未来,这片土地都因时代而生,...
白宫:特朗普及其国安团队开会讨... 新华社华盛顿4月27日电 美国白宫新闻秘书莱维特27日在记者会上证实,总统特朗普及其国家安全团队当天...
人民日报刊文:日本放开杀伤性武... 日本放开杀伤性武器出口推高地缘冲突风险(国际论坛)常思纯《人民日报》(2026年04月28日 第 0...
医疗保障法草案二审:明确生育保... 满足多样化健康保障需求本报记者 彭 波4月27日,医疗保障法草案二审稿提请十四届全国人大常委会第二十...
天津一景区发生自转旋翼机事故1... 澎湃新闻记者 吕新文中国民用航空华北地区管理局4月22日公布《豪客通航“10•1”天津长芦汉盐旅游区...
卡塔尔埃米尔与美国总统特朗普通... 当地时间24日,卡塔尔埃米尔塔米姆与美国总统特朗普通电话,重点就中东地区局势以及伊朗与美国谈判问题交...
男子30年前被扣押2859克黄... 澎湃新闻记者 王鑫家住辽宁省大连市的潘永嘉近日向澎湃新闻反映称,三十年前,他在大连周水子机场被盖州市...
商务部:取消反制欧盟两家金融机... 中华人民共和国商务部令二〇二六年 第1号鉴于欧盟已取消对中国两家金融机构的制裁措施,现公布《关于取消...
过去24小时共有5艘船只通过霍... 总台记者当地时间24日获悉,过去24小时内,共有5艘船只通过霍尔木兹海峡,其中包括一艘伊朗油轮。(总...