这个app是基于商城模式之上开发,重点是关注英语的同步听学,这里着重介绍尤其是关于音频播放和字幕同步的功能。熟悉flutter开发的同学们都知道,flutter中listview在加载的过程中,如果每个item的高度不相等,那么需要自动定位到指定item并显示出来是多么困难。
在这个项目中,我们通过动态加载每个item的高度和长度的方式,来实现精确的定位到指定位置,实现音频和字幕的完全自动同步滚动。如本项目中所示例,一篇英语音频需要同步中英文字幕,这个中英文字幕是整篇加载出来,而不是一条一条显示出来,通过拖动进度条可以定位到字幕位置,或者点击字幕中的位置定位到音频位置。这种模式同样适用于音乐播放。
因为涉及音乐播放,浏览其他页面的时候必然涉及暂停和退出,这里也实现了同步功能。这也是参考github上一些大神的代码的。
本项目中已经集成了微信分享和微信支付的功能,有需要的同学可以直接参考使用。
另外本项目中首页和详细页的布局也可供广大flutter开发者参考。
flutter开发环境:Channel stable, v1.12.13+hotfix.50
项目地址:https://github.com/xiebaoxin/flutter_english
对同学有帮助的话请给star。
特别说明:
网友评论