Flutter Web网站之ScrollView+GridView优化

往期

• 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的道路上提供一丢丢的帮助。