Flutter 之列表和頭部 （ListView + Header）

上一篇介紹Banner的開發(fā)。在大多數(shù)應(yīng)用場景中。banner和ListView通常是一起顯示的。 并且能夠共同滑動。例如如下界面：

網(wǎng)站建設(shè)公司,為您提供網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)頁設(shè)計(jì)及定制網(wǎng)站建設(shè)服務(wù),專注于企業(yè)網(wǎng)站建設(shè),高端網(wǎng)頁制作,對成都玻璃鋼坐凳等多個行業(yè)擁有豐富的網(wǎng)站建設(shè)經(jīng)驗(yàn)的網(wǎng)站建設(shè)公司。專業(yè)網(wǎng)站設(shè)計(jì),網(wǎng)站優(yōu)化推廣哪家好,專業(yè)成都網(wǎng)站推廣優(yōu)化,H5建站,響應(yīng)式網(wǎng)站。

要實(shí)現(xiàn)上圖的界面，直接想到是ListView添加Header。但在Flutter中，ListView 組件相當(dāng)于RecyclerView，所以添加Header也用RecyclerView的原理：

封裝ListPage組件，list_page.dart

使用及測試：異步加載網(wǎng)絡(luò)數(shù)據(jù)使用

Flutter：手把手教你使用滾動型列表組件：ListView

ListView的基礎(chǔ)創(chuàng)建使用有三種方式：

通過默認(rèn)構(gòu)造函數(shù)來創(chuàng)建列表，應(yīng)用場景 = 短列表

這種方式創(chuàng)建的列表存在一個問題：對于那些長列表或者需要較昂貴渲染開銷的子組件，即使還沒有出現(xiàn)在屏幕中但仍然會被ListView所創(chuàng)建，這將是一項(xiàng)較大的開銷，使用不當(dāng)可能引起性能問題甚至卡頓。

長列表

列表子項(xiàng)之間需要分割線

ListView的進(jìn)階使用主要包括：下拉刷新 上拉加載

在Flutter中，ListView結(jié)合RefreshIndicator組件實(shí)現(xiàn)下拉刷新

通過包裹一層RefreshIndicator，自定義onRefresh回調(diào)方法實(shí)現(xiàn)

方式有兩種：

通過ListView.controller屬性可以判斷ListView是否滑動到了底部，再進(jìn)行上拉加載

NotificationListener是一個Widget，可監(jiān)聽子Widget發(fā)出的Notification

ListView在滑動時中會發(fā)出ScrollNotification類型的通知，可通過監(jiān)聽該通知得到ListView的滑動狀態(tài)，判斷是否滑動到了底部，從而進(jìn)行上拉加載

NotificationListener有一個onNotification屬性，定義了監(jiān)聽的回調(diào)方法，通過它來處理加載更多邏輯

不定期分享關(guān)于 安卓開發(fā) 的干貨，追求 短、平、快 ，但 卻不缺深度 。

Flutter 6種構(gòu)造函數(shù)詳解

Flutter有生成構(gòu)造函數(shù)、默認(rèn)構(gòu)造函數(shù)、命名構(gòu)造函數(shù)、重定向構(gòu)造函數(shù)、常量構(gòu)造函數(shù)、工廠構(gòu)造函數(shù)

生成構(gòu)造函數(shù)是最常見的構(gòu)造函數(shù)，即生成實(shí)體類對象。

如果未聲明構(gòu)造函數(shù)，則會提供默認(rèn)構(gòu)造函數(shù)。 默認(rèn)構(gòu)造函數(shù)沒有參數(shù)，并調(diào)用父類無參數(shù)構(gòu)造函數(shù)。

默認(rèn)情況下，子類中的構(gòu)造函數(shù)調(diào)用父類的未命名無參數(shù)構(gòu)造函數(shù)。 父類的構(gòu)造函數(shù)在子類構(gòu)造函數(shù)體的開頭被調(diào)用。 如果還使用初始化了列表，則會在調(diào)用父類構(gòu)造函數(shù)之前執(zhí)行。 執(zhí)行順序如下：

如果父類沒有未命名的無參數(shù)構(gòu)造函數(shù)，則必須手動調(diào)用父類中的一個構(gòu)造函數(shù)。 在子類的構(gòu)造函數(shù)體之后用冒號(:)指定父類構(gòu)造函數(shù)

當(dāng)需要定義一個有特別含義的構(gòu)造函數(shù)的時候，可以通過命名構(gòu)造 形式：構(gòu)造函數(shù).XXX來命名構(gòu)造函數(shù)

有時構(gòu)造函數(shù)需要重定向到同一個類中的另一個構(gòu)造函數(shù)，在冒號后面用this：

如果你的類需要成為永遠(yuǎn)不會更改的對象，則可以使這些對象成為編譯時常量。 定義const構(gòu)造函數(shù)要確保所有實(shí)例變量都是final。

不用直接創(chuàng)建對象（可以通過調(diào)用其他構(gòu)造函數(shù)創(chuàng)建）

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

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

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

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

然后flutter packages get更新依賴即可

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

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

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

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

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

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

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

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

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

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

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

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

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