建站
咨詢
售后
建站咨詢
新聞中心
Flutter 121: 圖解簡(jiǎn)易 Slider 滑動(dòng)條
小菜在業(yè)務(wù)開(kāi)發(fā)過(guò)程中會(huì)自定義 Slider 滑動(dòng)條，而在自定義之前，小菜先簡(jiǎn)單了解一下 Flutter 自帶的 Slider ；
創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比大興網(wǎng)站開(kāi)發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式大興網(wǎng)站制作公司更省心,省錢(qián),快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋大興地區(qū)。費(fèi)用合理售后完善，10多年實(shí)體公司更值得信賴。
簡(jiǎn)單分析源碼可得， Slider 是一個(gè)有狀態(tài)的 StatefulWidget 組件，屬性也很清晰易懂，其中滑動(dòng)過(guò)程中對(duì)應(yīng)的 value 值和 onChanged 回調(diào)是必須參數(shù)；
value 未滑動(dòng)過(guò)程中對(duì)應(yīng)的值，在 min 和 max 之間； onChanged 是在滑動(dòng)過(guò)程中回調(diào)，當(dāng) onChanged 為 null 或 value 所在的 min 和 max 集合范圍為空時(shí)， Slider 禁止滑動(dòng)；
min 和 max 為滑動(dòng)條范圍，而 value 的取值范圍是在 min 和 max 之間，無(wú)論 value 為正還是負(fù)，均需要在 min 和 max 之間；
activeColor 為滑動(dòng)條已滑動(dòng)過(guò)的顏色； inactiveColor 為滑動(dòng)條中未滑動(dòng)的顏色；兩者均可以在 SliderTheme 中設(shè)置；
label 為滑動(dòng)條滑動(dòng)到某一節(jié)點(diǎn)的標(biāo)簽文案； divisions 是把 min 和 max 等分為 divisions 份數(shù)；只有在 divisions 生效時(shí)， label 才會(huì)展示；
onChangeStart 和 onChangeEnd 分別對(duì)應(yīng)滑動(dòng)過(guò)程中 value 值何時(shí)開(kāi)始更改或何時(shí)完成更改時(shí)對(duì)應(yīng)的回調(diào)；
Slider 的主題效果可以通過(guò) SliderTheme 或 ThemeData.sliderTheme 中獲取更新，相較于 Slider 只提供已滑動(dòng)和未滑動(dòng)顏色效果，屬性粒度更細(xì)；
activeTrackColor 和 inactiveTrackColor 分別對(duì)應(yīng) Slider 已滑動(dòng)過(guò)和未滑動(dòng)過(guò)的軌道顏色；
thumbColor 對(duì)應(yīng)滑動(dòng)按鈕顏色，而 overlayColor 對(duì)應(yīng)滑動(dòng)按鈕映射的疊層顏色，通常設(shè)置為半透明狀態(tài)； overlayShape 對(duì)應(yīng)疊層樣式；
valueIndicatorColor 對(duì)應(yīng) label 氣泡顏色； valueIndicatorShape 對(duì)應(yīng)氣泡內(nèi)文字屬性； valueIndicatorShape 對(duì)應(yīng)氣泡樣式，可以再此進(jìn)行自定義氣泡；
activeTickMarkColor 對(duì)應(yīng)已選中刻度顏色； inactiveTickMarkColor 對(duì)應(yīng)未選中刻度顏色； tickMarkShape 對(duì)應(yīng)刻度樣式；
trackHeight 為 Slider 軌道高度； trackShape 對(duì)應(yīng)軌道樣式，主要再此處進(jìn)行自定義樣式；
對(duì)于不可滑動(dòng)狀態(tài)， SliderThemeData 提供了對(duì)應(yīng)屬性；
Slider 案例源碼
小菜本節(jié)暫未涉及自定義滑動(dòng)條樣式，對(duì)于底層的 Slider 了解還不夠深入；如有錯(cuò)誤，請(qǐng)多多指導(dǎo)！
Flutter CustomScrollView 自定義滑動(dòng)效果
基本和AppBar一樣,只是他只能在CustomScrollView中使用,應(yīng)該很常見(jiàn),滑動(dòng)的時(shí)候固定appbar,就需要用到他.
大部分和appbar一樣,主要說(shuō)下重要的幾個(gè):
是否將導(dǎo)航欄部分固定在appbar的位置.這個(gè)需求在實(shí)際中很常用. 看看效果圖.
當(dāng) pinned = false:
可以看到appbar并沒(méi)有固定在最上面,而是根據(jù)內(nèi)容劃出了界面.
當(dāng) pinned = true :
這個(gè)應(yīng)該是需求中經(jīng)常用到的效果了.
當(dāng)floating = false :
當(dāng)floating = true:
仔細(xì)看 ，區(qū)別是在列表整體向下滑動(dòng)時(shí),appbar開(kāi)始顯示的位置不同.
當(dāng)為false時(shí) ,向下滑動(dòng)時(shí),會(huì)先降列表內(nèi)容滑動(dòng)頂部,然后appbar會(huì)跟著列表滑動(dòng)顯示出來(lái).如上圖
當(dāng)為true時(shí), 向下滑動(dòng)時(shí),appbar會(huì)先跟著列表滑動(dòng)顯示出來(lái). 然后繼續(xù)列表的滑動(dòng). 如上圖
不能單獨(dú)使用要配合 ****floating 和 ****pinned
具體效果看官網(wǎng)地址
是否展開(kāi),默認(rèn)false,直接看值為true的效果圖,就明白了.
可以再里面添加擴(kuò)展的內(nèi)容:
通過(guò)測(cè)試發(fā)現(xiàn) **后面不是 FlexibleSpaceBar 的話, stretch = true 無(wú)效. **
和Padding一樣.子控件是 sliver 類型...
上圖中在padding中添加了一個(gè)背景色為青色的容器widget
里面可以設(shè)置不是 sliver 類型的widget。如上圖中的 padding中添加的 container
就兩個(gè)協(xié)議,一個(gè)是布局協(xié)議一個(gè)展示協(xié)議.基本和GridView一樣.也有count和extext... 不設(shè)置個(gè)數(shù)默認(rèn)無(wú)數(shù)個(gè)
SliverChildListDelegate 這種方式前提是知道cell個(gè)數(shù)，比較少，好搭建
SliverChildBuilderDelegate 這種方式，可以根據(jù)數(shù)組去創(chuàng)建，不知道cell個(gè)數(shù)
和listview差不多.也是協(xié)議 不設(shè)置個(gè)數(shù)默認(rèn)無(wú)數(shù)個(gè)
Flutter 滑動(dòng)、縮放控件
onInteractionEnd 交互結(jié)束
onInteractionStart 交互開(kāi)始
onInteractionUpdate 滑動(dòng)時(shí)候一直會(huì)回調(diào)
focalPoint 是相對(duì)于屏幕左上角的偏移量。
localFocalPoint是相對(duì)于父容器區(qū)域左上角的偏移量。
scale縮放量。
horizontalScale水平縮放量。
verticalScale豎直縮放量。
rotation旋轉(zhuǎn)量。------ 這里說(shuō)明能監(jiān)聽(tīng)到旋轉(zhuǎn)量
還可以通過(guò)transformationController進(jìn)行變換控制，有興趣的可以自己研究。
參考文章
Flutter了解之可滑動(dòng)組件
Flutter官方并沒(méi)有對(duì)Widget進(jìn)行官方分類，對(duì)其分類主要是為了對(duì)Widget進(jìn)行功能區(qū)分。
當(dāng)組件內(nèi)容超過(guò)當(dāng)前顯示窗口時(shí)，如果沒(méi)有特殊處理，F(xiàn)lutter則會(huì)提示Overflow錯(cuò)誤。為此，F(xiàn)lutter提供了多種可滾動(dòng)組件用于顯示列表和長(zhǎng)布局。
在可滾動(dòng)組件的坐標(biāo)描述中，通常將滾動(dòng)方向稱為主軸，非滾動(dòng)方向稱為縱軸。由于可滾動(dòng)組件的默認(rèn)方向一般都是沿垂直方向，所以默認(rèn)情況下主軸就是指垂直方向，水平方向同理。
通常可滾動(dòng)組件的子組件可能會(huì)非常多、占用的總高度也會(huì)非常大；如果要一次性將子組件全部構(gòu)建出將會(huì)非常昂貴！為此，F(xiàn)lutter中提出一個(gè)Sliver（中文為“薄片”的意思）概念，如果一個(gè)可滾動(dòng)組件支持Sliver模型，那么該滾動(dòng)可以將子組件分成好多個(gè)“薄片”（Sliver），只有當(dāng)Sliver出現(xiàn)在視口中時(shí)才會(huì)去構(gòu)建它，這種模型也稱為“基于Sliver的延遲構(gòu)建模型”。
可滾動(dòng)組件中有很多都支持基于Sliver的延遲構(gòu)建模型，如ListView、GridView，但是也有不支持該模型的，如SingleChildScrollView。
在很多布局系統(tǒng)中都有ViewPort的概念，在Flutter中，術(shù)語(yǔ)ViewPort（視口），如無(wú)特別說(shuō)明，則是指一個(gè)Widget的實(shí)際顯示區(qū)域。例如: 一個(gè)ListView的顯示區(qū)域高度是800像素，雖然其列表項(xiàng)總高度可能遠(yuǎn)遠(yuǎn)超過(guò)800像素，但是其ViewPort仍然是800像素。
可滾動(dòng)組件都直接或間接包含一個(gè)Scrollable組件
如果要給可滾動(dòng)組件添加滾動(dòng)條，只需將Scrollbar作為可滾動(dòng)組件的任意一個(gè)父級(jí)組件。
沿一個(gè)方向線性排布所有子組件。支持基于Sliver的延遲構(gòu)建模型。
ListView高度邊界無(wú)法確定時(shí)會(huì)異常。
默認(rèn)構(gòu)造函數(shù)有一個(gè)children參數(shù)，它接受一個(gè)Widget列表。
實(shí)際上通過(guò)此方式創(chuàng)建的ListView和使用SingleChildScrollView+Column的方式?jīng)]有本質(zhì)的區(qū)別。
適合只有少量的子組件的情況，因?yàn)檫@種方式需要將所有children都提前創(chuàng)建好（這需要做大量工作），而不是等到子widget真正顯示的時(shí)候再創(chuàng)建，也就是說(shuō)通過(guò)默認(rèn)構(gòu)造函數(shù)構(gòu)建的ListView沒(méi)有應(yīng)用基于Sliver的懶加載模型。
例
例
例（水平滾動(dòng)）
適合列表項(xiàng)比較多（或者無(wú)限）的情況，因?yàn)橹挥挟?dāng)子組件真正顯示的時(shí)候才會(huì)被創(chuàng)建，也就說(shuō)通過(guò)該構(gòu)造函數(shù)創(chuàng)建的ListView是支持基于Sliver的懶加載模型的。
例
例
例（不同類型的item）
ListView.separated可以在生成的列表項(xiàng)之間添加一個(gè)分割組件，它比ListView.builder多了一個(gè)separatorBuilder參數(shù)，該參數(shù)是一個(gè)分割組件生成器。
例
例
類似于Android中的ScrollView，它只能接收一個(gè)子組件。
通常內(nèi)容不會(huì)超過(guò)屏幕太多時(shí)使用SingleChildScrollView，這是因?yàn)樗恢С只赟liver的延遲實(shí)例化模型，所以如果預(yù)計(jì)視口可能包含超出屏幕尺寸太多的內(nèi)容時(shí)，那么使用SingleChildScrollView將會(huì)非常昂貴（性能差），此時(shí)應(yīng)該使用一些支持Sliver延遲加載的可滾動(dòng)組件，如ListView。
例（將大寫(xiě)字母A-Z沿垂直方向顯示）
一個(gè)二維網(wǎng)格列表
GridView和ListView的大多數(shù)參數(shù)都是相同的。
橫軸為固定數(shù)量子元素。
GridView.count構(gòu)造函數(shù)內(nèi)部使用了SliverGridDelegateWithFixedCrossAxisCount。
例
例（GridView.count）
該子類實(shí)現(xiàn)了一個(gè)橫軸子元素為固定最大長(zhǎng)度的layout算法
例
當(dāng)子widget比較多時(shí)，可以通過(guò)GridView.builder來(lái)動(dòng)態(tài)創(chuàng)建子widget。
GridView.builder 必須指定的參數(shù)有兩個(gè)，其中itemBuilder為子widget構(gòu)建器。
例
舉個(gè)例子，假設(shè)有一個(gè)頁(yè)面，頂部需要一個(gè)GridView，底部需要一個(gè)ListView，而要求整個(gè)頁(yè)面的滑動(dòng)效果是統(tǒng)一的，即它們看起來(lái)是一個(gè)整體。如果使用GridView+ListView來(lái)實(shí)現(xiàn)的話，就不能保證一致的滑動(dòng)效果，因?yàn)樗鼈兊臐L動(dòng)效果是分離的。
所以這時(shí)就需要一個(gè)"膠水"，把這些彼此獨(dú)立的可滾動(dòng)組件"粘"起來(lái)，而CustomScrollView的功能就相當(dāng)于“膠水”。
Sliver有細(xì)片、薄片之意，在Flutter中Sliver通常指可滾動(dòng)組件子元素。在CustomScrollView中，需要粘起來(lái)的可滾動(dòng)組件就是CustomScrollView的Sliver了，如果直接將ListView、GridView作為CustomScrollView是不行的，因?yàn)樗鼈儽旧硎强蓾L動(dòng)組件而并不是Sliver。
因此，為了能讓可滾動(dòng)組件能和CustomScrollView配合使用，F(xiàn)lutter提供了一些可滾動(dòng)組件的Sliver版，如SliverList、SliverGrid等。
實(shí)際上Sliver版的可滾動(dòng)組件和非Sliver版的可滾動(dòng)組件最大的區(qū)別就是前者不包含滾動(dòng)模型（自身不能再滾動(dòng)），而后者包含滾動(dòng)模型 ，也正因如此，CustomScrollView才可以將多個(gè)Sliver"粘"在一起，這些Sliver共用CustomScrollView的Scrollable，所以最終才實(shí)現(xiàn)了統(tǒng)一的滑動(dòng)效果。
例（SliverList）
例（SliverGrid）
可以用ScrollController來(lái)控制可滾動(dòng)組件的滾動(dòng)位置
例
滾動(dòng)位置恢復(fù)
ScrollPosition
ScrollController控制原理
滾動(dòng)監(jiān)聽(tīng)
例
Flutter：手把手教你使用滾動(dòng)型列表組件：ListView
ListView的基礎(chǔ)創(chuàng)建使用有三種方式：
通過(guò)默認(rèn)構(gòu)造函數(shù)來(lái)創(chuàng)建列表，應(yīng)用場(chǎng)景 = 短列表
這種方式創(chuàng)建的列表存在一個(gè)問(wèn)題：對(duì)于那些長(zhǎng)列表或者需要較昂貴渲染開(kāi)銷的子組件，即使還沒(méi)有出現(xiàn)在屏幕中但仍然會(huì)被ListView所創(chuàng)建，這將是一項(xiàng)較大的開(kāi)銷，使用不當(dāng)可能引起性能問(wèn)題甚至卡頓。
長(zhǎng)列表
列表子項(xiàng)之間需要分割線
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類型的通知，可通過(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自然滑動(dòng),flutter 側(cè)滑
本文來(lái)源：http://www.ef60e0e.cn/article/hoijgp.html
