Flutter Web网站之ScrollView+GridView优化

简介: Flutter Web网站之ScrollView+GridView优化

往期


上期回顾


上期我们做了简单的分包处理,然后就用了SingleChildScrollView+GridView为主要的框架实现了网格布局以及上下滑动效果,Chrome Web以及原生体验并没有发现什么问题,可在微信的Web浏览器中发现根本滑不动。这是什么问题呢?接下来会揭晓。

本期内容


本期主要解决App内置浏览器中滑动不顺畅的问题

搜索问题


顺着我们的问题,在google中搜索flutter web gridview inside singlechildscrollview scroll 等关键字 如图所示

image.png

我选择Stack Overflow的解答,点进去看到两个答案如图

image.png

第一个答案我们已经在使用了,这个是禁止掉了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。大致对它有了认识之后,我们来改造一下我们原来的实现。

新的实现


image.png

SingleChildScrollView替换CustomScrollView,Column去掉,将原来的_buildHead包一层SliverToBoxAdapter。将之前的GridView替换为SliverGrid,他俩的区别就是在于SliverGrid去除了GridView自身的滑动处理,交给了上一层,属性用法基本一致,不用大动干戈。整体修改起来比较简单。

替换的结果


结果还是不错的,在App内置Web中也能流畅的滑动了,通过这次学到,以后遇到页面复杂的布局,又需要统一的滑动处理的时候,就要考虑使用CustomScrollView,你学到了吗?请你忘掉SingleChildScrollView+ListView、GridView的使用吧。

源码


请转github代码查看完整实现

ToDo


该部分内容后期慢慢给大家更新,请客观不要着急,当然你可以参与进来,私聊我就行哦。

  • 示例部准备下期实现,跳转至详情页面,并展示用例。源码已经完成点击即可跳转至github。
  • Tags 部分下期实现,这部分也需要新的UI展现,标签的功能类似与搜索,提供更快捷的方式查找想要的功能。
  • 留言功能设计,在你们使用过程中肯定会有不同的建议,有了这个功能就能知道你们的心声,所以这也是我们需要的实现的一个功能。
  • 优秀的项目推荐,有很多优秀的项目等待着我们去发现,我一个人的能力有限,如果有更多的人来推荐,会不断丰富我们的Jetpack内容。
  • 博客,这里考虑到有很多优秀的大佬,写过相关技术博客,帮你寻找最优秀的资源。功能设计如下图新增按钮。

image.png

结束


网站jetpack.net.cn,欢迎常来,也希望能在你学习Flutter的道路上提供一丢丢的帮助。

目录
相关文章
|
2月前
|
Web App开发 前端开发 JavaScript
探索Python科学计算的边界:利用Selenium进行Web应用性能测试与优化
【10月更文挑战第6天】随着互联网技术的发展,Web应用程序已经成为人们日常生活和工作中不可或缺的一部分。这些应用不仅需要提供丰富的功能,还必须具备良好的性能表现以保证用户体验。性能测试是确保Web应用能够快速响应用户请求并处理大量并发访问的关键步骤之一。本文将探讨如何使用Python结合Selenium来进行Web应用的性能测试,并通过实际代码示例展示如何识别瓶颈及优化应用。
146 5
|
1月前
|
缓存 前端开发 数据安全/隐私保护
Flutter 框架提供了丰富的机制和方法来优化键盘处理和输入框体验
在移动应用开发中,Flutter 框架提供了丰富的机制和方法来优化键盘处理和输入框体验。本文深入探讨了键盘的显示与隐藏、输入框的焦点管理、键盘类型的适配、输入框高度自适应、键盘遮挡问题处理及性能优化等关键技术,结合实例分析,旨在帮助开发者提升应用的用户体验。
46 6
|
2月前
|
Web App开发 前端开发 JavaScript
Web开发者必收藏的10个实用网站,你还没收藏吗?
将这些网站收藏起来,定期访问,使它们成为您日常工作的一部分,助您在快速发展的 Web 开发领域保持领先。
130 2
Web开发者必收藏的10个实用网站,你还没收藏吗?
|
1月前
|
人工智能 搜索推荐 PHP
PHP在Web开发中的璀璨星辰:构建动态网站的幕后英雄###
【10月更文挑战第25天】 本文将带您穿越至PHP的宇宙,揭示其作为Web开发常青树的奥秘。通过生动实例与深入解析,展现PHP如何以简便、高效、灵活的姿态,赋能开发者打造动态交互式网站,同时不忘探讨其在新时代技术浪潮中面临的挑战与机遇,激发对技术创新与应用的无限思考。 ###
38 1
|
2月前
|
机器学习/深度学习 缓存 监控
利用机器学习优化Web性能和用户体验
【10月更文挑战第16天】本文探讨了如何利用机器学习技术优化Web性能和用户体验。通过分析用户行为和性能数据,机器学习可以实现动态资源优化、预测性缓存、性能瓶颈检测和自适应用户体验。文章还介绍了实施步骤和实战技巧,帮助开发者更有效地提升Web应用的速度和用户满意度。
|
2月前
|
SQL 关系型数据库 数据库
优化Web开发流程:Python ORM的优势与实现细节
【10月更文挑战第4天】在Web开发中,数据库操作至关重要,但直接编写SQL语句既繁琐又易错。对象关系映射(ORM)技术应运而生,让开发者以面向对象的方式操作数据库,显著提升了开发效率和代码可维护性。本文探讨Python ORM的优势及其实现细节,并通过Django ORM的示例展示其应用。ORM提供高级抽象层,简化数据库操作,提高代码可读性,并支持多种数据库后端,防止SQL注入。Django内置强大的ORM系统,通过定义模型、生成数据库表、插入和查询数据等步骤,展示了如何利用ORM简化复杂的数据库操作。
70 6
|
2月前
|
缓存 前端开发 JavaScript
探索现代Web开发中的前端性能优化策略
【10月更文挑战第5天】探索现代Web开发中的前端性能优化策略
WK
|
1月前
|
安全 Java 编译器
C++和Java哪个更适合开发web网站
在Web开发领域,C++和Java各具优势。C++以其高性能、低级控制和跨平台性著称,适用于需要高吞吐量和低延迟的场景,如实时交易系统和在线游戏服务器。Java则凭借其跨平台性、丰富的生态系统和强大的安全性,广泛应用于企业级Web开发,如企业管理系统和电子商务平台。选择时需根据项目需求和技术储备综合考虑。
WK
99 0
|
2月前
|
缓存 前端开发 JavaScript
构建高性能Web应用:优化前端性能的策略
构建高性能Web应用:优化前端性能的策略
|
2月前
|
Android开发 iOS开发 容器
鸿蒙harmonyos next flutter混合开发之开发FFI plugin
鸿蒙harmonyos next flutter混合开发之开发FFI plugin