往期
上期回顧
上期我們做了簡單的分包處理，然后就用了SingleChildScrollView+GridView為主要的框架實現(xiàn)了網(wǎng)格布局以及上下滑動效果，Chrome Web以及原生體驗并沒有發(fā)現(xiàn)什么問題，可在微信的Web瀏覽器中發(fā)現(xiàn)根本滑不動。這是什么問題呢？接下來會揭曉。
本期內(nèi)容
本期主要解決App內(nèi)置瀏覽器中滑動不順暢的問題
搜索問題
順著我們的問題，在google中搜索flutter web gridview inside singlechildscrollview scroll 等關(guān)鍵字
第一個答案我們已經(jīng)在使用了，這個是禁止掉了GridView的滑動效果來實現(xiàn)將滑動的事件處理交給SingleChildScrollView。很明顯我們要用第二種方案實現(xiàn)CustomScrollView。
看文檔
官方文檔
中文文檔
建議以官方文檔為主，看不懂的話用中文文檔輔助理解，因為官方文檔一直保持最新，中文由于維護的原因會有延遲。不啰嗦，我來給你解釋下。
CustomScrollView是一個負責滑動管理的容器，所有的子View統(tǒng)一實現(xiàn)Scrollable，如果你還用本身具有滑動處理的GridView，肯定是不行的，所以它就為我們提供了一整套的組件供我們使用。
- SliverList, 線性列表.
- SliverFixedExtentList, 和上面都屬于List，但高度固定。
- SliverGrid, 網(wǎng)格列表
- SliverPadding, 為子View加一個內(nèi)邊距
- SliverAppBar, 帶有AppBar的頭部視圖
- ScrollNotification and NotificationListener, 可用于查看滾動位置，而無需使用 ScrollController.
-
IndexedSemantics, 意思是為子View添加一個索引，用來通知滾動位置。
注意：目前為止CustomScrollView的第一層子View必須是以上組件的構(gòu)成，官方文檔還少寫了一個SliverToBoxAdapter，它同樣是針對CustomScrollView來實現(xiàn)的特殊組件，看它的構(gòu)造函數(shù)只有一個Key和child，其實他就是一個實現(xiàn)了CustomScrollView Scrollable的一個容器，用來作為CustomScrollView的第一層子View。大致對它有了認識之后，我們來改造一下我們原來的實現(xiàn)。
新的實現(xiàn)
SingleChildScrollView替換CustomScrollView，Column去掉，將原來的_buildHead包一層SliverToBoxAdapter。將之前的GridView替換為SliverGrid，他倆的區(qū)別就是在于SliverGrid去除了GridView自身的滑動處理，交給了上一層，屬性用法基本一致，不用大動干戈。整體修改起來比較簡單。
替換的結(jié)果
結(jié)果還是不錯的，在App內(nèi)置Web中也能流暢的滑動了，通過這次學到，以后遇到頁面復雜的布局，又需要統(tǒng)一的滑動處理的時候，就要考慮使用CustomScrollView，你學到了嗎？請你忘掉SingleChildScrollView+ListView、GridView的使用吧。
源碼
請轉(zhuǎn)github代碼查看完整實現(xiàn)
ToDo
該部分內(nèi)容后期慢慢給大家更新，請客觀不要著急，當然你可以參與進來，私聊我就行哦。
- 示例部準備下期實現(xiàn)，跳轉(zhuǎn)至詳情頁面，并展示用例。源碼已經(jīng)完成點擊即可跳轉(zhuǎn)至github。
- Tags 部分下期實現(xiàn)，這部分也需要新的UI展現(xiàn)，標簽的功能類似與搜索，提供更快捷的方式查找想要的功能。
- 留言功能設(shè)計，在你們使用過程中肯定會有不同的建議，有了這個功能就能知道你們的心聲，所以這也是我們需要的實現(xiàn)的一個功能。
- 優(yōu)秀的項目推薦，有很多優(yōu)秀的項目等待著我們?nèi)グl(fā)現(xiàn)，我一個人的能力有限，如果有更多的人來推薦，會不斷豐富我們的Jetpack內(nèi)容。
-
博客，這里考慮到有很多優(yōu)秀的大佬，寫過相關(guān)技術(shù)博客，幫你尋找最優(yōu)秀的資源。功能設(shè)計如下圖新增按鈕。
結(jié)束
網(wǎng)站jetpack.net.cn，歡迎常來，也希望能在你學習Flutter的道路上提供一丟丟的幫助。
