往期
上期回顾
上期我们做了简单的分包处理,然后就用了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的道路上提供一丢丢的帮助。