好像说的就是我呀。学习Flutter一段时间了，我感觉我要入门了，特来总结一下遇到的点点滴滴。如下效果就是我用Flutter重写的曾经项目部分效果，说是部分其实能看到的就tm的一个首页列表。
1、为啥只写了一个页面？
熟悉一个技能写一个页面怎能体现出来？但是本身时间有限，作为快速熟悉上手很难一次性完成。
但是我相信你能很好的做出一个功能页面，其他的功能还会是问题吗？所以作为初试牛刀，入门小结，我就以此为路线，记录下遇到的坑坑洼洼。
2、先看下运行效果吧
gif动图：
homegif.gif
不会动的静态图：
图1 | 图2 |
|---|---|
| |
OK看仔细点， 效果看起来是不是还可以？我感觉还行，至少在安卓和苹果上运行起来基本一致。
3、涉及到的知识点
其实单看页面感觉涉及到的东西不多，但背后同时也隐含了很多。大致归纳下吧；
- 工程及环境搭建、配置，相信很多人在这里停留了很久；
- android、iOS图标、启动页等资源相关的引入及设置；
- 第三方字体图标的使用、第三方依赖库的引入和使用,这有具体的描述: Flutter-引入第三方依赖包
- 基于Dio网络访问的操作封装和数据请求；这个开始很烦，耽误我不少功夫；
- 导航栏的自定义、列表布局、flex相关操作；
- 主题样式配置、局部主题设置颜色及样式相关；
- 时间日期格式化，页面间导航跳转、路由相关；
- 其他系统容器类组件、图片、文本等组件的使用；
- 自定义了组件、页面(其实也是组件)等；
- Dart语言学习、Flutter中文档反反复复的去看；
OK，一时想到的就这些了；放个工程全貌截图吧；
project.png
4、遇到的问题
别看一个简单的开始，遇到的问题太多，多的我都记不清有哪些了，反正佛挡杀佛、鬼挡杀鬼，一切问题直接干就得了；
问题1：导航栏相关：
系统自带的导航栏感觉好高，看起来怪怪的，而且在Andorid点击返回按钮时，你还下面提示个“返回”，感觉很不爽。所以我直接用自定义的了；
问题2：第三方依赖包引入使用问题(Dio)：
这个不再细说了，看Flutter-引入第三方依赖包详细总计。
问题3：Dio使用、Charles抓包相关：
为什么我要抓包了？因为我看到文档说：
dio.png
第一感觉，好爽，不用自己处理转化数据了；但是按照相关参数设置后，我测试接口返回的还是字符串，还是要自己去json转化。所以我要抓包了看看咋回事；
然后又引入下一个问题：
按曾经的操作、设备安装证书、设置代理、IP等，结果没啥反应；安卓、苹果设备来回换都是没反应。证书删了又装，总怀疑自己哪里不对；之前的其他APP在抓就是有结果的；难道Flutter不支持抓包了？？？
于是一番搜索，知道了：Flutter应用抓包的话，代码中也必须设置代理；就像这样：
设置代理.png
然后，Charles就一切正常了！
代码语言：javascript复制问题4：Tab切换页面，切回原来的页面还是重新创建：
bottomNavigationBar: BottomNavigationBar每次来回切换，网络请求都要来一次，这样真的不好。最后换成iOS风格的解决：
代码语言：javascript复制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
持续更新中，喜欢就关注我吧！有任何问题欢迎指导，十分感谢！
