Flutter：手把手教你使用滾動(dòng)型列表組件：ListView

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

創(chuàng)新互聯(lián)建站主營(yíng)鹽邊網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,重慶APP開(kāi)發(fā),鹽邊h5成都微信小程序搭建,鹽邊網(wǎng)站營(yíng)銷(xiāo)推廣歡迎鹽邊等地區(qū)企業(yè)咨詢(xún)

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

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

長(zhǎng)列表

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

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

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

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

方式有兩種：

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

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

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

NotificationListener有一個(gè)onNotification屬性，定義了監(jiān)聽(tīng)的回調(diào)方法，通過(guò)它來(lái)處理加載更多邏輯

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

Flutter Button（按鈕）

在 Flutter 里有很多的 Button，包括了：MaterialButton、RaisedButton、FloatingActionButton、FlatButton、IconButton、ButtonBar、DropdownButton 等。

一般常用的 Button 是 MaterialButton、IconButton、FloatingActionButton。

MaterialButton 是一個(gè) Materia 風(fēng)格的按鈕。

一般來(lái)說(shuō)，如果需要點(diǎn)擊事件，就要嵌套一個(gè) Button，因?yàn)?Container、Text 等組件都沒(méi)有點(diǎn)擊事件。

RaisedButton 與 MaterialButton 類(lèi)似。

FlatButton 與 MaterialButton 類(lèi)似，不同的是它是透明背景的。如果一個(gè) Container 想要點(diǎn)擊事件時(shí)，可以使用 FlatButton 包裹，而不是 MaterialButton。因?yàn)?MaterialButton 默認(rèn)帶背景，而 FlatButton 默認(rèn)不帶背景。

IconButton 顧名思義就是 Icon + Button 的復(fù)合體，當(dāng)某個(gè) Icon 需要點(diǎn)擊事件時(shí)，使用 IconButton 最好不過(guò)。

其外，還有已經(jīng)定義好的 Icon Button：CloseButton、BackButton。他們都有導(dǎo)航返回的能力。

FloatingActionButton 是一個(gè)浮動(dòng)在頁(yè)面右下角的浮動(dòng)按鈕。

在 Scaffold 里使用的時(shí)候，它是一個(gè)浮動(dòng)狀態(tài)的按鈕，在其他地方使用，就不會(huì)浮動(dòng)了。

ButtonBar 是一個(gè)布局組件，可以讓 Button 排列在一行。

flutter android 原生浮窗組件 android_window 介紹

倉(cāng)庫(kù)地址：

pub 地址：

修改 MainActivity.kt 讓 MainActivity 繼承 qiuxiang.android_window.AndroidWindowActivity ：

創(chuàng)建 MainApplication.kt ：

修改 AndroidManifest.xml 的 application 新增屬性 android:name=".MainApplication" ：

main.dart：

我們需要用 @pragma('vm:entry-point') 聲明一個(gè)入口函數(shù)，默認(rèn)函數(shù)名是 androidWindow ，當(dāng)然你可以隨意指定一個(gè)，只是調(diào)用 open 的時(shí)候需要同時(shí)指定參數(shù) entryPoint: 。

android_window.dart:

浮窗 app 的寫(xiě)法就和我們平時(shí)寫(xiě)的 app 沒(méi)什么區(qū)別了，如果需要支持窗口拖拽移動(dòng)，則要在最外層使用 AndroidWindow 。

最終效果：

更完整的示例請(qǐng)參考：

主應(yīng)用和浮窗都有 post 和 setHandler 方法用于發(fā)送消息以及設(shè)置監(jiān)聽(tīng)處理函數(shù)。用法舉例：

主應(yīng)用發(fā)送消息到浮窗：

浮窗監(jiān)聽(tīng)并處理主應(yīng)用消息：

反過(guò)來(lái)同理。

Android原生和Flutter使用過(guò)程的差異對(duì)比（二）

1、常用布局的對(duì)比

使用下來(lái)其他組件大致還算方便，但是相對(duì)布局而言使用便利程度上Android原生完勝，ConstraintLayout內(nèi)部的所有子View可以設(shè)置互相之間的位置依賴(lài)關(guān)系。

而Flutter的Stack組件內(nèi)部的Children只能通過(guò)外層包裹 Align后 固定位置，比如 Alignment.topLeft、Alignment.bottomRight 等。遇到復(fù)雜的堆疊布局需要通過(guò)外層包裹 Positioned 組件后設(shè)置固定的 top 和 left 距離以達(dá)到效果，內(nèi)部子組件之間無(wú)法設(shè)置位置關(guān)聯(lián)關(guān)系。

2、一些常用屬性設(shè)置上的差異：

Margin外邊距

Android：直接在布局文件對(duì)View設(shè)置android:layout_marginStart、android:layout_marginTop

Flutter：需嵌套 Container 組件并在內(nèi)部設(shè)置具體的 margin 值

Padding內(nèi)邊距

Android：TextView、ImageView、各種Layout都可以直接在屬性上設(shè)置android:paddingStart

Flutter：需嵌套 Padding 組件并在內(nèi)部設(shè)置具體的值

組件的可見(jiàn)性

Android：每個(gè)view都可以通過(guò)setVisibility來(lái)設(shè)置可見(jiàn)、隱藏或者隱藏但占位

Flutter：沒(méi)有單獨(dú)設(shè)置組件是否顯示的api，只能通過(guò) bool 值控制是否添加該組件

事件監(jiān)聽(tīng)

Android：常規(guī)的setOnClickListener和setOnLongClickListener設(shè)置單擊和長(zhǎng)按事件

Flutter：在需要添加事件監(jiān)聽(tīng)的組件外層嵌套 InkWell 或 GestureDetector 并設(shè)置 onTap 等

3、生命周期

Android：

Activity和Fragment各自有完整的生命周期鏈路onCreate、onStart、onResume、onPause、onDestroy等

Flutter：

萬(wàn)物皆組件，組件繼承 WidgetsBindingObserver 并重寫(xiě) didChangeAppLifecycleState 函數(shù)進(jìn)行監(jiān)聽(tīng)

退回桌面依次執(zhí)行inactive 》= paused，此時(shí)界面不可見(jiàn)用戶(hù)不可操作，從桌面重新進(jìn)入app執(zhí)行resumed，狀態(tài)較少如需在某些條件下觸發(fā)特定操作可能要找別的方案，比如發(fā)通知之類(lèi)的

Flutter 可滾動(dòng)組件 之 SingleChildScrollView （十五）

SingleChildScrollView 源碼定義如下：

需要注意的是， 通常 SingleChildScrollView 只應(yīng)在期望的內(nèi)容不會(huì)超過(guò)屏幕太多時(shí)使用 ，這是因?yàn)?SingleChildScrollView 不支持基于 Sliver 的延遲加載模型，所以如果預(yù)計(jì)視口可能包含超出屏幕尺寸太多的內(nèi)容時(shí)，那么使用 SingleChildScrollView 將會(huì)非常昂貴（性能差），此時(shí)應(yīng)該使用一些支持Sliver延遲加載的可滾動(dòng)組件，如 ListView 。

示例1

下面是一個(gè)將大寫(xiě)字母 A-Z 沿垂直方向顯示的例子，由于垂直方向空間會(huì)超過(guò)屏幕視口高度，所以我們使用SingleChildScrollView：

示例2

示例3 - 橫向滾動(dòng)