往期
上期回顧
上期我們做了簡(jiǎn)單的分包處理崖瞭，然后就用了SingleChildScrollView+GridView為主要的框架實(shí)現(xiàn)了網(wǎng)格布局以及上下滑動(dòng)效果狂巢，Chrome Web以及原生體驗(yàn)并沒有發(fā)現(xiàn)什么問題，可在微信的Web瀏覽器中發(fā)現(xiàn)根本滑不動(dòng)书聚。這是什么問題呢唧领？接下來會(huì)揭曉。
本期內(nèi)容
本期主要解決App內(nèi)置瀏覽器中滑動(dòng)不順暢的問題
搜索問題
順著我們的問題雌续，在google中搜索flutter web gridview inside singlechildscrollview scroll 等關(guān)鍵字
第一個(gè)答案我們已經(jīng)在使用了，這個(gè)是禁止掉了GridView的滑動(dòng)效果來實(shí)現(xiàn)將滑動(dòng)的事件處理交給SingleChildScrollView驯杜。很明顯我們要用第二種方案實(shí)現(xiàn)CustomScrollView萨驶。
看文檔
官方文檔
中文文檔
建議以官方文檔為主，看不懂的話用中文文檔輔助理解艇肴，因?yàn)楣俜轿臋n一直保持最新腔呜，中文由于維護(hù)的原因會(huì)有延遲叁温。不啰嗦，我來給你解釋下核畴。
CustomScrollView是一個(gè)負(fù)責(zé)滑動(dòng)管理的容器膝但，所有的子View統(tǒng)一實(shí)現(xiàn)Scrollable，如果你還用本身具有滑動(dòng)處理的GridView谤草，肯定是不行的跟束，所以它就為我們提供了一整套的組件供我們使用。
- SliverList, 線性列表.
- SliverFixedExtentList, 和上面都屬于List丑孩，但高度固定冀宴。
- SliverGrid, 網(wǎng)格列表
- SliverPadding, 為子View加一個(gè)內(nèi)邊距
- SliverAppBar, 帶有AppBar的頭部視圖
- ScrollNotification and NotificationListener, 可用于查看滾動(dòng)位置，而無需使用 ScrollController.
-
IndexedSemantics, 意思是為子View添加一個(gè)索引温学，用來通知滾動(dòng)位置略贮。
注意：目前為止CustomScrollView的第一層子View必須是以上組件的構(gòu)成，官方文檔還少寫了一個(gè)SliverToBoxAdapter仗岖，它同樣是針對(duì)CustomScrollView來實(shí)現(xiàn)的特殊組件逃延，看它的構(gòu)造函數(shù)只有一個(gè)Key和child，其實(shí)他就是一個(gè)實(shí)現(xiàn)了CustomScrollView Scrollable的一個(gè)容器轧拄，用來作為CustomScrollView的第一層子View揽祥。大致對(duì)它有了認(rèn)識(shí)之后，我們來改造一下我們?cè)瓉淼膶?shí)現(xiàn)檩电。
新的實(shí)現(xiàn)
SingleChildScrollView替換CustomScrollView拄丰，Column去掉，將原來的_buildHead包一層SliverToBoxAdapter俐末。將之前的GridView替換為SliverGrid愈案，他倆的區(qū)別就是在于SliverGrid去除了GridView自身的滑動(dòng)處理，交給了上一層鹅搪，屬性用法基本一致站绪，不用大動(dòng)干戈。整體修改起來比較簡(jiǎn)單丽柿。
替換的結(jié)果
結(jié)果還是不錯(cuò)的恢准，在App內(nèi)置Web中也能流暢的滑動(dòng)了，通過這次學(xué)到甫题，以后遇到頁面復(fù)雜的布局馁筐，又需要統(tǒng)一的滑動(dòng)處理的時(shí)候，就要考慮使用CustomScrollView坠非，你學(xué)到了嗎敏沉？請(qǐng)你忘掉SingleChildScrollView+ListView、GridView的使用吧。
源碼
請(qǐng)轉(zhuǎn)github代碼查看完整實(shí)現(xiàn)
ToDo
該部分內(nèi)容后期慢慢給大家更新盟迟，請(qǐng)客觀不要著急秋泳，當(dāng)然你可以參與進(jìn)來，私聊我就行哦攒菠。
- 示例部準(zhǔn)備下期實(shí)現(xiàn)迫皱，跳轉(zhuǎn)至詳情頁面，并展示用例辖众。源碼已經(jīng)完成點(diǎn)擊即可跳轉(zhuǎn)至github卓起。
- Tags 部分下期實(shí)現(xiàn)，這部分也需要新的UI展現(xiàn)凹炸，標(biāo)簽的功能類似與搜索戏阅，提供更快捷的方式查找想要的功能。
- 留言功能設(shè)計(jì)啤它，在你們使用過程中肯定會(huì)有不同的建議奕筐，有了這個(gè)功能就能知道你們的心聲，所以這也是我們需要的實(shí)現(xiàn)的一個(gè)功能蚕键。
- 優(yōu)秀的項(xiàng)目推薦救欧，有很多優(yōu)秀的項(xiàng)目等待著我們?nèi)グl(fā)現(xiàn)衰粹，我一個(gè)人的能力有限锣光，如果有更多的人來推薦，會(huì)不斷豐富我們的Jetpack內(nèi)容铝耻。
-
博客誊爹，這里考慮到有很多優(yōu)秀的大佬，寫過相關(guān)技術(shù)博客瓢捉，幫你尋找最優(yōu)秀的資源频丘。功能設(shè)計(jì)如下圖新增按鈕。
結(jié)束
網(wǎng)站jetpack.net.cn泡态，歡迎常來搂漠，也希望能在你學(xué)習(xí)Flutter的道路上提供一丟丟的幫助。
