前言
我踏入IT行业的时间比较晚,差不多4个年头了,但这条路并不孤单。非常感谢一直带领我前进的每个领导,现在还清晰地记得“李工”对我说的一句话,"这段代码有一个字母是多余的吗”,虽然这个目标很难实现,但我相信目标会越来越近。就像我经常会说的一句话,"We're getting better each day."。
回到正题,Flutter官方介绍“<font color=grey face="黑体">Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界,Flutter正在被越来越多的开发者和组织使用,并且Flutter是完全免费、开源的。</font>”。Flutter1.0版本在2018年12月5日(北京时间)发布。
2019年年初,我接到领导通知“新项目需要用Flutter开发”,一句话,从此踏入Flutter征程。当时只是觉得,一套Flutter代码,同时实现了Android端、iOS端的应用程序开发,这样子就减少了项目的开发费用,后来觉得,不止于此。
笔者主要从事Android开发,曾参与开发Java项目、C++项目。如果你和我有相似的经验,读取本篇文章毫不费力。
第一步:dart语言
Flutter的开发依赖于dart语言,我是Java语言出身,学习dart语言并不吃力,可以说是非常容易下手。个人觉得,需要注意以下几点:
dart语言是面向对象编程,即使是方法,也可以理解为对象。
类型定义:var,var可以定义任意类型,需要注意的是var一旦赋值,类型就会确定。
变量默认值是null,int i; // 此时i == null。
数据类型包含包含int和double
String格式化,会经常用到操作符‘$’
new关键字可以省略
变量和方法以下划线_开头,默认是私有的
泛型类似于Java中的泛型
方法的参数可选,符号[]、{}
异步编程,Future和then的使用
集合:List、Map、Set
第二步:Android Studio Flutter配置
安装Flutter SDK,
将flutter\bin加入到环境变量,运行flutter doctor
Android Studio配置Flutter插件,在Setting->Plugins里面安装Flutter和dart,重启Android Studio即可。
File->New->New Flutter Project
第三步:Flutter特点
热重载,按下ctrl+s保存,改动即可生效。特殊情况下,如果不生效,需要点击‘闪电图标’实现重载,也是非常方便的。
Widget理念,你在UI上看到的所有的画面都是Widget,大到页面,小到按钮都是各种各样的Widget。这一点需要吐槽,Widget简直太多了,对于刚入门的开发者确实是一个挑战。有单节点布局、容器布局、行列布局、流式布局等,就不举例了。当然,用户可以自定义布局实现自己的需求。
数据与UI绑定,修改数据后,自动刷新画面。这里面还是有一些坑的,因为Flutter的缓存机制,不一定会刷新画面的。
与原生交互,Flutter是UI框架,而有些功能是无法完成的,比如电量的获取等。
第四步:编写第一个Flutter程序
-
Flutter的入口:lib/main.dart
第一个Flutter程序 UI布局及控件
UI布局是一层一层嵌套的,上图包含了一个AppBar和Body,即是标题栏和页面。
Flutter的布局是非常多的,包含MaterialApp、Scaffold、Container、Column、Row、Text、TextField、RichText、FlatButton、Wrap、CustomScrollView、ListView、CircleAvatar、Image、Icon...,wow,太多了。Stateless和Stateful
Stateless是静态的,其中的Body等Widget一旦被渲染后,不会再发生改变,一般用于显示静态页面。
Stateful是可以改变的Widget,Widget会随着状态改变而改变,用的比较多的是setState()方法,重新渲染Widget。-
目录结构
Flutter的代码写在lib文件夹下,与原生的交互分别在android和ios下。另外比较重要的文件是pubspec.yaml,里面包含依赖的Package、内置的资产Image等信息
Flutter程序目录结构
第五步:Dart Package
就像Android的dependencies一样,这个是必不可少的。比如Flutter Team开发的Package是非常方便的。
如果开发的是商业性的项目,在选择Package的时候,需要注意License等之类的许可信息。