往期

• Flutter Web網站搭建教程
• Flutter Web 網站之主頁框架搭建
• Flutter Web網站之Jetpack成型

上期回顧

上期我們做了簡單的分包處理，然後就用了SingleChildScrollView+GridView為主要的框架實現了網格佈局以及上下滑動效果，Chrome Web以及原生體驗並沒有發現什麼問題，可在微信的Web瀏覽器中發現根本滑不動。這是什麼問題呢？接下來會揭曉。

本期內容

本期主要解決App內建瀏覽器中滑動不順暢的問題

搜尋問題

順著我們的問題，在google中搜尋flutter web gridview inside singlechildscrollview scroll 等關鍵字 如圖所示

我選擇Stack Overflow的解答，點進去看到兩個答案如圖

第一個答案我們已經在使用了，這個是禁止掉了GridView的滑動效果來實現將滑動的事件處理交給SingleChildScrollView。很明顯我們要用第二種方案實現CustomScrollView。

看文件

官方文件 中文文件 建議以官方文件為主，看不懂的話用中文文件輔助理解，因為官方文件一直保持最新，中文由於維護的原因會有延遲。不囉嗦，我來給你解釋下。 CustomScrollView是一個負責滑動管理的容器，所有的子View統一實現Scrollable，如果你還用本身具有滑動處理的GridView，肯定是不行的，所以它就為我們提供了一整套的元件供我們使用。

• SliverList, 線性列表.
• SliverFixedExtentList, 和上面都屬於List，但高度固定。
• SliverGrid, 網格列表
• SliverPadding, 為子View加一個內邊距
• SliverAppBar, 帶有AppBar的頭部檢視
• ScrollNotification and NotificationListener, 可用於檢視滾動位置，而無需使用 ScrollController.
• IndexedSemantics, 意思是為子View新增一個索引，用來通知滾動位置。 注意：目前為止CustomScrollView的第一層子View必須是以上元件的構成，官方文件還少寫了一個SliverToBoxAdapter，它同樣是針對CustomScrollView來實現的特殊元件，看它的建構函式只有一個Key和child，其實他就是一個實現了CustomScrollView Scrollable的一個容器，用來作為CustomScrollView的第一層子View。大致對它有了認識之後，我們來改造一下我們原來的實現。

新的實現

SingleChildScrollView替換CustomScrollView，Column去掉，將原來的_buildHead包一層SliverToBoxAdapter。將之前的GridView替換為SliverGrid，他倆的區別就是在於SliverGrid去除了GridView自身的滑動處理，交給了上一層，屬性用法基本一致，不用大動干戈。整體修改起來比較簡單。

替換的結果

結果還是不錯的，在App內建Web中也能流暢的滑動了，通過這次學到，以後遇到頁面複雜的佈局，又需要統一的滑動處理的時候，就要考慮使用CustomScrollView，你學到了嗎？請你忘掉SingleChildScrollView+ListView、GridView的使用吧。

原始碼

請轉github程式碼檢視完整實現

ToDo

該部分內容後期慢慢給大家更新，請客觀不要著急，當然你可以參與進來，私聊我就行哦。

• 示例部準備下期實現，跳轉至詳情頁面，並展示用例。原始碼已經完成點選即可跳轉至github。
• Tags 部分下期實現，這部分也需要新的UI展現，標籤的功能類似與搜尋，提供更快捷的方式查詢想要的功能。
• 留言功能設計，在你們使用過程中肯定會有不同的建議，有了這個功能就能知道你們的心聲，所以這也是我們需要的實現的一個功能。
• 優秀的專案推薦，有很多優秀的專案等待著我們去發現，我一個人的能力有限，如果有更多的人來推薦，會不斷豐富我們的Jetpack內容。
• 部落格，這裡考慮到有很多優秀的大佬，寫過相關技術部落格，幫你尋找最優秀的資源。功能設計如下圖新增按鈕。

  

結束

網站jetpack.net.cn，歡迎常來，也希望能在你學習Flutter的道路上提供一丟丟的幫助。