189 8069 5689

flutter悬浮索引,flutter 列表

[Flutter Package]类iOS使用方法的SectionTableView

此控件的package我已经托管到了 pub仓库

创新互联提供成都网站设计、网站制作、网页设计,品牌网站制作1元广告等致力于企业网站建设与公司网站制作,10多年的网站开发和建站经验,助力企业信息化建设,成功案例突破数千家,是您实现网站建设的好选择.

如果你被墙住了,也可以看 国内镜像

使用方式就是在你的flutter pubspec.yaml中添加依赖:

然后flutter packages get更新依赖即可

最近写demo时发现Flutter自带的ListView widget很简陋,没有分隔线,没有section/row之分,也没有sectionHeader,如果要实现一个有分割线,有section区分,有section header的ListView,耦合会非常严重:

在 上没有找到封装好的这种TableView,于是乎决定自己写一个,命名为SectionTableView

本人是iOS开发,所以习惯了iOS上的UITableView的调用风格,所以在实现flutter的SectionTableView时,决定实现如下功能

为了实现这些功能,并且方便后期增加滚动功能,上下拉刷新功能,使用了StatefulWidget作为父类:

接着在对应的_SectionTableViewState中的build方法中,返回ListView:

熟悉flutter ListView的同学知道,ListView的builder类方法,有一个itemBuilder回调函数,参数是当前的上下文,和将要渲染的行索引index,index对应想要获取的某一行控件(cell或者叫ListItem),返回非空的组件就证明这个index有值,返回null就表示列表到尽头了。

我们需要做的就是对index进行映射,判断当前index对应的控件,应该是列表里的section header,还是分隔线devider,还是某一行的真正内容cell。

出于性能的考虑,不可能每次调用 _buildCell的时候,都计算一遍index对应的section和row的位置,所以定义了一个类成员变量indexPathSearch,是数组,数组长度就是ListView所有的行,当 _buildCell 的参数index大于等于indexPathSearch的长度的时候,就返回null,表示列表内容到此为止了。

indexPathSearch里每一个元素,就是index对应的section和row(称为indexPath),index指向实际行(cell)的时候,section和row都是大于等于0的,当section大于等于0,row==-1的时候,表示这里是一个section header,当两者都等于-1的时候,表示这里是一个分割线:

计算好了index到indexPath的映射,剩下的就好说了,在_buildCell中,提取indexPath并判断indexPath的内容,返回对应的控件:

这是我的第一个flutter package,目前还很简陋,flutter目前尚且如此,所以大家一起改善它,

下一步将优化如下内容:

如果大家喜欢,请多多star我的 项目GitHub

Flutter 城市列表AzListView 索引&悬停

AzListView,Flutter 城市列表,联系人列表,自定义Header,索引,悬停效果。

flutter Set集合妙用

Set是不能重复的集合,所以可以用Set去重;

String、int、double类型示例,如下:

String类型:

int类型:

double类型:

可以看到, Set集合可直接对String、int、double类型去重 ;

Map、List、bool类型和String、int、double类型对比示例,如下:

可以看到,当自定义对象实例化为同一个对象时,Set会过滤掉同一个实例化的对象;当自定义对象实例化为不同对象时,Set不会去重,即使对象数据内容一样,这不符合我们的业务;

可以看到,重写自定义对象==方法,Set还是不能去重;

上面重写自定义对象hashCode和==方法,以title不同区分不同对象;

可以看到,重写自定义对象hashCode和==方法,Set集合对自定义对象去重才有效;并且Set集合里有相同对象时(相同对象为上面自定义对象title值相同的对象),后面相同的对象就不会被加入Set集合里了( 如上面title一样,boolValue不一样,这样被认为相同的对象,因为重写自定义对象hashCode和==方法,以title不同区分不同对象;Set集合里最开始加入的TestModel('a', boolValue: false),数据不会被相同对象TestModel('a', boolValue: true)覆盖 )。

网上介绍flutter Set集合时一般会介绍Set没有顺序,这点不太理解,可能是不能通过索引来获取对应的值吧,像Java语言的Set集合确实是无序的,但flutter的Set集合保持着子元素的有序性。 如下:

可以看到,将Set通过toList()方法转为List后,List里子元素的顺序和子元素插入Set集合的顺序是一致;对于自定义对象亦是如此,可自行验证。

为什么Set集合会保持子元素插入顺序呢

我们看下Set源码,如下:

从源码我们可知,Set()是一个工厂构造方法,根据工厂构造方法的特点,Set是由LinkedHashSet实例化的。

从上面注释可知,HashSet是无序的,LinkedHashSet保持着子元素插入的顺序。而Set是由LinkedHashSet实例化的,所以Set保持着子元素插入的顺序。

如想要深入分析LinkedHashSet,LinkedHashSet源码中有很多external声明的方法,可参考 如何找到flutter external声明方法的实现

demo传送门

flutter Dart语言List如何获取索引值

其他语言像是js,提供的迭代器是可以直接获取element,index的,但是用dart的map()发现无法获取下标,实际上dart的迭代器只支持获取element自身,想要获得index,就需要借助asMap(),Dart提供的asMap()将列表转换为Map。

Dart提供了List.generate方法获取index


分享题目:flutter悬浮索引,flutter 列表
标题链接:http://cdxtjz.cn/article/dsiscdj.html

其他资讯