《古交交友》:Flutter Widgets 之 ListWheelScrollView

admin 2周前 (10-08) 科技 50 2

注意:〖无〗特殊说明,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
如果这篇文章有帮助「到」 您[,希望 您[来个“赞”「并关注我的公众号」,『非常谢』谢。

,

SuNBet

Sunbet www.593711.com Sunbet是进入Sunbet www.sunbet.us认可的自助开户、《储》值平台。Sunbet 开放[Sunbet《会员开户网址》、Sunbet《代》理开户、Sunbet 手机版下载[、Sunbet《电脑》客户端下载等业务。

Sunbet声明:该文看法仅代表作者自己,与本平台无关。转载请注明:《古交交友》:Flutter Widgets 之 ListWheelScrollView

网友评论

  • (*)

最新评论

  • 皇冠代理登录 2020-03-24 01:12:41 回复

    新皇冠体育皇冠体育APP是一个开放皇冠代理APP下载、皇冠会员APP下载、皇冠线路APP下载、皇冠登录APP下载的平台,皇冠体育APP上最新登录线路、新2皇冠网址更新最快,皇冠体育APP开放皇冠会员注册、皇冠代理开户等业务。我的心里只有这个了

    1
  • AllbetGmaing开户 2020-10-08 00:08:52 回复

    联博统计www.326681.com采用以太坊区块链高度哈希值作为统计数据,联博以太坊统计数据开源、公平、无任何作弊可能性。联博统计免费提供API接口,支持多语言接入。看得很开心呢

    2

标签列表

    文章归档

      站点信息

      • 文章总数:641
      • 页面总数:0
      • 分类总数:8
      • 标签总数:1024
      • 评论总数:256
      • 浏览总数:8003