学习Flutter一段时间了,特来总结一下遇到的点点滴滴。如下效果就是我用Flutter重写的曾经项目部分效果,说是部分其实能看到的就tm的一个首页列表。
1、为啥只写了一个页面?
熟悉一个技能写一个页面怎能体现出来?但是本身时间有限,作为快速熟悉上手很难一次性完成。
但是我相信你能很好的做出一个功能页面,其他的功能还会是问题吗?所以作为初试牛刀,入门小结,我就以此为路线,记录下遇到的坑坑洼洼。
2、先看下运行效果吧
gif动图:
不会动的静态图:
图1 | 图2 |
---|---|
OK看仔细点, 效果看起来是不是还可以?我感觉还行,至少在安卓和苹果上运行起来基本一致。
3、涉及到的知识点
其实单看页面感觉涉及到的东西不多,但背后同时也隐含了很多。大致归纳下吧;
- 工程及环境搭建、配置,相信很多人在这里停留了很久;
- android、iOS图标、启动页等资源相关的引入及设置;
- 第三方字体图标的使用、第三方依赖库的引入和使用,这有具体的描述: Flutter-引入第三方依赖包
- 基于Dio网络访问的操作封装和数据请求;这个开始很烦,耽误我不少功夫;
- 导航栏的自定义、列表布局、flex相关操作;
- 主题样式配置、局部主题设置颜色及样式相关;
- 时间日期格式化,页面间导航跳转、路由相关;
- 其他系统容器类组件、图片、文本等组件的使用;
- 自定义了组件、页面(其实也是组件)等;
- Dart语言学习、Flutter中文档反反复复的去看;
OK,一时想到的就这些了;放个工程全貌截图吧;
4、遇到的问题
别看一个简单的开始,遇到的问题太多,多的我都记不清有哪些了,反正佛挡杀佛、鬼挡杀鬼,一切问题直接干就得了;
问题1:导航栏相关:
系统自带的导航栏感觉好高,看起来怪怪的,而且在Andorid点击返回按钮时,你还下面提示个“返回”,感觉很不爽。所以我直接用自定义的了;
问题2:第三方依赖包引入使用问题(Dio):
这个不再细说了,看Flutter-引入第三方依赖包详细总计。
问题3:Dio使用、Charles抓包相关:
为什么我要抓包了?因为我看到文档说:
第一感觉,好爽,不用自己处理转化数据了;但是按照相关参数设置后,我测试接口返回的还是字符串,还是要自己去json转化。所以我要抓包了看看咋回事;
然后又引入下一个问题:
按曾经的操作、设备安装证书、设置代理、IP等,结果没啥反应;安卓、苹果设备来回换都是没反应。证书删了又装,总怀疑自己哪里不对;之前的其他APP在抓就是有结果的;难道Flutter不支持抓包了???
于是一番搜索,知道了:Flutter应用抓包的话,代码中也必须设置代理;就像这样:
然后,Charles就一切正常了!
问题4:Tab切换页面,切回原来的页面还是重新创建:
bottomNavigationBar: BottomNavigationBar
每次来回切换,网络请求都要来一次,这样真的不好。最后换成iOS风格的解决:
return CupertinoTabScaffold(
resizeToAvoidBottomInset: false,
tabBar: CupertinoTabBar(
iconSize: 22,
activeColor: Color.fromARGB(255, 68, 68, 68),
inactiveColor:Color(0xff929292) ,
items: widget._barItem,
), tabBuilder: (ctx , index){
return widget._pageList[index];
});
5、关于Flutter,我是如何学习的?
不少人提到Flutter,不由自主会说,太难了、门槛太高了、真要入门真是不容易!
还有Flutter的层层嵌套真是恶心人!
学习Flutter还要重新学习一门Dart语言!
还有说原生不香吗,Flutter什么Flutter?(这也我无语了,我是要跨平台的,你还给说谁香不香,难道我不知道谁香吗?我们就是要跨平台你说怎么整吧?);
- 我看了一本书<Flutter技术入门与实战>,前前后后看了两遍,知其大概、了解属性,组件相关用法、Dart语法等;
- 不定时翻阅官方文档、中文的,看组件用法、手动实践也想不起了再回来继续看;
- 写一个页面,哪怕只有一个按钮,只输出一个helloworld;
- 原生过来的,转变下思维、特别是布局,弹性盒子模型的思想和H5那里很像,还有一切都是组件。dart嵌套层次多也是事实,但可以对代码抽取再组件、调用也会很清爽;
- 不要被传说吓到,自己去试了才知道;
6、最后
写到最后,怎能不放代码?
GitHub:https://github.com/Light413/dctt_flutter
持续更新中,喜欢就关注我吧!有任何问题欢迎指导,十分感谢!