flutter初探,从零开始搭建一个app

header-illustration

一.flutter是什么?

Flutter是什么?
FlutterGoogle开发维护的一个跨平台(Android 和 iOS)的移动开发框架,使用的是 Dart 语言。Flutter在Dart中实现了其它大部分系统(组合、手势、动画、框架、widget等。

二.Flutter与react native 性能对比?

1。RN的渲染性能机制是基于前端框架的考虑,复杂的UI渲染是需要依赖多个view叠加.比如我们渲染一个复杂的ListView,每一个小的控件,都是一个native的view,然后相互组合叠加.想想此时如果我们的list再需要滑动刷新,会有多少个对象需要渲染.react native渲染过程如下:

v2-5419f761671e2dbdcaa0e78714a77f5c_hd

2.Flutter 和react native框架不同,Flutter既不使用WebView,也不使用操作系统的原生控件。 通过底层C/C++构建。不需要通过JSbridge层,导致其性能优于react native。下图为flutter的渲染过程:

v2-f50ceee1cd12761ce87d8cd6e134a371_hd

三.flutter的安装和使用

作者这里选择Mac平台,IOS应用作为开发环境
1.获取文件

git clone -b beta https://github.com/flutter/flutter.git
export PATH=`pwd`/flutter/bin:$PATH
flutter doctor

2.创建项目和运行

//创建项目
flutter create [Project name]
cd [Project name]
//运行项目
flutter run
//如果没有启动终端模拟器时候会报错,这时候需要
flutter emulators
flutter emulators --launch apple_ios_simulator
//注意:IOS创建项目时候要保证有Xcode的环境.

三.编写第一个程序

1.引入对应的package文件
1)打开 pubspec.yaml, 并将需要包文件加入到配置中
2)在终端运行 flutter packages get
flutter packages get命令必须翻墙来执行,如果不行可以设置国内镜像
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

2.写出第一句hello world
QQ20180811-010025@2x

3.在终端模拟器显示效果如下:
QQ20180811-004356@2x

四.创建一个简单APP

1.布局listviwe
WX20180811-161140@2x
终端运行效果如下:
QQ20180811-193721@2x
2.创建网络
引入dart.io处理网络事件
引入dart.convert处字符串json问题
QQ20180811-200630

五.打包运行

IOS需要通过Xcode内build到手机上
androud可以通过:flutter build apk边缘打包到手机上

结论:

Flutter目前还是存在一些不足的:
1.写布局的方式不如web舒服,写起来很生气。
2.会明显增加应用包体积。
flutter好处:
1.跨平台。
2.调试方便,代码更改之后,立刻可以看到效果。
3.社区发展较快。

参考文章:
https://www.zhihu.com/question/50156415
https://flutter.io/get-started/codelab/

发表评论