扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
前端最火热的话题无法就是flutter,不管是刷哪个论坛,必定有探讨flutter的文章。没用过flutter,但是对于跨平台的技术,我一直都在研究。
创新互联专注于企业营销型网站建设、网站重做改版、乌苏网站定制设计、自适应品牌网站建设、H5页面制作、商城建设、集团公司官网建设、成都外贸网站建设、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为乌苏等各大城市提供网站开发制作服务。
为什么是uni-app
之前一直在找解决跨平台的方案,尝试了很多方案,比如滴滴的变色龙,但是最终还是选择了uni-app,这里附上uni-app的官网。为什么会选择它呢,第一,vue语法,学习成本低,上手速度快,只要之前你做过vue的项目,那么就能很快上手,其实是vue和微信小程序的结合体,一半vue,一半微信小程序。第二,长期维护,之前做微信小程序的时候,选择了美团的mpvue,但是后面发现长期不维护了,提了Issues也没人理,随之就放弃了,而uni-app长期在维护,这样看出了开发团队的用心。第三,跨平台的能力,uni-app能够跨多个终端,H5,安卓,Ios,微信小程序,百度小程序,头条小程序,支付宝小程序,真正实现了一套代码,多端运行,而且很好适应了我国的市场。第四,日益丰富的插件市场,uni的插件市场也在日益强大,能够基本上满足我们平时的开发需求。
uni-app的组件有原生调用能力,第三方的vue库在调原生接口时跟 5+runtime 不兼容。就像nativescript 有vue版和angular版,类似于react native , 都是起源于phonegap/cordova
实际开发效果遵义小红椒 做了一款app,打包了安卓,Ios,微信小程序3个平台,产出的效果都还是不错,总体还是比较满意。而且打包过程也很方便简单,配套的HBuilderX自动内置了打包功能,所以也省去了打包的烦恼。
遵义小红椒 建议
如果你现在想做一款跨平台的产品,而且有vue和微信小程序的经验,最重要的,你不想学习一门新语言,那么uni-app也许是你的一个选择。
Flutter 仿抖音效果 (一) 全屏点爱星
Flutter 仿抖音效果 (二) 界面布局
[Flutter 仿抖音效果 (三) 视频播放列表] ( )
项目地址: 持续效果更新
1.基本的布局是简单的,外层通过Stack作为根
2.左边点赞的控件组通过Align进行统一布局
3.顶部控件组通过Positioned进行布局,设置顶部距离,其实也可以用align,我们多使用几种来习惯flutter的布局
4.底部同样使用Positioned,设置底部距离
5.子页面的左右滑动使用PageView,一开始我们要从推荐开始左滑到关注,可以使用reverse属性,不需要更多额外的操作
1.pageController监听
刷新顶部的下划线时,我们一样使用StreamController刷新,这样效率比setstate高很多
2.歌曲名走马灯效果
这个效果看起来挺麻烦的其实实现起来超级的简单用最普通的ListView就能快速的实现
首页listview里面套入的是最简单的container+text
listview添加一个ScrollController做为滑动的控制
使用一个定时器,把listview滑到最大的位置之后,在滑回去
先通过scroController.position.maxScrollExtent获取最大位置,
然后通过scroController.animateTo进行滑动,因为我设置一次循环的时间是3000毫秒,所以滑过去和滑回来的时间各占一般 new Duration(milliseconds: (time * 0.5).toInt()),还有就是歌名没有大于最大宽度时候其实我们不需要进行滑动,所以判断maxScrollExtent是否大于0来确定是否进行滑动动画
众所周知,小程序是由HTML标签来开发原生组件,那么首先需要将HTML做解析,这里我们将HTML通过node脚本解析成JSON字符串,再用Dart来解析JSON,映射对应的标签到flutter的组件。这里先简单介绍实现的功能以及展示效果,后续再详细介绍。
为了高效解析,直接用flutter的组件名在HTML文件上开发
直接使用flutter的组件
模仿微信小程序的Api,cc对应是微信小程序的wx
以上HTML中的例子
《使用Flutter + V8/JsCore开发小程序引擎(二)》
《使用Flutter + V8/JsCore开发小程序引擎(三)》
Flutter教程全套 (全网独家)百度网盘免费资源在线学习
链接:
提取码: m9z8
Flutter教程全套 (全网独家)
第一套:Flutter 携程17章全-整理好
第五套:Flutter高仿谷歌翻译项目课程
第四套:两小时掌握Flutter移动App开发视频
第三套:flutter入门到精通全套
第七套:Flutter小实战20个
第六套:仿直聘boss的flutter完整教程
第九套:Flutter跨平台开发
第二套:flutter移动电商实战-技术胖
第八套:Flutter基础教程(基础不好的优先看)
24Flutter的打包.mp4
23静态资源和项目图片的处理.mp4
22页面跳转并返回数据_.mp4
21导航的参数传递和接受-2_.mp4
20导航的参数传递和接受-1.mp4
在玩安卓上有款组件化开源app的项目,一款模仿 Eyepetizer | 开眼视频的 开源app,这款app设计风格特别喜欢的,比较简洁,美观,然后最近又在学flutter的知识,于是就写了一款flutter版本的开源短视频,效果也是听不错的,废话不多说,先上效果图。
先附上项目地址:
项目api会在后面的参考链接里,或者直接项目内查看。
项目地址:
更新:6/30 项目新增下拉刷新,上拉加载功能
kotlin版本开眼短视频开发中,敬请期待...
总结:在此感谢参考的伙伴的文章,写的也很好,然后我将这个项目改写成了flutter,当中也学习到了很多flutter相关的知识,后续还有继续巩固,不断学习。
参考链接(包含本项目的api)
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流