[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://scyanting.com/article/dsiscdj.html