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

此控件的package我已經(jīng)托管到了 pub倉(cāng)庫

創(chuàng)新互聯(lián)提供成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、網(wǎng)頁設(shè)計(jì)，品牌網(wǎng)站制作，1元廣告等致力于企業(yè)網(wǎng)站建設(shè)與公司網(wǎng)站制作，10多年的網(wǎng)站開發(fā)和建站經(jīng)驗(yàn),助力企業(yè)信息化建設(shè)，成功案例突破數(shù)千家,是您實(shí)現(xiàn)網(wǎng)站建設(shè)的好選擇.

如果你被墻住了，也可以看 國(guó)內(nèi)鏡像

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

然后flutter packages get更新依賴即可

最近寫demo時(shí)發(fā)現(xiàn)Flutter自帶的ListView widget很簡(jiǎn)陋，沒有分隔線，沒有section/row之分，也沒有sectionHeader，如果要實(shí)現(xiàn)一個(gè)有分割線，有section區(qū)分，有section header的ListView，耦合會(huì)非常嚴(yán)重：

在 上沒有找到封裝好的這種TableView，于是乎決定自己寫一個(gè)，命名為SectionTableView

本人是iOS開發(fā)，所以習(xí)慣了iOS上的UITableView的調(diào)用風(fēng)格，所以在實(shí)現(xiàn)flutter的SectionTableView時(shí)，決定實(shí)現(xiàn)如下功能

為了實(shí)現(xiàn)這些功能，并且方便后期增加滾動(dòng)功能，上下拉刷新功能，使用了StatefulWidget作為父類：

接著在對(duì)應(yīng)的_SectionTableViewState中的build方法中，返回ListView：

熟悉flutter ListView的同學(xué)知道，ListView的builder類方法，有一個(gè)itemBuilder回調(diào)函數(shù)，參數(shù)是當(dāng)前的上下文，和將要渲染的行索引index，index對(duì)應(yīng)想要獲取的某一行控件(cell或者叫ListItem)，返回非空的組件就證明這個(gè)index有值，返回null就表示列表到盡頭了。

我們需要做的就是對(duì)index進(jìn)行映射，判斷當(dāng)前index對(duì)應(yīng)的控件，應(yīng)該是列表里的section header，還是分隔線devider，還是某一行的真正內(nèi)容cell。

出于性能的考慮，不可能每次調(diào)用 _buildCell的時(shí)候，都計(jì)算一遍index對(duì)應(yīng)的section和row的位置，所以定義了一個(gè)類成員變量indexPathSearch，是數(shù)組，數(shù)組長(zhǎng)度就是ListView所有的行，當(dāng) _buildCell 的參數(shù)index大于等于indexPathSearch的長(zhǎng)度的時(shí)候，就返回null，表示列表內(nèi)容到此為止了。

indexPathSearch里每一個(gè)元素，就是index對(duì)應(yīng)的section和row（稱為indexPath），index指向?qū)嶋H行(cell)的時(shí)候，section和row都是大于等于0的，當(dāng)section大于等于0，row==-1的時(shí)候，表示這里是一個(gè)section header，當(dāng)兩者都等于-1的時(shí)候，表示這里是一個(gè)分割線：

計(jì)算好了index到indexPath的映射，剩下的就好說了，在_buildCell中，提取indexPath并判斷indexPath的內(nèi)容，返回對(duì)應(yīng)的控件：

這是我的第一個(gè)flutter package，目前還很簡(jiǎn)陋，flutter目前尚且如此，所以大家一起改善它，

下一步將優(yōu)化如下內(nèi)容：

如果大家喜歡，請(qǐng)多多star我的 項(xiàng)目GitHub

Flutter 城市列表AzListView 索引&懸停

AzListView，F(xiàn)lutter 城市列表，聯(lián)系人列表，自定義Header，索引，懸停效果。

flutter Set集合妙用

Set是不能重復(fù)的集合，所以可以用Set去重；

String、int、double類型示例，如下：

String類型：

int類型：

double類型：

可以看到， Set集合可直接對(duì)String、int、double類型去重 ；

Map、List、bool類型和String、int、double類型對(duì)比示例，如下：

可以看到，當(dāng)自定義對(duì)象實(shí)例化為同一個(gè)對(duì)象時(shí)，Set會(huì)過濾掉同一個(gè)實(shí)例化的對(duì)象；當(dāng)自定義對(duì)象實(shí)例化為不同對(duì)象時(shí)，Set不會(huì)去重，即使對(duì)象數(shù)據(jù)內(nèi)容一樣，這不符合我們的業(yè)務(wù)；

可以看到，重寫自定義對(duì)象==方法，Set還是不能去重；

上面重寫自定義對(duì)象hashCode和==方法，以title不同區(qū)分不同對(duì)象；

可以看到，重寫自定義對(duì)象hashCode和==方法，Set集合對(duì)自定義對(duì)象去重才有效；并且Set集合里有相同對(duì)象時(shí)(相同對(duì)象為上面自定義對(duì)象title值相同的對(duì)象)，后面相同的對(duì)象就不會(huì)被加入Set集合里了( 如上面title一樣，boolValue不一樣，這樣被認(rèn)為相同的對(duì)象，因?yàn)橹貙懽远x對(duì)象hashCode和==方法，以title不同區(qū)分不同對(duì)象；Set集合里最開始加入的TestModel('a', boolValue: false)，數(shù)據(jù)不會(huì)被相同對(duì)象TestModel('a', boolValue: true)覆蓋 )。

網(wǎng)上介紹flutter Set集合時(shí)一般會(huì)介紹Set沒有順序，這點(diǎn)不太理解，可能是不能通過索引來獲取對(duì)應(yīng)的值吧，像Java語言的Set集合確實(shí)是無序的，但flutter的Set集合保持著子元素的有序性。 如下：

可以看到，將Set通過toList()方法轉(zhuǎn)為L(zhǎng)ist后，List里子元素的順序和子元素插入Set集合的順序是一致；對(duì)于自定義對(duì)象亦是如此，可自行驗(yàn)證。

為什么Set集合會(huì)保持子元素插入順序呢

我們看下Set源碼，如下：

從源碼我們可知，Set()是一個(gè)工廠構(gòu)造方法，根據(jù)工廠構(gòu)造方法的特點(diǎn)，Set是由LinkedHashSet實(shí)例化的。

從上面注釋可知，HashSet是無序的，LinkedHashSet保持著子元素插入的順序。而Set是由LinkedHashSet實(shí)例化的,所以Set保持著子元素插入的順序。

如想要深入分析LinkedHashSet，LinkedHashSet源碼中有很多external聲明的方法，可參考 如何找到flutter external聲明方法的實(shí)現(xiàn)

demo傳送門

flutter Dart語言List如何獲取索引值

其他語言像是js，提供的迭代器是可以直接獲取element，index的，但是用dart的map()發(fā)現(xiàn)無法獲取下標(biāo)，實(shí)際上dart的迭代器只支持獲取element自身，想要獲得index，就需要借助asMap()，Dart提供的asMap()將列表轉(zhuǎn)換為Map。

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